¿Qué es Radix UI?
Radix UI es una biblioteca de interfaz de usuario (UI) altamente modular y versátil que ha ganado rápidamente popularidad en el mundo del desarrollo web Frontend. Diseñada para ayudar a los desarrolladores a crear interfaces de usuario avanzadas y personalizables en React, Radix UI se destaca por su enfoque en la accesibilidad, la flexibilidad y la eficiencia.
A diferencia de otros Bibliotecas de componentes UI, Radix UI no impone un diseño visual específico ni un conjunto de componentes predefinidos. En cambio, proporciona una base sólida y extensible para que los desarrolladores construyan sus propias interfaces de usuario. Esto permite una mayor libertad creativa y la capacidad de adaptar las soluciones de UI a las necesidades específicas de un proyecto.
Radix UI se basa en conceptos de diseño web modernos y está construido utilizando tecnologías web estándar, como HTML, CSS y JavaScript. Esto facilita su integración en proyectos existentes y garantiza la compatibilidad con una amplia gama de navegadores y dispositivos. Ademas tambien se puede integrar con Bibliotecas CSS como TailwindCSS, lo que facilita aun mas su adopcion.
Partes de Radix UI
A medida que ha pasado el tiempo esta biblioteca ha ido añadiendo mas y mas funcionalidades y paquetes que lo extienden, entre estas partes que conforman a Radix UI tenemos:
- Radix Primitives. Una de las características destacadas de Radix UI es su enfoque en la accesibilidad. Los primitives de Radix son componentes de Radix UI se crean con las mejores prácticas de accesibilidad en mente, lo que garantiza que las aplicaciones desarrolladas con Radix sean utilizables por personas con discapacidades.
- Radix Icons Los iconos de Radix UI
- Radix Colors El cual es un sistema de color de Radix para aplicar estilos consistentes a todos los componentes
- Radix Themes, el cual es la combinacion de todos las características anteriores pero en componentes reusables al mismo estilo de otras bibliotecas como Material UI, Chakra UI o similares.
Creando un proyecto Frontend con Radix UI
Para este ejemplo estaremos creando un proyecto de Nextjs 13 con Radix UI.
npx create-next-app radix-ui-tutorial
√ Would you like to use TypeScript? ... No
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes
√ Would you like to use `src/` directory? ... Yes
√ Would you like to use App Router? (recommended) ... Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
Una vez creado el proyecto limpiemos todo el codigo de ejemplo. Dejando src/page.js asi:
function Page() {
return (
<div>
<h1>Home Page</h1>
</div>
);
}
export default Page;
y dejando globals.css asi:
@tailwind base;
@tailwind components;
@tailwind utilities;
Es decir solo dejando los estilos de TailwindCSS.
Instalando Radix UI
Luego vamos a instalar Radix UI con el siguiente comando:
npm install @radix-ui/themes
En este caso he instalado Radix UI themes debido a que este trae todos los paquetes anteriores
Luego vamos a actualizar el archivo src/layout.jsx:
import "./globals.css";
import { Inter } from "next/font/google";
import "@radix-ui/themes/styles.css";
import { Theme } from "@radix-ui/themes";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Theme>{children}</Theme>
</body>
</html>
);
}
importando los estilos de Radix Ui asi como tambien su Provider Theme.
Una vez hecho esto ya podemos ejecutar npm run dev
Creando Interfaces con Radix UI Themes
Cuando usamos Radix UI podemos usar tanto clases de Tailwind como clases de CSS, por ejemplo esto es perfectamente valido en nuestro proyecto:
function Page() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<h1>Titulo</h1>
</main>
);
}
export default Page;
Luego podemos combinarlo con los componentes de Radix UI:
import { Heading, Text } from "@radix-ui/themes";
function Page() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<Heading>Hello World</Heading>
<Text>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis,
fugiat?
</Text>
</main>
);
}
export default Page;
Appareance en Radix UI
Una de las cosas mas simples que podemos hacer en Radix UI es cambiar el tema claro y oscuro:
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Theme appearance="dark">{children}</Theme>
</body>
</html>
);
}
Para el siguient ejemplo vamos a crear estos datos en un archivo src/data.js:
export const tasks = [
{
id: 1,
title: "Create a new project",
description: "Create a new project using the Next.js template.",
priority: "high",
author: "Ryan",
createdAt: "2021-05-12",
},
];
// Append 10 tasks to the tasks array
for (let i = 1; i <= 14; i++) {
tasks.push({
id: i,
title: "Create a new project",
description: "Create a new project using the Next.js template.",
priority: "high",
author: "John",
createdAt: "2021-05-12",
});
}
Luego vamos a crear esta interfaz con Radix UI:
import { Badge, Box, Card, Flex, Grid, Heading, Text } from "@radix-ui/themes";
import { tasks } from "./data";
import { Pencil1Icon } from "@radix-ui/react-icons";
function Page() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24">
<Grid columns="3" gap="4">
{tasks.map((task) => (
<Card key={task.id} className="hover:opacity-80 hover:cursor-pointer">
<Heading>Getting Started</Heading>
<Flex justify="between" my="4">
<Badge
color={
task.priority === "high"
? "red"
: task.priority === "medium"
? "yellow"
: "green"
}
>
{task.priority}
</Badge>
<Text>
Creado por {task.author} el {task.createdAt}
</Text>
</Flex>
<Text>
Welcome to your new project! Here are some things to get you
started
</Text>
<Flex gap="2" justify="end" my="2">
<Text>Edit</Text>
<Pencil1Icon className="w-6 h-6" />
</Flex>
</Card>
))}
</Grid>
</main>
);
}
export default Page;
Theme Palete
import { Theme, ThemePanel } from "@radix-ui/themes";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<Theme
appearance="dark"
accentColor="violet"
grayColor="mauve"
panelBackground="solid"
radius="none"
scaling="90%"
>
{children}
<ThemePanel />
</Theme>
</body>
</html>
);
}
Esto generara un Panel para editar propiedades que luego simplemente puedes copiar y pegar en el Layout.jsx