Ajústalo a tu marca

Puedes hacer que el widget parezca parte de tu producto sin sustituir ningún componente.

Usa esto cuando

• la forma por defecto del widget te vale y lo que necesitas sobre todo es la marca
• quieres una forma de copiar y pegar para fijar colores y radios
• quieres que el widget siga el tema de tu aplicación o forzar el modo oscuro

Elige el camino más simple

En muchas aplicaciones con Tailwind y shadcn, el widget ya se siente nativo en cuanto importas el punto de entrada de CSS. Empieza por la opción más pequeña que cubra lo que necesitas.

Prioridad del tema

El widget resuelve los valores del tema en este orden:

1. Las sustituciones explícitas de --fx-theme-* que definas en .fluxo
2. Los tokens de la página anfitriona al estilo shadcn, como --background, --primary, --radius y --font-sans
3. Los valores por defecto integrados de Fluxo

Es decir: en muchos montajes el widget ya se parecerá bastante a tu aplicación antes de que escribas nada de CSS de tema.

En muchas apps con shadcn, no hagas nada

Si tu aplicación ya expone los tokens habituales de shadcn en :root y .dark, el widget los toma automáticamente. No hace falta ninguna correspondencia de tema para empezar.

Renderiza <Support />, importa support.css o styles.css y comprueba hasta dónde te lleva el tema automático del anfitrión antes de añadir nada.

Qué se hereda automáticamente

Hoy el widget por defecto busca estos tokens del anfitrión:

• --background
• --foreground
• --popover
• --popover-foreground
• --primary
• --primary-foreground
• --secondary
• --secondary-foreground
• --muted
• --muted-foreground
• --accent
• --accent-foreground
• --border
• --input
• --ring
• --destructive
• --destructive-foreground
• --radius
• --font-sans
• --font-mono

El modo oscuro también sigue a tu aplicación. El widget comprueba si hay .dark en algún ancestro o data-color-scheme="dark" en su raíz.

Esta adopción automática se limita a propósito a los tokens base estándar al estilo de shadcn:

• colores
• radio
• fuentes
• modo oscuro

Fijar los valores del widget

Define los tokens del widget una vez y conserva la interfaz por defecto.

Copiar.fluxo {
  --fx-theme-primary: #111827;
  --fx-theme-primary-foreground: #ffffff;
  --fx-theme-background: #ffffff;
  --fx-theme-foreground: #111827;
  --fx-theme-border: #e5e7eb;
  --fx-theme-radius: 0px;
}

Eso suele bastar cuando quieres fijar el widget a tus propios valores en lugar de depender de los tokens de la página anfitriona.

Forzar el modo oscuro

Copiarimport { Support } from "@fluxolat/react";
 
<Support theme="dark" />;

Por defecto el widget sigue el tema de tu aplicación. Usa theme="dark" cuando el widget deba quedarse oscuro en lugar de seguir el tema de la página.

Usa theme="light" para fijar el widget al modo claro.

Copiar<Support theme="light" />

Fijar el widget a tus tokens de shadcn

Sigue siendo útil cuando quieres que el tema del widget quede explícitamente ligado a los tokens de tu aplicación, aunque más adelante renombres o cambies el origen de esos tokens.

Copiar:root {
  --fx-theme-background: var(--background);
  --fx-theme-foreground: var(--foreground);
  --fx-theme-primary: var(--primary);
  --fx-theme-primary-foreground: var(--primary-foreground);
  --fx-theme-border: var(--border);
  --fx-theme-radius: var(--radius);
}

Lo que no se hereda automáticamente

El widget hereda los tokens de diseño CSS, el radio, las fuentes y el modo oscuro. No hereda configuración arbitraria de Tailwind resuelta en tiempo de compilación, como:

• escalas de espaciado propias
• escalas de sombra propias
• utilidades de plugins propios
• renombrados o variantes de utilidades ajenos al widget

Si tu aplicación usa nombres de token propios fuera de los tokens base al estilo shadcn, mapéalos explícitamente a --fx-theme-*.

Cuándo quedarte aquí

• con los colores, el radio y el modo oscuro te basta
• quieres mantener la maquetación por defecto
• no necesitas páginas propias ni una estructura propia

Siguiente paso

• Páginas y maquetación cuando necesites otra primera pantalla, una inserción en línea o tu propia estructura
• Textos e idioma cuando el siguiente cambio sea de redacción y no de interfaz

Referencia de tokens para empezar

Esta tabla cubre las sustituciones más habituales, no todos los tokens exportados. Usa el punto de entrada CSS que instales como referencia canónica de tu versión del paquete; ahí también se definen popover, secondary, accent, input, ring, el primer plano de destructive, las fuentes y niveles de fondo adicionales.

Tokens adicionales

Úsalos cuando los tokens básicos no basten:

Colores de estado

Colores de acento para avatares

Tonos de fondo

Los tonos de fondo se derivan de tus colores base con color-mix(), salvo que los sustituyas directamente.

El CSS actual usa color-mix(in oklch, …) para los tonos derivados. Si necesitas dar soporte a un navegador antiguo sin esa sintaxis, sustituye directamente los valores derivados de --fx-theme-* e incluye ese navegador en tu matriz de pruebas visuales.