Biblioteca React
Componentes
Explore os 70 componentes públicos, abra exemplos reais e teste cada interação.
70 componentes encontrados
Visão geral do Design SystemFundamentos
3 componentes
Entradas
15 componentes
Field
InterativoAgrupa label, descrição, controle e mensagem de erro acessível.
Input
InterativoEntrada textual consistente para formulários e filtros.
Textarea
InterativoEntrada de texto multilinha com estados semânticos.
Select
InterativoSeleção nativa estilizada para opções simples.
Checkbox
InterativoSeleção booleana com label, descrição e estado parcial.
RadioGroup
InterativoEscolha única entre opções mutuamente exclusivas.
Switch
InterativoAtiva ou desativa uma configuração imediatamente.
Slider
InterativoSeleciona valor único ou intervalo em uma escala.
Combobox
InterativoBusca e seleciona opções em listas extensas.
DatePicker
InterativoSeleciona uma data em popover com calendário acessível.
InputOTP
InterativoEntrada segmentada para códigos de autenticação.
InputGroup
InterativoCombina entrada, prefixos, sufixos e ações em um único controle.
Label
InterativoRótulo acessível e consistente para controles de formulário.
NativeSelect
InterativoSelect HTML nativo estilizado, ideal para formulários simples e mobile.
SelectMenu
InterativoSeletor composto para opções ricas com estado controlado.
Ações
8 componentes
Button
InterativoAção principal com variantes, tamanhos e estado de carregamento.
Toggle
InterativoControle pressionável para preferências binárias.
ToggleGroup
InterativoAgrupa toggles relacionados em uma escolha visual.
DropdownMenu
InterativoMenu de ações associado a um botão disparador.
ContextMenu
InterativoAções contextuais abertas com botão direito ou toque longo.
CommandPalette
InterativoBusca rápida de comandos e navegação por teclado.
ButtonGroup
InterativoAgrupa ações relacionadas sem duplicar bordas ou espaçamento.
Menubar
InterativoBarra de menus para comandos densos em aplicações desktop-like.
Feedback
9 componentes
Alert
Mensagem persistente de informação, sucesso, aviso ou erro.
Badge
Rótulo compacto para status, categorias e metadados.
Toast
InterativoFeedback temporário disparado após uma ação.
Progress
Comunica progresso mensurável de uma operação.
Spinner
Indica espera breve quando não há progresso mensurável.
Skeleton
Reserva a estrutura do conteúdo durante carregamento.
EmptyState
InterativoExplica ausência de dados e oferece o próximo passo.
Tooltip
InterativoDescrição curta para controles compactos ou somente ícone.
Marker
Indicador visual compacto para estado, presença e legenda.
Estrutura
17 componentes
Card
Agrupa conteúdo e ações semanticamente relacionadas.
Tabs
InterativoAlterna painéis relacionados sem navegar para outra página.
Accordion
InterativoExpande e recolhe blocos de conteúdo vertical.
Breadcrumb
InterativoMostra localização e hierarquia dentro da aplicação.
Pagination
InterativoNavega por conjuntos extensos de resultados.
Sidebar
InterativoNavegação principal recolhível para aplicações operacionais.
ScrollArea
InterativoÁrea com rolagem controlada e visual consistente.
Chat
InterativoPrimitivos para conversas com mensagens ricas, anexos e composer.
AspectRatio
Preserva proporções de imagens, vídeos e previews responsivos.
Bubble
Balão de mensagem reutilizável para usuário, assistente e sistema.
Carousel
InterativoNavegação acessível por uma sequência responsiva de conteúdos.
Collapsible
InterativoExibe ou oculta uma região preservando contexto e acessibilidade.
Item
InterativoLinha composta para listas com mídia, conteúdo e ações.
MessageScroller
InterativoRegião rolável e anunciável para fluxos de mensagens.
NavigationMenu
InterativoNavegação principal com links, painéis ricos e estado ativo.
Resizable
InterativoPainéis redimensionáveis por ponteiro ou teclado.
Separator
Divisor visual horizontal ou vertical, sem ruído semântico.
Dados
12 componentes
Table
Estrutura semântica para dados tabulares simples.
DataTable
InterativoTabela operacional com busca, ordenação e paginação.
Calendar
InterativoVisualização mensal e seleção acessível de datas.
BarChart
InterativoGráfico de barras acessível com tooltip por categoria.
HorizontalBarChart
InterativoBarras horizontais interativas para rankings e comparação.
LineChart
InterativoLinha temporal com crosshair e tooltip para cada ponto.
AreaChart
InterativoÁrea interativa para destacar volume e tendência acumulada.
PieChart
InterativoDistribuição proporcional com destaque e tooltip por segmento.
DonutChart
InterativoComposição circular interativa com total e legenda.
Sparkline
InterativoTendência compacta com inspeção de cada ponto.
Avatar
Representa pessoas com imagem ou iniciais de fallback.
Attachment
InterativoRepresenta arquivos anexados com metadados e ação de remoção.
Overlays
6 componentes
Dialog
InterativoTarefa focada que bloqueia temporariamente o conteúdo de fundo.
AlertDialog
InterativoConfirma uma ação crítica ou irreversível.
Drawer
InterativoPainel lateral para edição ou criação contextual.
Popover
InterativoConteúdo complementar ancorado a um controle.
HoverCard
InterativoPreview rico revelado por hover ou foco de teclado.
Sheet
InterativoPainel modal lateral para tarefas contextuais extensas.