Componentes

Biblioteca de componentes React construída sobre tokens de design.

Button

Elemento interativo com 4 variantes e 4 tamanhos. Suporta estados de carregamento e desabilitado.

import { Button } from '@ghiberti85/ui'

Badge

Etiqueta pequena em formato de pílula para status e metadados.

DefaultSecondaryDestructiveOutline
import { Badge } from '@ghiberti85/ui'

Card

Contêiner flexível com sub-componentes compostos.

Título do Card

Uma breve descrição do conteúdo do card.

Este é o corpo do card. Pode conter qualquer conteúdo.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@ghiberti85/ui'

Componentes de Formulário

Input

Campo de texto acessível com rótulo, erro e estados desabilitados.

Por favor, insira um endereço de e-mail válido.
import { Input } from '@ghiberti85/ui'

Textarea

Campo de texto multilinha com rótulo, texto auxiliar e estado de erro opcionais.

Até 500 caracteres.
A mensagem é obrigatória.
import { Textarea } from '@ghiberti85/ui'

Select

Dropdown acessível construído com Radix UI. Suporta erro e estado desabilitado.

Por favor, selecione uma fruta.
import { Select } from '@ghiberti85/ui'

Checkbox

Checkbox acessível com estados marcado, desmarcado e indeterminado.

Você pode alterar isso nas configurações da conta.
import { Checkbox } from '@ghiberti85/ui'

Radio / RadioGroup

Grupo de rádio acessível para seleção única de um conjunto de opções.

Método de contato preferido
Enviaremos atualizações para sua caixa de entrada.
Ligaremos para você em horário comercial.
Mensagens curtas para o seu celular.
import { Radio, RadioGroup } from '@ghiberti85/ui'

Switch

Interruptor de alternância para preferências booleanas. Suporta rótulo, descrição e desabilitado.

Ativar funcionalidades experimentais. Pode ser instável.
import { Switch } from '@ghiberti85/ui'

Combobox

Select com busca baseado em Popover com filtragem em tempo real, navegação por teclado e atributos ARIA acessíveis.

import { Combobox } from '@ghiberti85/ui'

NumberInput

Input numérico com botões de incremento/decremento, limites min/max, prefixo/sufixo e precisão.

import { NumberInput } from '@ghiberti85/ui'

FileUpload

Zona de upload com arrastar-e-soltar, pré-visualização de arquivos e validação.

import { FileUpload } from '@ghiberti85/ui'

OTPInput

Campo de senha única com caixas individuais por dígito, avanço automático e suporte a colar.

import { OTPInput } from '@ghiberti85/ui'

TagInput

Campo de texto com múltiplos valores que cria tags removíveis ao pressionar Enter ou vírgula.

ReactTypeScript
import { TagInput } from '@ghiberti85/ui'

Componentes de Exibição

Dialog

Diálogo modal construído com Radix UI, com sobreposição, título, descrição e botões de ação.

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose } from '@ghiberti85/ui'

Separator

Divisor visual fino para separar seções de conteúdo.

Seção A

Seção B

import { Separator } from '@ghiberti85/ui'

Typography

Componentes Heading, Text, Label e Code construídos sobre as escalas tipográficas dos tokens de design.

Tamanhos de títulos

Heading 4xl — Display

Heading 3xl — Título

Heading 2xl — Seção

Heading xl — Subseção

Tamanhos de texto

Text xl — Corpo grande para introduções.

Text lg — Corpo ligeiramente maior.

Text md — Texto padrão para a maioria do conteúdo.

Text sm — Texto auxiliar ou secundário menor.

Text xs — Legendas e letras miúdas.

Código

Inline: const saudacao = 'olá'

function saudar(nome: string) {
  return `Olá, ${nome}!`
}
import { Heading, Text, Label, Code } from '@ghiberti85/ui'

Tooltip

Rótulo flutuante acessível ao passar o mouse ou focar, baseado no Radix UI.

import { Tooltip } from '@ghiberti85/ui'

Avatar

Exibe foto de perfil com fallback automático de iniciais. 5 tamanhos, formatos circular e quadrado.

import { Avatar } from '@ghiberti85/ui'

Tabs

Seções de conteúdo empilhadas exibidas uma de cada vez. Construído sobre o Radix UI com navegação por teclado.

Manage your account settings.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@ghiberti85/ui'

Accordion

Cabeçalhos interativos empilhados verticalmente que revelam seções de conteúdo. Suporta um ou múltiplos itens abertos.

Design tokens are the visual design atoms — colors, spacing, and typography stored as named variables.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@ghiberti85/ui'

Toast

Mensagens de feedback temporárias que aparecem e se dispensam automaticamente. Suporta variantes padrão, sucesso, aviso, erro e informação.

    import { Toaster, useToast } from '@ghiberti85/ui'

    Table

    Tabela de dados responsiva com cabeçalho, corpo, rodapé e legenda. Suporta linhas alternadas.

    Recent invoices.
    InvoiceStatusMethodAmount
    INV-001PaidCredit Card$250.00
    INV-002PendingBank Transfer$150.00
    INV-003PaidPayPal$350.00
    Total$750.00
    import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@ghiberti85/ui'

    Progress

    Barra de progresso animada com 5 variantes (padrão/sucesso/aviso/erro/info) e 3 tamanhos.

    import { Progress } from '@ghiberti85/ui'

    Skeleton

    Placeholder shimmer em CSS para estados de carregamento. Inclui SkeletonText e SkeletonAvatar.

    import { Skeleton, SkeletonText, SkeletonAvatar } from '@ghiberti85/ui'

    Alert

    Mensagens de feedback contextual com 4 variantes, título opcional, ícones integrados e botão de fechar.

    import { Alert } from '@ghiberti85/ui'

    Popover

    Painel flutuante baseado em Radix UI. Suporta 4 lados, seta e animação de abertura/fechamento.

    import { Popover, PopoverTrigger, PopoverContent, PopoverClose } from '@ghiberti85/ui'

    Spinner

    Spinner de carregamento em CSS puro. 4 tamanhos, 4 variantes, label acessível.

    import { Spinner } from '@ghiberti85/ui'

    DropdownMenu

    Menu de contexto baseado em Radix UI. Suporta itens, rótulos, separadores, checkboxes, grupos de rádio, submenus e atalhos de teclado.

    import { DropdownMenu, … } from '@ghiberti85/ui'

    AlertDialog

    Diálogo modal de confirmação baseado em Radix UI. Bloqueia a interação até que o usuário responda. Suporta variante de ação destrutiva.

    import { AlertDialog, … } from '@ghiberti85/ui'

    Calendar

    Calendário mensal para seleção de datas. Suporta modos single, multiple e range.

    July 2026
    import { Calendar } from '@ghiberti85/ui'

    DatePicker

    Seletor de data em popover baseado no Calendar. Suporta data única e intervalo de datas.

    import { DatePicker } from '@ghiberti85/ui'

    Timeline

    Lista cronológica vertical de eventos com variantes e ícones personalizados.

    1. Project started

    2. Beta launched

    3. v1.0 released

    import { Timeline } from '@ghiberti85/ui'

    Slider

    Input deslizante com marcas opcionais, mínimo/máximo e controle de passo.

    import { Slider } from '@ghiberti85/ui'

    Chip

    Etiqueta compacta com botão de remoção opcional, ícone e variantes de cor.

    ReactTypeScriptActiveDraft
    import { Chip } from '@ghiberti85/ui'

    Rating

    Avaliação por estrelas clicáveis com modo somente leitura e máximo configurável.

    import { Rating } from '@ghiberti85/ui'

    Stepper

    Indicador de progresso multi-etapas com estados pendente, ativo, concluído e erro.

    1. Account
    2. Profile
    3. Done
    import { Stepper } from '@ghiberti85/ui'

    DataTable

    Componente de tabela com ordenação e busca, definições de colunas e renderização flexível.

    NameRole
    AliceEngineer
    BobDesigner
    import { DataTable } from '@ghiberti85/ui'

    ChatMessage

    Componentes de bolha de chat para mensagens de usuário, assistente e sistema com timestamps e avatares.

    Hello!
    Hi there!
    import { ChatMessage } from '@ghiberti85/ui'

    StreamingText

    Anima texto caractere a caractere com cursor piscante, simulando saída de streaming de LLM.

    Streaming text animation...
    import { StreamingText } from '@ghiberti85/ui'

    EmptyState

    Placeholder para dados zerados com ícone, título, descrição e botão de ação opcional. Inclui 4 variantes semânticas.

    No results found

    Try adjusting your search terms.

    import { EmptyState } from '@ghiberti85/ui'

    Componentes de Layout

    Stack

    Contêiner flex para compor layouts verticais e horizontais com controle de espaçamento.

    Stack vertical (gap 3)
    Item 1Item 2Item 3
    Stack horizontal (gap 4)
    Item 1Item 2Item 3
    import { Stack } from '@ghiberti85/ui'

    Container

    Wrapper centralizado com largura máxima. Tamanhos disponíveis: sm, md, lg, xl, full.

    Container sm — máx. 640 px

    Container md — máx. 768 px

    Container lg — máx. 1024 px

    import { Container } from '@ghiberti85/ui'

    Breadcrumb

    Trilha de navegação semântica com suporte a separadores personalizados, reticências e aria-current na página ativa.

    import { Breadcrumb, … } from '@ghiberti85/ui'

    Pagination

    Controle de navegação por páginas com reticências para grandes intervalos. Suporta contagem de irmãos, botões de primeiro/último e aria-current.

    import { Pagination } from '@ghiberti85/ui'

    ScrollArea

    Contêiner rolável com estilo personalizado baseado no Radix UI, com scrollbar temática e suporte a eixos vertical, horizontal ou ambos.

    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Item 7
    Item 8
    Item 9
    Item 10
    Item 11
    Item 12
    Item 13
    Item 14
    Item 15
    import { ScrollArea } from '@ghiberti85/ui'
    Ghiberti UI — Design System