UI Component Book

Referência visual de todos os componentes shadcn/ui utilizados neste projeto. Cada página exibe todas as variantes disponíveis com pré-visualizações ao vivo e exemplos de código.

👤
Avatar
Elemento de imagem com fallback para representar um usuário.
Ver exemplos →
🏷️
Badge
Exibe um pequeno indicador de status ou rótulo.
Ver exemplos →
🍞
Breadcrumb
Hierarquia de navegação mostrando a localização da página atual.
Ver exemplos →
🔘
Button
Dispara ações ou eventos. Múltiplas variantes e tamanhos.
Ver exemplos →
🃏
Card
Contêiner para informações e ações relacionadas.
Ver exemplos →
☑️
Checkbox
Controle de seleção para escolhas binárias ou múltiplas.
Ver exemplos →
🗂️
Collapsible
Seção de conteúdo expansível que pode ser exibida ou ocultada.
Ver exemplos →
💬
Dialog
Sobreposição modal para ações ou informações importantes.
Ver exemplos →
📋
Dropdown Menu
Menu contextual com uma lista de ações.
Ver exemplos →
📝
Input
Campo de texto para coleta de dados do usuário.
Ver exemplos →
🔢
Input OTP
Input de senha de uso único com campos segmentados.
Ver exemplos →
📄
Pagination
Controle de navegação para conteúdo paginado.
Ver exemplos →
💭
Popover
Exibe conteúdo rico em um portal, acionado por um botão.
Ver exemplos →
🔽
Select
Controle de seleção em dropdown para escolher entre opções.
Ver exemplos →
Separator
Divisor visual entre seções de conteúdo.
Ver exemplos →
📑
Sheet
Painel deslizante a partir da borda da tela.
Ver exemplos →
💀
Skeleton
Placeholder de carregamento para conteúdo sendo buscado.
Ver exemplos →
🔛
Switch
Controle de alternância para estados ligado/desligado.
Ver exemplos →
📊
Table
Exibição de dados estruturados em linhas e colunas.
Ver exemplos →
📌
Tabs
Organização de conteúdo em painéis alternáveis.
Ver exemplos →
💡
Tooltip
Dica contextual exibida ao passar o mouse ou focar.
Ver exemplos →