Combine com a sua marca

Você pode fazer o widget parecer parte do seu produto sem substituir nenhum componente.

Use isto quando

• o formato padrão do widget serve e o que você precisa é principalmente da marca
• você quer um jeito de copiar e colar para definir cores e raios
• você quer que o widget siga o tema do seu app ou forçar o modo escuro

Escolha o caminho mais simples

Em muitos apps com Tailwind e shadcn, o widget já parece nativo assim que você importa o ponto de entrada de CSS. Comece pela menor opção que cubra o que você precisa.

Prioridade do tema

O widget resolve os valores do tema nesta ordem:

1. As substituições explícitas de --fx-theme-* que você definir em .fluxo
2. Os tokens da página hospedeira no estilo shadcn, como --background, --primary, --radius e --font-sans
3. Os valores padrão embutidos do Fluxo

Ou seja: em muitas configurações o widget já vai se parecer bastante com o seu app antes de você escrever qualquer CSS de tema.

Em muitos apps com shadcn, não faça nada

Se o seu app já expõe os tokens habituais do shadcn em :root e .dark, o widget os pega automaticamente. Não é preciso nenhum mapeamento de tema para começar.

Renderize <Support />, importe support.css ou styles.css e veja até onde o tema automático do hospedeiro leva antes de você adicionar qualquer coisa.

O que é herdado automaticamente

Hoje o widget padrão procura estes tokens do hospedeiro:

• --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

O modo escuro também acompanha o seu app. O widget verifica se há .dark em algum ancestral ou data-color-scheme="dark" na raiz dele.

Essa adoção automática é limitada de propósito aos tokens base padrão no estilo do shadcn:

• cores
• raio
• fontes
• modo escuro

Fixar os valores do widget

Defina os tokens do widget uma vez e mantenha a interface padrão.

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;
}

Isso costuma bastar quando você quer fixar o widget nos seus próprios valores em vez de depender dos tokens da página hospedeira.

Forçar o modo escuro

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

Por padrão o widget segue o tema do seu app. Use theme="dark" quando o widget precisar ficar escuro em vez de seguir o tema da página.

Use theme="light" para fixar o widget no modo claro.

Copiar<Support theme="light" />

Fixar o widget nos seus tokens do shadcn

Continua sendo útil quando você quer que o tema do widget fique explicitamente ligado aos tokens do seu app, mesmo que depois você renomeie ou troque a origem desses 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);
}

O que não é herdado automaticamente

O widget herda os tokens de design CSS, o raio, as fontes e o modo escuro. Ele não herda configuração arbitrária do Tailwind resolvida em tempo de compilação, como:

• escalas de espaçamento próprias
• escalas de sombra próprias
• utilitários de plugins próprios
• renomeações ou variantes de utilitários alheios ao widget

Se o seu app usa nomes de token próprios fora dos tokens base no estilo shadcn, mapeie-os explicitamente para --fx-theme-*.

Quando parar por aqui

• as cores, o raio e o modo escuro já bastam
• você quer manter o layout padrão
• você não precisa de páginas próprias nem de uma estrutura própria

Próximo passo

• Páginas e layouts quando você precisar de outra primeira tela, de uma inserção inline ou da sua própria estrutura
• Textos e idioma quando a próxima mudança for de redação, e não de interface

Referência de tokens para começar

Esta tabela cobre as substituições mais comuns, não todos os tokens exportados. Use o ponto de entrada CSS que você instalar como referência canônica da sua versão do pacote; lá também são definidos popover, secondary, accent, input, ring, o primeiro plano de destructive, as fontes e níveis de fundo adicionais.

Tokens adicionais

Use estes quando os tokens básicos não bastarem:

Cores de status

Cores de destaque dos avatares

Tons de fundo

Os tons de fundo são derivados das suas cores base com color-mix(), a menos que você os substitua diretamente.

O CSS atual usa color-mix(in oklch, …) para os tons derivados. Se você precisa dar suporte a um navegador antigo sem essa sintaxe, substitua diretamente os valores derivados de --fx-theme-* e inclua esse navegador na sua matriz de testes visuais.