Radix Themes

Qué es

Radix Themes es una biblioteca de componentes React con estilos, creada y mantenida por WorkOS. A diferencia de Radix Primitives (componentes sin estilo), aquí los componentes vienen pre-estilizados y listos para usar, con un sistema de temas configurable. Está escrita en TypeScript y CSS, y se publica bajo licencia MIT.

Para qué sirve

• Montar interfaces React completas sin tener que diseñar cada componente desde cero.
• Mantener consistencia visual con un sistema de tokens (color de acento, radio, escala) configurable desde el componente Theme.
• Construir productos accesibles aprovechando las bases de Radix Primitives.
• Iterar rápido sobre el aspecto con el ThemePanel para previsualizar temas en tiempo real.

Cuándo usarlo

• Cuando quieres componentes React que funcionen out of the box con mínima configuración.
• Cuando necesitas accesibilidad y soporte de modo oscuro sin montarlo a mano.
• Si prefieres control total del estilo, considera Radix Primitives (sin estilos) o alternativas como shadcn/ui o Mantine.

Ejemplo

Instalación y uso básico:

npm install @radix-ui/themes

import '@radix-ui/themes/styles.css';
import { Theme, Flex, Text, Button } from '@radix-ui/themes';

export default function App() {
  return (
    <Theme accentColor="indigo" radius="medium">
      <Flex direction="column" gap="2">
        <Text>Hola desde Radix Themes :)</Text>
        <Button>Vamos allá</Button>
      </Flex>
    </Theme>
  );
}

Puntos clave

• Componentes pre-estilizados y accesibles construidos sobre Radix Primitives.
• Sistema de temas con color de acento, radio y escala configurables vía props del componente Theme.
• Soporte de apariencias (incluido modo oscuro) y ThemePanel para previsualización en tiempo real.

Ten en cuenta

• Es específica de React; no sirve para Vue, Svelte u otros frameworks.
• Aporta sus propios tokens y estilos, lo que puede chocar si ya usas un sistema de diseño propio o utilidades como Tailwind.
• Si necesitas control total sobre el estilo, Radix Primitives da los componentes sin estilo y más libertad.