Enterprise-grade design system and component library for LEMA-UFPB
Sheet lateral para navegação mobile com accordion, brand header e footer de CTAs.
Navegação horizontal baseada em NavigationMenu com suporte a dropdown, mega custom content, badge e estados active.
An expandable search button for use in page headers with smooth transition animations.
Bloco minimal SaaS: brand + nav desktop + search + actions + mobile drawer.
Barra utilitária acima do header com email, telefone, socials e locale selector.
Header overlay hero que vira blurred ao scroll com threshold configurável.
Avatar com DropdownMenu, badge de notificações e grupos de ações para header.
HeaderSimple empilhado com Topbar e Announcement — padrão blockus com contato/social.
A responsive heatmap chart built with pure CSS grid and color-mix for smooth color interpolation.
Hero centralizado com badge de anúncio e mural de logos em marquee — composto de ds-hero-section, ds-announcement-badge e ds-marquee.
Hero centralizado seguido de um grid bento — composto de ds-hero-section e ds-bento-grid.
Hero centralizado com título que alterna palavras — composto de ds-hero-section e ds-text-rotator.
Hero com glow radial superior e grid sutil — inspirado em Launch UI Hero Top Glow.
Hero com screenshots em camadas sobrepostas (Layers) — inspirado em Launch UI Hero Layers.
Shell de layout de seção Hero composível em subcomponentes atômicos com alinhamentos center, left e split.
Hero centralizado seguido de tira de estatísticas — composto de ds-hero-section e ds-card-stat.
Hero split com preview de terminal/navegador — composto de ds-hero-section, ds-background-glow e ds-browser-mockup.
Hero centralizado com thumbnail de vídeo em diálogo — composto de ds-hero-section e ds-video-dialog.
Hero centralizado com captura de e-mail — composto de ds-hero-section e ds-waitlist-form.
A popover card that appears when hovering over a trigger element.
Seção explicativa em passos numerados com variante horizontal/vertical.
Timeline vertical com linha conectora — blockus #03 #10 #17.
An icon-only button with optional tooltip, loading state, size and rounded variants built on the Button and Tooltip primitives.
Crop com drag e zoom slider — adaptado Kibo.
Galeria de imagens flexível — grid, masonry ou linha com scroll-snap — com legenda/overlay opcional por item.
Zoom hover lens — adaptado Kibo.
Edição in-place com click-to-edit, estados de salvamento e validação inline.
A fundamental form text input element styling standard inputs such as text, passwords, emails, numbers, search bars, and files.
An email input field with a built-in mail icon and customizable size and radius variants.
An integrated form row that groups related inputs, text labels, prefix/suffix icons, keyboard shortcuts, and button actions.
A one-time password input with individual slot groups and separators.
A secure password input field with a toggle visibility button and custom size/radius options.
Extended input with icon prefix/suffix, clearable button, character counter with maxLength, loading spinner, i18n labels, and error state.
Grid de integrações com busca — blockus #01-12.
Parede de logos em marquee infinita — blockus #13-24.
Tile de integração com logo e status — átomo base integrations.
A list item component with media, content, title, description, actions, and size variants.
Kanban board com drag-and-drop real (@dnd-kit) — reordena e move cards entre colunas por ponteiro ou teclado.
A keyboard key indicator for displaying keyboard shortcuts.
A form label element built on Radix UI Label primitive.
Visualizador de imagem em tela cheia com navegação anterior/próxima, setas do teclado e tira de miniaturas.
A responsive line chart with plain lines, gradient area fills, stacked areas, reference lines, and brush zoom.
Bloco completo de formulário de login pronto para produção integrando social login, credenciais e passkey.
Mural de logos centralizado dentro de um card com glow que reage ao ponteiro — composto de ds-press-wall e ds-cursor-spotlight.
Mural de logos com filtro de indústria/categoria — composto de ds-press-wall e ds-pill-group.
Pares de logo do cliente + depoimento curto em grid de cartões — composto de ds-pull-quote.
Estatística em destaque acima de um mural de logos — composto de ds-press-wall.
Formulário de autenticação sem senha (magic link) com confirmação e temporizador de reenvio.