Skip to content
Extensões

Componentes

O Arenito possui 68 componentes organizados em 6 categorias.

Categorias

Entrada

Campos de formulário e controles de entrada.

ComponenteCSSJSDescrição
Buttonbutton.css-Botões com 9 variantes e 4 tamanhos
Inputinput.css-Campos de texto, email, password, number
Selectselect.css-Select single, multiple, searchable
Checkboxcheckbox.css-Checkbox com indeterminate
Radioradio.css-Radio buttons e groups
Switchswitch.css-Toggle on/off
Textareatextarea.css-Textarea resizable e auto-grow
Input Searchinput-search.cssinput-search.jsAutocomplete com debounce
Input Dateinput-date.css-Date/datetime/time (Flatpickr)
Input Date Rangeinput-date-range.css-Período com dois calendários
Input Taginput-tag.css-Seleção múltipla de tags

Layout

Estrutura de formulários e páginas.

ComponenteDescrição
FormGrid de formulário 12 colunas
FieldsetAgrupamento de campos
Form SearchFormulário de pesquisa JSON-driven
ListarLayout de listagem com sidebar
CardCards com variantes dark, hover, shadow
Card GridGrid responsivo de cards
Info CardCards de informação com seções

Feedback

Componentes de retorno visual ao usuário.

ComponenteDescrição
AlertAlertas info, success, warning, error
ToastNotificações flutuantes auto-dismiss
BadgeBadges com 9 variantes
StatusPills de status ativo/inativo
Tooltip7 estilos, 4 posições, auto-positioning
LoaderSpinner e relógio animado
SkeletonPlaceholder de carregamento
ProgressBarra de progresso linear e circular

Componentes de navegação e orientação.

ComponenteDescrição
NavbarBarra de navegação com 4 variantes
SidebarMenu lateral com modos docked, overlay, mini
Breadcrumb6 tipos de separador, colapsável
TabsUnderline, contained, pills, vertical
AccordionSimples, múltiplo, ghost, bordered
DropdownMenu, split button, aninhado
PaginationPadrão, compacto, outline
AvatarIniciais, imagem, com status
StepperWizard multi-step com validação

Overlay

Modais, drawers e painéis sobrepostos.

ComponenteDescrição
Modal5 tamanhos, backdrop blur, focus trap
Modal AlertModais de confirmação/alerta
DrawerPainel lateral deslizante

Dados

Exibição e manipulação de dados.

ComponenteDescrição
TableSticky header, sorting, selection
DetailLayout de detalhamento com tabs
ResumoExibição read-only com validação
FilterSistema de filtros com presets

Design System interno do GALES