shadcn customizado para o ecossistema uMode

Cada bloco abaixo documenta o visual final do componente, sua aplicação prática e um snippet pronto para copiar em novos projetos.

preview + código

Botões

Default com shadow-primary e variantes semânticas.

Button variants

tsx

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Card e badges

Radius 1rem, borda suave e status reutilizáveis.

KPI summary

Bloco recorrente em dashboards e relatórios.

Default

Atenção

Crítico

Destaque

Badge status

tsx

<Badge>Default</Badge>
<Badge variant="ok">OK</Badge>
<Badge variant="atencao">Atenção</Badge>
<Badge variant="critico">Crítico</Badge>
<Badge variant="destaque">Destaque</Badge>

Form controls

Input, Textarea, Select e Tabs sob tokens semânticos.

Estados e interações sob a mesma linguagem visual.

Form primitives

tsx

<Input placeholder="Nome do componente" />
<Textarea placeholder="Escreva uma orientação de uso..." />
<Select>...</Select>
<Tabs defaultValue="preview">...</Tabs>

KpiCard

Componente recorrente para dashboards, cards de overview e módulos de performance.

Pipeline ativo

+9 esta semana

Risco operacional

12%

Abaixo do limite

Pendências críticas

Acompanhar hoje

KpiCard snippet

tsx

<Card className="overflow-hidden border-border/70 bg-card/95">
  <CardContent className="p-6">
    <p className="text-sm text-muted-foreground">Receita processada</p>
    <div className="mt-3 flex items-end justify-between gap-4">
      <span className="text-4xl font-semibold">R$ 148k</span>
      <Badge variant="ok">+12.4%</Badge>
    </div>
  </CardContent>
</Card>