Templates de Página

Padrões pré-definidos para os tipos de página mais comuns.

Table page

Para CRUD listings, listagens e buscas.

// Estrutura
<div className="flex flex-col gap-5 p-5">
  <header> // Título + <Button> Novo
  <div> // <Input> busca + <Select> filtros
  <Table> // Borda arredondada já embutida
  <Pagination> // Ou <Select> de tamanho de página
</div>

Dashboard page

Para visão geral, métricas e gráficos.

// Estrutura
<div className="flex flex-col gap-5 p-5">
  <header> // Título + <Select> filtro de período
  <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
    <Card> // Métrica — valor + <Badge> de tendência
  </div>
  <div className="grid gap-4 lg:grid-cols-2">
    <Card> // Gráfico — título + corpo
  </div>
</div>

Form page

Para criação e edição com seções organizadas.

// Estrutura
<div className="flex flex-col gap-5 p-5 max-w-3xl">
  <header> // Título
  <form>
    <Card> // Seção — grid de <Label> + <Input>
    <Card> // Outra seção
    <div className="flex justify-end gap-3">
      <Button variant="outline">Cancelar</Button>
      <Button>Salvar</Button>
    </div>
  </form>
</div>

Detail page

Para visualização de entidades com tabs.

// Estrutura
<div className="flex flex-col gap-5 p-5">
  <nav> // Breadcrumb
  <header> // Título + <Badge> + ações <Button>
  <Tabs>
    <TabsList variant="line"> // Navegação por tabs
    <TabsContent> // <Card>s com informações
  </Tabs>
</div>