Showcase de UX

Skeleton Loading

Componentes de carregamento com animação shimmer

Skeletons Básicos

Componentes fundamentais para estados de carregamento

Shimmer Base

Texto (3 linhas)

Avatares

Cards de Conteúdo

Skeletons para cards com diferentes layouts

Com Imagem

Com Avatar

Stats

Chat e Mensagens

Skeletons para interfaces de chat

Formulários e Tabelas

Skeletons para inputs, botões e tabelas

Inputs

Tabela

Validação em tempo real com feedback visual animado

Formulário de Exemplo

Digite nos campos para ver a validação em tempo real

Nome Completo

Mínimo de 3 caracteres

CPF

Digite apenas números

Número OAB (Opcional)

Formato: UF + número (ex: SP123456)

Mensagem

Mínimo de 10 caracteres

0/500

Status do formulário: Incompleto

Botões com estados de loading, sucesso e erro

LoadingButton

Clique nos botões para ver as transições de estado

Skeletons para páginas completas

Dashboard

Chat