Componentes
Documentação de todos os componentes disponíveis no template. Use esta página como referência para ver exemplos e como usar cada componente.
UI Components
Button
Botão com múltiplas variantes e tamanhos
Variantes disponíveis:
Tamanhos disponíveis:
Como importar:
import { Button } from "@/components/ui/button";Exemplo:
Card
Container para agrupar conteúdo relacionado
Como importar:
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";Exemplo:
Card Title
Card description goes here
Card content area with any content you want.
Input
Campo de entrada de texto com suporte a diferentes tipos
Como importar:
import { Input } from "@/components/ui/input";Exemplo:
Badge
Badge para tags, status e labels
Variantes disponíveis:
Como importar:
import { Badge } from "@/components/ui/badge";Exemplo:
Table
Tabela para exibir dados estruturados
Como importar:
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from "@/components/ui/table";Exemplo:
| Nome | Status | Ações | |
|---|---|---|---|
| João Silva | joao@exemplo.com | Ativo | |
| Maria Santos | maria@exemplo.com | Pendente | |
| Pedro Costa | pedro@exemplo.com | Ativo |
Toast
Notificação toast para feedback ao usuário
Variantes disponíveis:
Como importar:
import { Toast, ToastTitle, ToastDescription, ToastAction, ToastClose } from "@/components/ui/toast";Exemplo:
Esta é uma mensagem de notificação padrão.
Operação realizada com sucesso!
Ocorreu um erro ao processar sua solicitação.
Verifique os dados antes de continuar.
Dialog
Modal/Dialog para exibir conteúdo em overlay
Como importar:
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";Exemplo:
Accordion
Componente expansível para organizar conteúdo em seções
Como importar:
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";Exemplo:
Breadcrumb
Navegação hierárquica mostrando o caminho atual
Como importar:
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";Exemplo:
Calendar
Seletor de data com calendário visual
Como importar:
import { Calendar } from "@/components/ui/calendar";Exemplo:
Novembro 2025
Combobox
Campo de seleção com busca e dropdown
Como importar:
import { Combobox } from "@/components/ui/combobox";Exemplo:
Data Table
Tabela de dados avançada com busca e filtros
Como importar:
import { DataTable } from "@/components/ui/data-table";Exemplo:
| Nome | Status | Função | |
|---|---|---|---|
| João Silva | joao@exemplo.com | Ativo | Admin |
| Maria Santos | maria@exemplo.com | Pendente | User |
| Pedro Costa | pedro@exemplo.com | Ativo | User |
| Ana Oliveira | ana@exemplo.com | Inativo | User |
Date Picker
Seletor de data com popover e calendário
Como importar:
import { DatePicker } from "@/components/ui/date-picker";Exemplo:
Drawer
Menu lateral deslizante (side panel)
Como importar:
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";Exemplo:
Progress
Barra de progresso para indicar progresso de tarefas
Como importar:
import { Progress } from "@/components/ui/progress";Exemplo:
Pagination
Componente de paginação para navegar entre páginas
Como importar:
import { Pagination } from "@/components/ui/pagination";Exemplo:
Radio Group
Grupo de botões de opção (radio buttons) para seleção única
Como importar:
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";Exemplo:
Sheet
Painel lateral deslizante (similar ao Drawer, mas mais completo)
Como importar:
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter } from "@/components/ui/sheet";Exemplo:
Skeleton
Placeholder animado para conteúdo em carregamento
Como importar:
import { Skeleton } from "@/components/ui/skeleton";Exemplo:
Spinner
Indicador de carregamento circular animado
Como importar:
import { Spinner } from "@/components/ui/spinner";Exemplo:
Layout Components
Header
Cabeçalho com navegação e ações. Inclui links principais e botões de ação.
Localização:
@/components/layout/headerComo importar:
import { Header } from "@/components/layout";Uso:
Usado no layout principal da aplicação
Sidebar
Menu lateral responsivo com navegação. Inclui suporte mobile com overlay.
Localização:
@/components/layout/sidebarComo importar:
import { Sidebar } from "@/components/layout";Uso:
Usado em páginas que precisam de navegação lateral
Props:
items: Array<{ title: string; href: string; icon?: React.ReactNode }>Container
Container responsivo para limitar largura de conteúdo com padding automático
Localização:
@/components/layout/containerComo importar:
import { Container } from "@/components/layout";Exemplo:
Grid
Sistema de grid responsivo com colunas configuráveis
Localização:
@/components/layout/gridComo importar:
import { Grid, GridItem } from "@/components/layout";Exemplo:
Stack
Layout flexível para empilhar elementos verticalmente ou horizontalmente
Localização:
@/components/layout/stackComo importar:
import { Stack } from "@/components/layout";Exemplo:
Section
Seção de página com variantes de fundo e padding configurável
Localização:
@/components/layout/sectionComo importar:
import { Section } from "@/components/layout";Exemplo:
Default
Muted
Accent
SplitPane
Painel dividido redimensionável (horizontal ou vertical)
Localização:
@/components/layout/split-paneComo importar:
import { SplitPane } from "@/components/layout";Exemplo:
CardGrid
Grid de cards responsivo para exibir coleções de cards
Localização:
@/components/layout/card-gridComo importar:
import { CardGrid, CardGridItem } from "@/components/layout";Exemplo:
Card 1
Descrição
Card 2
Descrição
Card 3
Descrição