Grimório de Design UEX

https://grimorio-uex.lovable.app
Admin
Grimório de Design UEX is a comprehensive UI guidelines and design system documentation for React...
Tokens:20,026
Snippets:196
Trust Score:8.4
Update:5 months ago
Show doc for...
Tokens:
Raw
### Instalação de Bibliotecas de Ícones

Source: https://grimorio-uex.lovable.app/icons

Instale o pacote npm correspondente à biblioteca de ícones do tema desejado. Use o pacote padrão do tema sempre que possível.

```bash
# Standard
npm install lucide-react
```

```bash
# Soft
npm install @material-symbols/react-400
```

```bash
# Blueprint
npm install @phosphor-icons/react
```

--------------------------------

### Generated Style Guide - Standard Theme

Source: https://grimorio-uex.lovable.app/style-guide

This is a generated style guide for the 'Standard' theme, detailing color palettes, border radius tokens, and font information. It's automatically generated by the Grimorio Design System.

```markdown
# Style Guide — Standard

> Gerado pelo Grimório de Design da UEX
> Cor primária: #177ea1 (stop 600 — detectado automaticamente)
> Tema: Standard — O ponto de partida neutro. Serve qualquer produto sem requisito de estilo específico.

## 1. Tema

| Propriedade | Valor |
|---|---|
| Tipo | Standard |
| Fonte padrão | Inter |
| Categoria da fonte | Sans-serif neutra |
| Biblioteca de ícones | Lucide Icons |
| Pacote npm dos ícones | lucide-react |

## 2. Border radius

Cada tipo de componente usa um nível diferente de arredondamento:

| Token | Valor | Componentes |
|---|---|---|
| --radius-none | 0px | Sem arredondamento |
| --radius-sm | 6px | Badges, tags, small elements |
| --radius-md | 8px | Inputs, selects, tooltips |
| --radius-button | 6px | Botões (todos os variants e tamanhos) |
| --radius-lg | 10px | Cards, modais, popovers, containers |
| --radius-xl | 14px | Sheets, drawers, containers grandes |
| --radius-full | 9999px | Avatares (sempre circular) |

## 3. Paleta de cores

### Primary
A cor primária #177ea1 foi posicionada no stop 600 com base na sua luminosidade perceptual (OKLCH).

| Stop | Hex | HSL (formato shadcn) |
|------|-----|----------------------|
| 50 | #eff9ff | 199.17 94.85% 96.72% |
| 100 | #dcf3fe | 199.05 94.95% 93% |
| 200 | #b8e8fd | 198.73 95.19% 85.8% |
| 300 | #74d4fc | 197.65 95.62% 72.12% |
| 400 | #26b6e7 | 195.22 79.84% 52.63% |
| 500 | #22a6d4 | 195.22 72.52% 48.1% |
| 600 | #177ea1 | 195.22 75% 36.08% |
| 700 | #106480 | 195.22 77.63% 28.32% |
| 800 | #0b5068 | 195.22 80.91% 22.56% |
| 900 | #084357 | 195.26 83.89% 18.61% |
| 950 | #02202c | 196.58 91.27% 9% |

### Neutral
Cinzas tingidos com o hue da cor primária. Usados para texto, bordas, backgrounds e estados muted.

| Stop | Hex | HSL (formato shadcn) |
|------|-----|----------------------|
| 50 | #f5f8f9 | 199.24 22.69% 96.92% |
| 100 | #eaeff1 | 199.22 20.44% 93.21% |
| 200 | #d7dee2 | 199.18 16.83% 86.41% |
| 300 | #bac3c7 | 199.16 10.93% 75.47% |
| 400 | #96a1a6 | 199.11 8.51% 61.88% |
| 500 | #869297 | 199.1 7.22% 55.9% |
| 600 | #5f696e | 199.07 7% 40.15% |
| 700 | #4c5458 | 199.07 7.22% 32.09% |
| 800 | #3e4447 | 199.08 7.13% 26.11% |
| 900 | #34393c | 199.1 6.59% 21.96% |
| 950 | #1a1d1e | 199.11 7.34% 11.14% |

```

--------------------------------

### Responsive H1 Example

Source: https://grimorio-uex.lovable.app/docs/tipografia

Illustrates how the H1 font size adjusts across different screen sizes using responsive utility classes. This ensures optimal readability on mobile, tablet, and desktop.

```jsx
text-2xl md:text-3xl lg:text-4xl
```

--------------------------------

### Install Lucide React Icons

Source: https://grimorio-uex.lovable.app/style-guide

Install the `lucide-react` npm package to use Lucide Icons within your React application. This library provides a wide range of scalable vector icons.

```bash
npm install lucide-react
```

--------------------------------

### Prompt for Generating User Listing Page

Source: https://grimorio-uex.lovable.app/docs/tipografia

Provides a detailed prompt for an AI to generate a user listing page, incorporating specific typography rules, semantic HTML, and layout constraints. It emphasizes adherence to the style guide.

```markdown
Preciso criar uma página de listagem de usuários com filtros e uma seção de detalhes ao clicar.

Use as regras de tipografia definidas no style_guide.md que está no projeto.

Regras obrigatórias:
- Apenas H1, H2, H3, H4 e <p>. Não invente outros níveis.
- Um único H1 por página.
- Não pule níveis (H1 → H2 → H3, nunca H1 → H3).
- Use as tags semânticas (<h1>, <h2>...), não estilize <p> como heading.
- Headings usam a cor --foreground. Não use outras cores em títulos.
- Parágrafos em desktop têm largura máxima de ~680px (max-w-prose).
- Texto corrido nunca menor que 14px.
- Alinhamento à esquerda. Centralizado só para títulos de empty state.
- Bold em <p> apenas para palavras-chave isoladas, nunca no parágrafo inteiro.
- Se tiver modal, o título do modal é H3.
- Respeite os tamanhos, pesos e espaçamentos definidos nos tokens do style_guide.md.

A página terá um sidebar à esquerda com navegação e o conteúdo principal à direita.
```

--------------------------------

### Estruturar Prompt para Componente UI

Source: https://grimorio-uex.lovable.app/boas-praticas

Um prompt detalhado para geração de UI deve incluir o componente desejado, estrutura, estados, responsividade, design system e restrições. Quanto mais específico, melhor o resultado.

```markdown
# Design System Context

## Stack
- React 18 + TypeScript
- Tailwind CSS + shadcn/ui
- Lucide icons
- react-hook-form + zod

## Convenções
- Usar APENAS tokens semânticos (bg-background, text-foreground, etc.)
- NUNCA usar cores hardcoded (bg-blue-500, text-white)
- Espaçamento: escala 4px (p-1, p-2, p-4, p-6, p-8)
- Radius: usar var(--radius) via rounded-lg/md/sm
- Componentes: sempre usar shadcn/ui como base

## Estados Obrigatórios
Todo componente interativo deve ter:
- default, hover, focus, active, disabled
- loading (quando aplicável)
- error (quando aplicável)
- empty state (para listas/tabelas)

## Responsividade
- Mobile first
- Breakpoints: sm:640px, md:768px, lg:1024px, xl:1280px
- Sidebar collapsa em mobile
```

```markdown
Estados do componente DataTable:
1. Loading: Skeleton rows (5 linhas) com shimmer animation
2. Empty: Ilustração + texto "Nenhum resultado encontrado" + botão "Limpar filtros"
3. Error: Alert variant="destructive" com mensagem + botão "Tentar novamente"
4. Success: Tabela renderizada com dados
5. Partial: Tabela com dados + banner "Mostrando resultados parciais"
6. Selecting: Checkboxes visíveis, toolbar de ações em batch
```

```markdown
## Restrições
- NÃO usar: CSS inline, !important, classes utilitárias de cor direta
- NÃO instalar: novas bibliotecas sem aprovação
- SEMPRE: usar componentes shadcn/ui existentes
- SEMPRE: TypeScript strict mode
- SEMPRE: exportar como default + named export
- MÁXIMO: 150 linhas por componente
- ACESSIBILIDADE: WCAG 2.1 AA mínimo
```

```markdown
#LoginForm Prompt v2.0
# Changelog: Added OAuth buttons, improved error handling
# Date: 2024-01-15
# Result: ✅ Approved

Crie um componente LoginForm com:
- Campos: email, senha
- OAuth: botões Google e GitHub
- Validação: zod schema
- Estados: idle, loading, error, success
- Design: Card centralizado, tokens do DS
- A11y: aria-labels, focus management
```

--------------------------------

### Icon Button with Accessibility

Source: https://grimorio-uex.lovable.app/botoes

Provides examples of icon-only buttons, emphasizing the importance of `aria-label` for accessibility. Suitable for toolbars or actions where space is limited.

```javascript
<Button variant="ghost" size="icon" aria-label="Editar registro">
  <Pencil className="h-4 w-4" />
</Button>

<Button variant="outline" size="icon" aria-label="Configurações">
  <Settings className="h-4 w-4" />
</Button>
```

--------------------------------

### Exemplo de Prompt Detalhado para UI

Source: https://grimorio-uex.lovable.app/boas-praticas

Este prompt especifica um componente LoginForm com campos, validação, estados, componentes de UI, layout, tema e acessibilidade, visando um resultado preciso.

```markdown
Crie um componente LoginForm com:
- Campos: email (type email, obrigatório) e senha (type password, min 8 chars)
- Validação com react-hook-form + zod
- Estados: idle, loading (spinner no botão), error (toast)
- Componentes: shadcn Input, Button, Form, Label
- Layout: Card centralizado, max-w-md, responsivo
- Tema: usar tokens do design system (bg-background, text-foreground)
- Acessibilidade: labels associados, aria-invalid nos erros
- Ação: onSubmit async com feedback visual
```

--------------------------------

### Exemplo de Botão com Cores Hardcoded (O que Não Fazer)

Source: https://grimorio-uex.lovable.app/botoes

Nunca use cores hardcoded como 'bg-blue-500'. Utilize os variants definidos para herdar automaticamente os tokens de cor do projeto.

```html
<Button className="bg-blue-500">Botão Azul</Button>
```

--------------------------------

### Exemplo de Botão com Feedback de Loading

Source: https://grimorio-uex.lovable.app/botoes

Indique o processamento de uma ação assíncrona exibindo um spinner no botão.

```html
<Button variant="default" disabled>
  <svg className="animate-spin h-4 w-4 mr-2" viewBox="0 0 24 24">
    <!-- ... spinner icon ... -->
  </svg>
  Processando...
</Button>
```

--------------------------------

### Botão Renderizado como Outro Elemento

Source: https://grimorio-uex.lovable.app/botoes

Use o prop 'asChild' para renderizar o botão como outro elemento HTML, como um link.

```javascript
asChild
boolean
```

--------------------------------

### Exemplo de Uso de Botões em Toolbars

Source: https://grimorio-uex.lovable.app/botoes

Posicionamento para toolbars: utilitários à esquerda, criadores e ações à direita.

```html
<div class="flex justify-between">
  <div>
    <Button variant="outline" size="sm">Filtrar</Button>
  </div>
  <div class="flex gap-2">
    <Button variant="secondary" size="sm">Exportar</Button>
    <Button variant="default" size="sm">+ Novo</Button>
  </div>
</div>
```

--------------------------------

### Layout Base Context for AI

Source: https://grimorio-uex.lovable.app/layout-base

Define a estrutura e regras para o layout base da aplicação, útil para guiar a geração de código por IA. Inclui detalhes sobre Sidebar, Header, Content e responsividade.

```markdown
# Layout Base

## Estrutura
- SidebarProvider wraps tudo
- Sidebar: collapsible="icon", side="left"
- Header: sticky, h-14, border-b
- Content: flex-1, overflow-auto, max-w-4xl container

## Regras
- Sidebar SEMPRE usa shadcn/ui Sidebar components
- Menu items usam NavLink com activeClassName
- Header SEMPRE tem SidebarTrigger + ThemeToggle
- Container: max-w-4xl mx-auto px-6 py-8
- Mobile: sidebar vira sheet overlay
```

--------------------------------

### Exemplo de Botão com Label Genérico (O que Não Fazer)

Source: https://grimorio-uex.lovable.app/botoes

Evite labels genéricos como 'OK', 'Sim' ou 'Clique aqui', pois não comunicam a ação de forma clara.

```html
<Button variant="default">OK</Button>
```

--------------------------------

### Responsive Button Layout

Source: https://grimorio-uex.lovable.app/botoes

Shows how to arrange buttons responsively, stacking them on smaller screens and aligning them to the right on larger screens. Useful for forms and action groups.

```javascript
<div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-2">
  <Button variant="outline">Cancelar</Button>
  <Button variant="default">Salvar</Button>
</div>
```

--------------------------------

### Base Data Grid with Fill/Fit Columns and Sticky Actions

Source: https://grimorio-uex.lovable.app/data-grid

Implements a responsive data grid using shadcn/ui Table components. Features include fill and fit column types, sticky right-aligned action column, and integration with checkboxes, badges, and buttons. Requires 'data' array with 'id', 'name', 'active', 'date', and 'value' properties.

```jsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Pencil, Trash2 } from "lucide-react";

<div className="rounded-md border border-border overflow-x-auto">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead className="w-[48px]">
          <Checkbox />
        </TableHead>
        <TableHead className="w-full font-medium">Nome</TableHead>
        <TableHead className="whitespace-nowrap font-medium">Status</TableHead>
        <TableHead className="whitespace-nowrap font-medium">Data</TableHead>
        <TableHead className="whitespace-nowrap font-medium text-right">Valor</TableHead>
        <TableHead className="whitespace-nowrap font-medium sticky right-0 bg-background">Ações</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {data.map((item) => (
        <TableRow key={item.id}>
          <TableCell className="w-[48px]"><Checkbox /></TableCell>
          <TableCell className="w-full">{item.name}</TableCell>
          <TableCell className="whitespace-nowrap">
            <Badge variant="secondary">
              {item.active ? "Ativo" : "Inativo"}
            </Badge>
          </TableCell>
          <TableCell className="whitespace-nowrap">{item.date}</TableCell>
          <TableCell className="whitespace-nowrap text-right">{item.value}</TableCell>
          <TableCell className="whitespace-nowrap sticky right-0 bg-background">
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon" className="h-7 w-7">
                <Pencil className="h-3.5 w-3.5" />
              </Button>
              <Button variant="ghost" size="icon" className="h-7 w-7">
                <Trash2 className="h-3.5 w-3.5" />
              </Button>
            </div>
          </TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
</div>
```

--------------------------------

### Ícone em Botão

Source: https://grimorio-uex.lovable.app/icons

Demonstra o uso de ícones em botões, tanto com texto quanto isoladamente. Para botões apenas com ícone, o atributo 'aria-label' é obrigatório para acessibilidade.

```jsx
// Botão com ícone + texto
<Button variant="outline">
  <Settings className="h-4 w-4 mr-2" />
  Configurações
</Button>
```

```jsx
// Botão só ícone — aria-label obrigatório
<Button variant="ghost" size="icon" aria-label="Configurações">
  <Settings className="h-4 w-4" />
</Button>
```

--------------------------------

### Ícone Inline com Texto

Source: https://grimorio-uex.lovable.app/icons

Exibe um ícone ao lado de um texto, utilizando classes Tailwind para espaçamento e alinhamento. O ícone deve ter um tamanho proporcional ao contexto.

```jsx
<p className="flex items-center gap-2">
  <Home className="h-4 w-4" />
  <span>Início</span>
</p>
```

--------------------------------

### Acessibilidade com Ícones

Source: https://grimorio-uex.lovable.app/icons

Aplica atributos de acessibilidade como 'aria-label' e 'aria-hidden' para garantir que os ícones sejam compreendidos por leitores de tela. Ícones de status devem usar cores semânticas.

```jsx
 {/* Action sem texto → aria-label */}
<button aria-label="Excluir registro">
  <Trash2 className="h-4 w-4" />
</button>
```

```jsx
 {/* Action com texto → aria-hidden no ícone */}
<button>
  <Trash2 className="h-4 w-4" aria-hidden="true" />
  Excluir
</button>
```

```jsx
 {/* Status com cor semântica */}
<span className="flex items-center gap-2 text-green-600">
  <CircleCheck className="h-4 w-4" aria-hidden="true" />
  Aprovado
</span>
```

```jsx
 {/* Decorative */}
<Search className="h-8 w-8 text-muted-foreground" aria-hidden="true" />
```

--------------------------------

### AppLayout Component

Source: https://grimorio-uex.lovable.app/layout-base

Componente React que define a estrutura principal da aplicação, incluindo sidebar, header e área de conteúdo. Utiliza SidebarProvider para gerenciar o estado da sidebar.

```typescript
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "./AppSidebar";
import { ThemeToggle } from "./ThemeToggle";

export function AppLayout({ children }) {
  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full">
        <AppSidebar />
        <div className="flex-1 flex flex-col min-w-0">
          <header className="h-14 flex items-center justify-between border-b border-border px-4 bg-background sticky top-0 z-30">
            <SidebarTrigger />
            <ThemeToggle />
          </header>
          <main className="flex-1 overflow-auto">
            <div className="max-w-4xl mx-auto px-6 py-8">
              {children}
            </div>
          </main>
        </div>
      </div>
    </SidebarProvider>
  );
}
```

--------------------------------

### Botão com Ícone (Leading)

Source: https://grimorio-uex.lovable.app/botoes

Ícone à esquerda do texto reforça a ação e é o padrão para botões com texto.

```javascript
<Button variant="default" size="sm">
  <Plus className="h-4 w-4" />
  Criar novo
</Button>
```

--------------------------------

### Exemplo de Uso de Botões em Formulários/Modais

Source: https://grimorio-uex.lovable.app/botoes

Posicionamento padrão para formulários e modais: primary à direita, e outros tipos à esquerda na sequência de prioridade.

```html
<Button variant="outline" size="sm">Cancelar</Button>
<Button variant="default" size="sm">Salvar</Button>
```

--------------------------------

### Botão Link

Source: https://grimorio-uex.lovable.app/botoes

Use para peso mínimo e navegação sutil. O hover adiciona sublinhado.

```javascript
variant="link"
```

--------------------------------

### Exemplo de Botão com Label Descritivo

Source: https://grimorio-uex.lovable.app/botoes

Use um label descritivo com um verbo de ação claro para indicar o que o botão faz.

```html
<Button variant="default">Salvar cadastro</Button>
```

--------------------------------

### Responsive Headings and Paragraph Width

Source: https://grimorio-uex.lovable.app/docs/tipografia

Demonstrates responsive typography for H1 and paragraph width. H1 scales with screen size, while paragraphs use `max-w-prose` only on larger screens.

```jsx
{
{/* H1 responsivo */}
<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight">
  Dashboard financeiro
</h1>

{/* Parágrafo — max-w-prose apenas em desktop */}
<p className="text-sm leading-relaxed lg:max-w-prose">
  Acompanhe seus indicadores e tome decisões baseadas em dados.
</p>
}
```

--------------------------------

### Botão com Ícone (Trailing)

Source: https://grimorio-uex.lovable.app/botoes

Ícone à direita do texto é usado apenas para navegação e chevrons de dropdown.

```javascript
<Button variant="default" size="sm">
  Próximo
  <ArrowRight className="h-4 w-4" />
</Button>
```

--------------------------------

### Data Grid Prompt for shadcn/ui Table

Source: https://grimorio-uex.lovable.app/data-grid

Use this prompt to generate a data grid component. It details column types, inline actions, toolbar layout, filtering options, sorting behavior, selection mechanisms, and footer configurations.

```markdown
Crie um componente de listagem de [descreva o que a tabela exibe — ex: "pacientes de uma clínica", "transações financeiras"] usando shadcn/ui Table.

## Colunas
- Cada coluna é "fill" (expande, nunca trunca) ou "fit" (abraça o conteúdo, ocupa o mínimo)
- Toda tabela precisa de pelo menos uma coluna fill

Checkbox (fit, fixa 48px)

[Coluna principal] (fill, mín 280px, nunca truncar)
→ [Descreva o conteúdo agrupado. Ex: avatar de iniciais + nome + email na mesma célula]
→ [Se houver classificação com 2-4 opções, use ícone com tooltip junto ao nome. Ex: 👤 PF / 🏢 PJ]

[Coluna secundária] (fit, badge ~120px)
→ [Opções e cores. Ex: "Ativo" = green, "Pendente" = yellow, "Inativo" = red]

[Coluna secundária] (fit, ~120px)

[Coluna numérica] (fit, ~130px, alinhado à direita, tabular-nums)

Ações (fit, sticky right, abraça os botões)

Colunas opcionais (ocultas por padrão, visíveis via seletor de colunas):
- [Coluna extra] (fit, text-muted-foreground)
- [Coluna extra] (fit, text-muted-foreground)

## Ações em linha (dropdown)
- 3+ ações agrupadas em menu dropdown (⋮)
- [Editar] (ícone Pencil)
- [Duplicar] (ícone Copy)
- [Exportar] (ícone Download)
- Separador
- [Excluir] (ícone Trash2, text-destructive) — destrutiva sempre por último

## Toolbar
- Layout: flex items-center justify-between

Esquerda                              Direita
Busca → Período → Filtros rápidos     Limpar filtros → Filtros → Colunas → + Novo

- Busca: input full-text, filtra por [liste os campos — ex: "nome, email"]. Debounce 300ms

- Período: botão com popover de presets [Hoje, Últimos 7 dias, Últimos 30 dias, Este mês]
  → Filtra por [coluna de data]
- Filtros rápidos: [liste — ex: Select de Status com opções Todos/Ativo/Pendente/Inativo]
  → O próprio componente mostra o valor selecionado

- Filtros avançados: botão "Filtros" abre painel lateral (Sheet) com:
  → [Liste os campos — ex: Status (Select), Faixa de valor (2 inputs Mín/Máx), Data (2 inputs De/Até)]
  → Footer: "Limpar" (outline) + "Aplicar" (default)

- Colunas: botão "Colunas" abre dropdown com checklist. Colunas obrigatórias (não desmarcam): [liste]. Mostra "X de Y colunas visíveis"

- Ação principal: botão [+ Novo] (variant default)

- "Limpar filtros" aparece quando qualquer filtro está ativo

## Ordenação
- Colunas ordenáveis: [liste — ex: Nome, Status, Data, Valor]
- Clique no header: ASC → DESC → sem ordenação
- Ícone: ArrowUpDown (inativo), ArrowUp/ArrowDown (ativo)
- Checkbox e Ações nunca são ordenáveis

## Seleção + ações em lote
- Checkbox no header seleciona todos da página atual
- Indeterminate quando seleção parcial
- Quando há seleção, toolbar é substituída por:
  → "X selecionado(s)" + [liste ações — ex: Exportar (outline), Ativar (outline), Excluir (destructive)]
- Ações destrutivas em lote exigem confirmação (Dialog)

## Footer da tabela
- Barra fixa no rodapé da tabela (border-t, flex items-center justify-between, px-4 py-3)

Esquerda — Seletor de densidade:
- Grupo de 3 botões segmentados (Alta | Média | Baixa). O botão ativo tem fundo invertido (bg-foreground text-background). Densidade selecionada: Média
- Ao trocar densidade, o padding e font-size do TableBody mudam em tempo real:
  → Alta = py-1, text-xs (12px) — muitos dados, dashboards
  → Média = py-2, text-sm (13px) — padrão, CRUDs e listagens
  → Baixa = py-3, text-sm (14px) — poucos registros, B2C
- A mudança se aplica apenas ao TableBody, não ao header nem ao footer

Centro — Navegação:
- "Exibindo X-Y de Z" + botões Anterior / Próximo

Direita — Itens por página:
- "Linhas por página:" + Select com opções (10, 25, 50, 100)

## Empty state
- Ícone decorativo (aria-hidden)
- Mensagem: [ex: "Nenhum registro encontrado."]
- Ação: botão [ex: "+ Adicionar registro"] ou "Limpar filtros" se há filtros ativos
```

--------------------------------

### Botão Outline

Source: https://grimorio-uex.lovable.app/botoes

Use como ação de escape, como cancelar ou voltar. Possui borda e background de acentuação no hover.

```javascript
variant="outline"
```

--------------------------------

### Loading and Disabled Button States

Source: https://grimorio-uex.lovable.app/botoes

Illustrates how to display a button in a loading state with a spinner and text, and how to disable a button to prevent interaction. Essential for asynchronous operations.

```javascript
import { Loader2 } from "lucide-react";

<Button disabled>
  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
  Salvando...
</Button>

<Button disabled>Desabilitado</Button>
```

--------------------------------

### Botão com Classes Adicionais

Source: https://grimorio-uex.lovable.app/botoes

Use o prop 'className' para adicionar classes Tailwind CSS personalizadas ao botão.

```javascript
className
string
```

--------------------------------

### Exemplo de Uso de Botões em Mobile

Source: https://grimorio-uex.lovable.app/botoes

Layout full-width para mobile, com o botão primary posicionado acima.

```html
<div class="flex flex-col gap-2">
  <Button variant="default" size="lg">Salvar</Button>
  <Button variant="outline" size="lg">Cancelar</Button>
</div>
```

--------------------------------

### List with Avatar and Actions

Source: https://grimorio-uex.lovable.app/list

This component displays a list of items, each with an avatar, name, description, and an action button. It includes hover states and uses a border with rounded corners. Ensure items have id, name, description, and optionally avatarUrl.

```typescript
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { MoreHorizontal } from "lucide-react";

interface ListItem {
  id: string;
  name: string;
  description: string;
  avatarUrl?: string;
}

export function UserList({ items }: { items: ListItem[] }) {
  return (
    <div className="divide-y divide-border border border-border rounded-lg">
      {items.map((item) => (
        <div key={item.id} className="flex items-center gap-3 px-4 py-3 hover:bg-accent/50 transition-colors">
          <Avatar className="h-8 w-8">
            <AvatarImage src={item.avatarUrl} />
            <AvatarFallback>{item.name[0]}</AvatarFallback>
          </Avatar>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-foreground truncate">{item.name}</p>
            <p className="text-xs text-muted-foreground truncate">{item.description}</p>
          </div>
          <Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
            <MoreHorizontal className="h-4 w-4" />
          </Button>
        </div>
      ))}
    </div>
  );
}
```

--------------------------------

### Hierarquia Visual de Headings - Correto vs. Errado

Source: https://grimorio-uex.lovable.app/docs/tipografia

Ilustra a regra de não pular níveis de heading para garantir acessibilidade e navegação sequencial.

```plaintext
✅ Correto          ❌ Errado
H1                  H1
  H2                  H3  ← pulou H2
    H3                  H4
      H4                    p
        p
```

--------------------------------

### Botão Desabilitado

Source: https://grimorio-uex.lovable.app/botoes

Desabilita a interação do botão, reduzindo sua opacidade para 0.5.

```javascript
disabled
opacity 0.5
```

--------------------------------

### Exemplo de Botão Destructive com Confirmação

Source: https://grimorio-uex.lovable.app/botoes

Botões destructive devem sempre ser acompanhados de um modal de confirmação para evitar ações acidentais.

```html
<Button variant="destructive">Excluir item</Button>
<!-- Modal de confirmação seria exibido aqui -->
```

--------------------------------

### H1 - Título de Página

Source: https://grimorio-uex.lovable.app/docs/tipografia

Utilizado para o título principal de uma rota ou página. Deve aparecer apenas uma vez por tela.

```html
Gerenciar usuários
text-4xl · Bold (700) · leading-tight · mb-6 · --foreground
```

--------------------------------

### Section Spacing with Headings and Paragraphs

Source: https://grimorio-uex.lovable.app/docs/tipografia

Illustrates proper spacing between sections using margin utilities. `mb-4` is used for spacing below headings and paragraphs within a section, and `mt-8` separates distinct sections.

```jsx
{
{/* Seção com heading + conteúdo */}
<section>
  <h2 className="text-2xl font-semibold leading-tight mb-4">
    Histórico de pedidos
  </h2>
  <p className="text-sm leading-relaxed mb-4 max-w-prose">
    Veja todos os pedidos realizados nos últimos 30 dias.
  </p>
  {/* ...componentes */}
</section>

{/* Nova seção após conteúdo — mt maior para separar */}
<section className="mt-8">
  <h2 className="text-2xl font-semibold leading-tight mb-4">
    Configurações
  </h2>
  {/* ... */}
</section>
}
```

--------------------------------

### Define Semantic Color and Spacing Tokens

Source: https://grimorio-uex.lovable.app/style-guide

Copy this block into your `src/index.css` to define semantic color and spacing tokens for the application's theme.

```css
@layer base {
  :root {
    /* Backgrounds */
    --background: 0 0% 100%;
    --foreground: 199.11 7.34% 11.14%;
    --card: 0 0% 100%;
    --card-foreground: 199.11 7.34% 11.14%;
    --popover: 0 0% 100%;
    --popover-foreground: 199.11 7.34% 11.14%;

    /* Primary — cor de ação principal */
    --primary: 195.22 72.52% 48.1%;
    --primary-foreground: 199.11 7.34% 11.14%;

    /* Secondary — ação secundária e fundos sutis */
    --secondary: 199.22 20.44% 93.21%;
    --secondary-foreground: 199.1 6.59% 21.96%;

    /* Muted — fundos e textos de baixo contraste */
    --muted: 199.22 20.44% 93.21%;
    --muted-foreground: 199.1 7.22% 55.9%;

    /* Accent — hover, seleção, destaque */
    --accent: 199.22 20.44% 93.21%;
    --accent-foreground: 199.1 6.59% 21.96%;

    /* Destructive */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    /* Bordas e inputs */
    --border: 199.18 16.83% 86.41%;
    --input: 199.18 16.83% 86.41%;
    --ring: 195.22 72.52% 48.1%;

    /* Border radius */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-button: 6px;
    --radius-full: 9999px;

    /* Status */
    --success: 142 76% 36%;
    --success-foreground: 0 0% 100%;
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 0%;
    --info: 195.22 72.52% 48.1%;
    --info-foreground: 199.11 7.34% 11.14%;
  }
}
```

--------------------------------

### H3 - Título de Subseção

Source: https://grimorio-uex.lovable.app/docs/tipografia

Empregado para subdividir uma seção H2 ou como título de modais.

```html
Endereço de cobrança
text-xl · Semibold (600) · leading-tight · mb-3 · --foreground
```

--------------------------------

### Button Variants

Source: https://grimorio-uex.lovable.app/botoes

Demonstrates the different visual styles available for the Button component. Each variant serves a distinct purpose in terms of hierarchy and action.

```javascript
import { Button } from "@/components/ui/button";

<Button variant="default">Primary</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>
```

--------------------------------

### Botão Ghost

Source: https://grimorio-uex.lovable.app/botoes

Use para menor hierarquia, como ações terciárias ou em tabelas. Possui background de acentuação no hover.

```javascript
variant="ghost"
```

--------------------------------

### Action Column with Dropdown Menu

Source: https://grimorio-uex.lovable.app/data-grid

Provides a dropdown menu for actions in a table's action column, suitable for 3 or more actions. Uses shadcn/ui DropdownMenu components. Displays a 'MoreVertical' icon when triggered.

```jsx
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import { MoreVertical } from "lucide-react";

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" size="icon" className="h-7 w-7">
      <MoreVertical className="h-3.5 w-3.5" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuItem>Editar</DropdownMenuItem>
    <DropdownMenuItem>Duplicar</DropdownMenuItem>
    <DropdownMenuItem>Exportar</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem className="text-destructive focus:text-destructive">
      Excluir
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>
```

--------------------------------

### Botão Primary

Source: https://grimorio-uex.lovable.app/botoes

Use para a ação principal da tela. Apenas um por contexto visível. Define a hierarquia visual e os tokens de cor.

```javascript
variant="default"
```

--------------------------------

### Inline Bold Usage in Paragraphs

Source: https://grimorio-uex.lovable.app/docs/tipografia

Shows the correct and incorrect usage of bold text within paragraphs. Use `<strong>` for keywords and avoid applying `font-bold` to the entire paragraph.

```jsx
{
{/* ✅ Correto — bold em palavra-chave */}
<p className="text-sm leading-relaxed">
  O status do pedido mudou para <strong>aprovado</strong>.
</p>

{/* ❌ Errado — parágrafo inteiro em bold */}
<p className="text-sm leading-relaxed font-bold">
  O status do pedido mudou para aprovado e já está em processamento.
</p>
}
```
Tokens:
Raw