unslop/ui Componentes

Componentes

Tudo o que o unslop/ui traz de base, com preview vivo. Clique em copiar HTML e cole na sua página: só precisa de unslop.css e unslop.js.

Botão

Primário em tinta, secundário com contorno, ghost, acento e ícone, em três tamanhos.

Campos e busca

Input, campo com rótulo e busca com atalho de teclado.

Select

Abre com Enter, Espaço ou setas. Setas navegam, Enter escolhe, Esc fecha.

Seletor de período

Setas trocam a semana e emitem o evento u:change. Use mode: "month" para meses.

Segmented control

O indicador desliza até a opção ativa. Setas do teclado alternam.

Checkbox, radio e switch

Marcado, vazio e indeterminado, com animação de check em mola.

Slider com marcas

Arraste ou use as setas, Home e End. Encaixa nas marcas.

Badge e delta

Estados e variação percentual.

EntregueEm rotaFalha na entregaEm análiseNeutro +14,8%-3,2%

Avatar

Inicial em seis cores de série e grupo sobreposto.

ACL ACL+4

Card, panel e tile

Três camadas: casca, miolo e azulejo.

Receita recorrente
R$ 48.300 +14,8%
1.240
Contas ativas
62 dias
Sem incidentes

Resumo mensal

Casca, miolo e azulejo, sem sombra pesada.

Tooltip

Atributo data-tip, aparece no hover e no foco.

Tabela de dados

Filtros, busca, seleção, ordenação por coluna e paginação funcionando.

Sidebar de navegação

Usuário, busca rápida, item ativo com contador e rodapé com equipe.

Lista de tarefas

Progresso em tempo real, itens riscados e spinner no que está em andamento. Clique num item para alternar.

2 etapas restantes
  • Ler a configuração do projeto
  • Gerar os tokens do tema claro
  • Gerar os tokens do tema escuro
  • Publicar o pacote de componentes
  • Rodar testes e build

Seletor de modelos

Radio com nomes genéricos e slider de esforço.

Modelos
EsforçoMédio

Alertas

Cards de alerta com ícone em círculo e data.

Alertas de produção
12 esta semana
12 de jun.

Latência acima de 800 ms no checkout

O p95 da rota de pagamento passou de 800 ms por 10 minutos a partir das 8h59, na região de São Paulo.

9 de jun.

Certificado expira em 9 dias

O certificado do domínio da API vence em 18 de junho. Renove antes para evitar queda no acesso.

6 de jun.

Fila de e-mails acumulada

Há 1.180 mensagens aguardando envio, o triplo da média das últimas quatro semanas.

Perfil de conta

Avatar com ação, nome e lista de campos com ícone.

L
Luiza Prado
PlanoEquipe
RegiãoSão Paulo
Cliente desde3 de fev. de 2024
ResponsávelCaio Mendes

Deploys por dia

Barras que crescem ao entrar e trocam de dados com o período.

Deploys
148 nesta semana

Saúde do build

Anel segmentado com contagem e legenda que destaca o trecho.

Saúde do build
Estável.
Testes: 1.180 passando
Lint: nenhum aviso novo
Tipos: 2 pendências

Controles

Segmented, checkboxes e switches juntos.

Mini calendário

Clique em dois dias para marcar o intervalo e use Aplicar.