Todos os Componentes 85
Biblioteca completa de componentes UI para construir interfaces modernas e acessíveis.
Ações
9 componentes Clique para girar
Swap
Alternância animada entre dois estados.
Agente Interativo Flutuante (no canto inferior)
0 Dúvidas?
Floating Agent
Agente flutuante interativo com painel de chat e discagem rápida (FAB Dial).
Mantenha pressionado para confirmar a ação.
Hold to Confirm
Confirma ações sensíveis após manter o controle pressionado.
Pedido #1042 Deslize para revelar ações
Swipe Actions
Revela ações contextuais por gesto, com alternativa explícita por teclado.
Exibição de Dados
23 componentesO que este componente faz?
Organiza conteúdo em painéis expansíveis usando HTML nativo.
Precisa de JavaScript?
Não. A abertura e o fechamento são controlados por
details.
Accordion
Painéis expansíveis para organizar conteúdo.
Tamanhos (Sizes)
XS
SM
MD
LG
XL
Formatos (Shapes)
Indicadores de Presença (Status)
Bordas Decorativas (Rings)
Grupo de Avatares (Avatar Group)
+99
Avatar
Representação visual de usuários ou entidades.
Primary Secondary Outline
Badge
Indicadores e etiquetas pequenas.
Card Padrão
Um card simples com título e conteúdo padrão.
Card Interativo
Este card possui a propriedade "hover" e atua como um link interativo (a tag).
Card com Imagem
Card renderizando uma figura (figure) na parte superior através da prop "image".
Card sem Borda
Design limpo sem as bordas externas. Ideal para painéis de dashboard (bordered=false).
Card Compacto
Os paddings e o tamanho da fonte são reduzidos neste card para interfaces mais densas (compact).
Card com Ações
Card com o slot "actions" preenchido com botões no rodapé.
Nenhum item encontrado.
Card
Container flexível para agrupar conteúdo.
Card 1
Card 2
Card 3
Card Grid
Grid responsivo para exibir múltiplos cards.
Hello!
Hi there!
Chat Bubble
Balões de mensagem para interfaces de chat.
Click to open/close
This content is toggled with a native details element.
This collapse uses a hidden checkbox and transitions on max-height.
Focus collapse
Click the title (or focus it) to reveal this content.
Collapse
Conteúdo expansível com animação.
Valmor
Valmor
Diff
Comparação visual lado a lado.
xs sm md lg xl
Ctrl + C
Kbd
Representação de teclas do teclado.
- Ativa
- Away
List
Lista vertical de itens.
Total Page Views
89,400
21% more than last month
Downloads
31K
Jan 1st - Feb 1st
Account balance
$89,400
Stat
Exibição de estatísticas e métricas.
Online Away
Status
Indicador de status com cores.
meu_desenho_zeus.png
Asset Card
Card especializado para exibição de ativos digitais, cursos ou produtos da loja.
TokensFigma
RatingInput
StackLayout
Explorer
Componente interativo para navegar em coleções de itens ou documentação.
#9999 28 de jul. de 2026
Pendente Order Card
Card de resumo e gerenciamento de pedidos da loja.
CoolAwesomeGreat
Text Rotate
Texto rotativo animado.
- Pedido confirmado
- Em separação
- A caminho
Timeline
Linha do tempo para eventos.
Entrada de Dados
19 componentes Junho 2026
DSTQQSS
31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
Calendar
Seletor de data em formato calendário.
This field is required
Textarea
Área de texto multilinha.
Contexto da criação
Tag Input
Campo para criar e remover tags com feedback de movimento.
Password strength: Strong
Validator
Validação visual de campos.
Será salvo automaticamente ao sair do campo
Auto-Save Input
Campo de entrada de texto com salvamento automático assíncrono.
VN
JPG, PNG ou WebP. Máximo 2MB.
Avatar Upload
Área de upload de avatar com suporte a arrastar-e-soltar e pré-visualização.
Arraste arquivos aqui ou
Apenas imagens ou PDFs. Máximo 10MB.
File Upload
Gerenciador de upload de múltiplos arquivos com lista de status.
Feedback
8 componentes Info message
Success!
Alert
Mensagens de alerta e notificação.
Nova mensagem
Toast
Notificação temporária.
Carrinho de Compras (Botão Flutuante)
Cart Drawer
Carrinho de compras flutuante com gaveta deslizante lateral.
Layout
13 componentesTop
OR
Bottom
Divider
Separador visual horizontal ou vertical.
Banner Principal
Subtítulo descritivo do Hero
Hero
Banner principal de destaque com títulos, chamada para ação e suporte a parallax.
novo
conteúdo
Indicator
Posiciona indicadores em elementos.
Header
Description
Page Header
Cabeçalho estruturado com suporte a títulos, ações e trilhas.
Configurações da Conta
Conteúdo do perfil aqui...
Profile Section
Layout unificado para exibição e gerenciamento do perfil do usuário.
valmor.net.br
Valmor Nascimento | Engenheiro
Engenheiro Eletricista e Naval. Desenvolvedor de soluções em eletrônica de potência e embarcados.
SEO Metadata
Gerenciador estruturado de tags SEO e metadados Open Graph.
1. Título simples (Padrão)
Design System
2. Eyebrow + Título + Ação (Ver todos)
Últimos lançamentos
Nossos Produtos
3. Título + Texto de Apoio (Lead)
Documentação de Estilos
Explore os tokens de design, layouts responsivos e animações baseados em CSS moderno.
4. Variante Completa: Eyebrow + Título + Lead + Toolbar Host (Explorer)
Laboratório de Eletrônica
Experimentos Práticos
Dimensionamento de amplificadores diferenciais, acoplamento AC/DC e simulação spice.
5. Customização de Heading Level (h3)
Subseção Interna
Section Header
Cabeçalho de seção estruturado com suporte a títulos, ações, eyebrow, lead e data-card-view-toolbar.
Mockups
4 componentesBrowser content
Browser Mockup
Moldura de navegador para screenshots.
npm installCode Mockup
Bloco de código estilizado.
App content
Phone Mockup
Moldura de smartphone.
Window content
Window Mockup
Moldura de janela de sistema.
Nenhum componente encontrado para .