Componentes

shadcn/ui

Style radix-nova com 25 componentes instalados:

alert-dialog, avatar, badge, breadcrumb, button, card, collapsible, combobox, dialog, dropdown-menu, field, input, input-group, label, select, separator, sheet, sidebar, skeleton, sonner, switch, table, tabs, textarea, tooltip

Adicionar componentes

cd apps/app && bunx shadcn@latest add <component>

Componentes recomendados

Antes de criar UI manualmente, verifique se shadcn ja tem:

• Tabelas com sorting/filtering → table + TanStack Table
• Charts/graficos → chart
• Command palette → command
• Paginacao → pagination
• Date picking → calendar date-picker
• Drawers → drawer
• Toasts → sonner (instalado) — use toast() de sonner

Imports

Importe componentes diretamente — sem camada de wrapper:

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

Customizacao

Os componentes em src/components/ui/ sao codigo proprio. Edite diretamente quando precisar customizar.

cn()

Utilitario para merge condicional de classes (clsx + tailwind-merge):

import { cn } from "@/lib/utils";

<div className={cn("px-4 py-2", isActive && "bg-primary text-white")} />

Icones

Apenas Lucide React:

import { Settings, Users, Kanban } from "lucide-react";

<Settings className="size-4" />