Pular para o conteúdo
04 · UI Components

Biblioteca de componentes

Índice completo dos componentes previstos, com variantes e estados. Cada item segue a mesma anatomia (ver Documentação → Estrutura) e cobre os estados interativos canônicos: Normal · Hover · Focus · Active/Pressed · Selected · Disabled · Loading · Error · Success · Warning · Info · Visited.

// Botões

Ações primárias e secundárias em todos os estados.

Button

Ver demo Pronto
VariantesPrimarySecondaryGhostOutlinedLinkFABIcon Button
EstadosNormalHoverActiveDisabledLoadingFocus

// Inputs & Forms

Campos de formulário com validação e máscaras BR.

Input

Ver demo Pronto
VariantesTextEmailPasswordTextareaNumberDateSearchPhoneCPFCEPSelectAutocomplete
EstadosNormalHoverFocusErrorDisabledReadonlySuccess

Checkbox

Ver demo Pronto
EstadosNormalHoverFocusActive/PressedSelectedDisabledLoadingErrorSuccessWarningInfoVisited

Radio Button

Ver demo Pronto
EstadosNormalHoverFocusActive/PressedSelectedDisabledLoadingErrorSuccessWarningInfoVisited

Switch

Ver demo Pronto
EstadosNormalHoverFocusActive/PressedSelectedDisabledLoadingErrorSuccessWarningInfoVisited

Slider

Ver demo Pronto
EstadosNormalHoverFocusDisabled

Rating

Ver demo Pronto
EstadosNormalHoverSelectedReadonly

Toggle

Ver demo Pronto
EstadosNormalHoverFocusActive/PressedSelectedDisabledLoadingErrorSuccessWarningInfoVisited

// Data Display

Chips, tags, badges, tabelas e navegação de dados.

Chips

Ver demo Pronto

Tags

Ver demo Pronto

Badges

Ver demo Pronto

Pagination

Ver demo Pronto

Breadcrumb

Ver demo Pronto

Tabs

Ver demo Pronto

Accordion

Ver demo Pronto

Cards

Pronto
ExemplosProdutoEquipeNotíciaServiçoBlogCases

// Overlays

Camadas flutuantes: modais, drawers e menus.

Modals

Ver demo Pronto

Drawers

Ver demo Pronto

Popover

Ver demo Pronto

Tooltip

Ver demo Pronto

Dropdown

Ver demo Pronto

Context Menu

Ver demo Pronto

Estruturas de navegação e seções de página.

Navbar

Pronto
VariantesDesktopTabletMobileStickyTransparent

Sidebar

Pronto

Footer

Pronto

Hero Section

Pronto

CTA Sections

Ver demo Pronto

Pricing Cards

Ver demo Pronto

FAQ

Ver demo Pronto

Testimonials

Ver demo Pronto

Timeline

Ver demo Pronto

Statistics

Ver demo Pronto

Logos Grid

Ver demo Pronto

Partners

Ver demo Pronto

Team

Ver demo Pronto

Blog Cards

Pronto

Newsletter

Ver demo Pronto

Contact Form

Pronto

// Feedback

Comunicação de estado do sistema ao usuário.

Alert

Ver demo Pronto

Toast

Ver demo Pronto

Snackbar

Ver demo Pronto

Progress

Ver demo Pronto

Loading

Ver demo Pronto

Skeleton

Ver demo Pronto

Empty State

Ver demo Pronto

404

Ver demo Pronto

500

Ver demo Pronto

Offline

Ver demo Pronto

// Utilitários

Peças de apoio que completam a biblioteca.

Avatar

Pronto

Kbd (tecla)

Pronto

Callout

Pronto

Divider

Pronto

Spinner

Pronto

Skip Link

Pronto