@lema-ds

A vertically stacked set of interactive headings that each reveal a section of content.

A contextual notification banner for displaying feedback messages with title, description, and optional action.

A modal dialog that interrupts users with urgent information, actions, or confirmation prompts.

A wrapper that maintains a consistent aspect ratio for its child content.

A file attachment component with support for media preview, title, description, actions, trigger overlay, and group layout. Composed of AttachmentGroup, Attach…

An image element representing a user or entity, with a fallback display for when the image fails to load.

A small visual indicator for categorization, counts, or status labels.

A navigation aid showing the user's location in a hierarchical page structure with separators and ellipsis.

A chat bubble component with support for sent/received variants, tail indicators, and group layout. Composed of BubbleGroup sub-component.

An interactive button control used to trigger actions, submit forms, or navigate.

A container that groups related buttons or inputs with connected or separated styling.

A date picker with day selection, range support, and dropdown navigation.

A versatile card container with sub-components for header, title, action buttons, descriptions, body content, and footer actions.

Shared utilities, CVA variants, and helper components (TrendBadge, CardStatEmptySlot) for the card-stat family.

A sliding carousel for cycling through elements with previous/next navigation using Embla.

A charting container with config-driven tooltips, legends, and CSS variable styling integration for Recharts.

Canvas-based text measurement that sizes a numeric Recharts axis to fit its actual formatted tick labels (currency, abbreviated units), instead of a fixed gues…

A form control for selecting one or more options from a set.

An expandable/collapsible section with trigger and content regions.

An autocomplete combobox built on @base-ui/react with search, groups, multi-select chips, and keyboard navigation.

A fast, searchable command palette and menu list interface driven by keyboard navigation.

A right-click context menu with items, submenus, checkboxes, radio items, and separators.

A modal overlay that interrupts the user with critical information or requires direct interaction.

A provider component for setting text direction (LTR/RTL) using Radix UI Direction.

A slide-over panel built on vaul, supporting bottom, left, right, and top directions with drag-to-dismiss gestures.

A popover style menu listing choices or operations that is triggered by a button control.

Hero imersivo de manifesto institucional combinando declaração tipográfica, métricas e CTAs.

Bloco turnkey da trajetória histórica com cabeçalho de seção e MilestoneStepper.

Bloco composto de página 'Sobre' — história + citação do fundador + tira de estatísticas + grid de equipe — construído a partir dos átomos ds-hero-section, ds-…

Seção turnkey de história institucional em 2 colunas com badge, fotografia e métrica flutuante.

Bloco turnkey completo de apresentação de valores e pilares com grid responsivo de ValuesCard.

Extended accordion with icon style variants (chevron/plus/arrow/sign), size variants, rounded/bordered CVA, discriminated single/multiple types with collapsibl…

Feed cronológico de eventos e trilha de auditoria com avatar, badge de status e timestamp relativo.

Chat assistente — ReUI AI Chat 12.

Contador numérico animado com formatação por locale e fallback sr-only para leitores de tela.

Badge ou pill de anúncio para o topo de seções hero com micro-animação e suporte a ping.

Sidebar completa com TeamSwitcher, Search, NavMain colapsável, Projects, NavUser e Rail — compõe sidebar shadcn 07 + 16.

Botões de download para App Store e Google Play, com ícone e texto sobrescrevíveis.

Full-featured audio player using native HTML5 Audio API.

Fundo aurora com gradientes animados, grid sutil e máscara radial — inspirado em Aceternity Aurora + Sparkles + Wavy.

Shell de autenticação unificado com variantes centered/muted/split/cover — consolida shadcn login-01..05 e signup-01..05.

Divisor estilizado com rótulo centralizado para transição entre autenticação social e credenciais tradicionais.

Shell de layout de tela dividida (split-screen) completo com vitrine da marca, depoimento e estatísticas.

Busca autocomplete async — ReUI Autocomplete.

Extended avatar with size scale (sm through 2xl), status indicator dots, initials color generator, image loading status callback, delay fallback, avatar group …

Indicador de presença em tempo real para avatar com anel de isolamento temático e animação de pulso.

Ambientação luminosa e texturas de fundo em CSS puro (Aurora, Spotlight, Beam e Grid-dots) para seções Hero.

Extended badge with dot indicator, removable close icon, icon support, counter/overflow display, and semantic color variants (success/warning).

Faixa full-width dismissível com intent, variante, posição e CTAs. Base blockus banners.

Download de app com ícone, rating e store badges — blockus #14-17.

Barra de consentimento cookies fixed bottom/floating — blockus #09-12.

Faixa com rolagem infinita horizontal para highlights — blockus banner #13.

Card promo centrado com gradiente/imagem e 1-2 CTAs — blockus #05-08.

Bloco topo sticky com badge, título e CTA — blockus banners #01-04.

A fully featured bar chart with tooltips, legend, stacking, rounded corners, and brush zoom.

Grid bento misturando tiles de feature com ícone e tiles de estatística — composto de ds-bento-grid e ds-card-stat.

Grid assimétrico com spans configuráveis para tiles de feature/mídia.

Grid bento combinando um gráfico de barras com uma tira de estatísticas — composto de ds-bento-grid, ds-bar-chart e ds-card-stat.

Grid bento exibindo screenshot de produto, preview de terminal e snippet de instalação — composto de ds-bento-grid, ds-floating-card, ds-browser-mockup e ds-co…

Grid bento misturando tiles de depoimento com um mural de logos — composto de ds-bento-grid, ds-pull-quote e ds-press-wall.

Card de plano e fatura — ReUI Billing.

Avatar + nome + role do autor para blog.

Card de post com imagem, categoria, título, excerpt, tags e autor — átomo base blog.

Hero featured grande + 2 cards laterais — blockus #15-22.

Grid responsivo 3 cols com filtros categoria + busca — blockus blog #01-07.

Lista horizontal imagem à esquerda — blockus #08-12.

Linha de metadados: data, reading time e categoria.

Brilho que percorre a borda do container pai via offset-path (correto em qualquer proporção), em CSS puro — oculto em prefers-reduced-motion.

A fully custom SVG box-and-whisker chart with ResizeObserver for responsive layout, notch support, and outlier plotting.

A data-driven breadcrumbs component.

Moldura simulando janela de navegador ou terminal de sistema operacional para screenshots e previews.

Compact bullet chart with qualitative range bands, value bar, and target marker.

Feature-rich button with loading state, start/end icons, rounded variant (full/lg/md/none), fullWidth, double-click debounce, two-step destructive confirmation…

A highlighted alert component.

A financial candlestick chart with volume bars, moving averages, reference lines, and brush zoom.

Feature / navigation card with a tinted icon medallion, title and description. Icon colour and background derive from a single semantic tone token. Supports so…

A statistical display card with label, value, trend indicator, optional icon, and loading skeleton.

A compact statistical card with trend badge, description, icon, and loading skeleton.

A side-by-side comparison card for current vs. previous period values with trend indicators.

A statistical card with a gauge visualization for showing metrics within a target range.

A statistical card with a segmented heatbar visualization for multi-zone metric display.

A high-emphasis statistical card with a colored background for key metric prominence.

A statistical card containing a list of labeled items with icons and trend indicators.

A statistical card with an embedded progress bar for showing completion or attainment levels.

A statistical card with an inline sparkline chart for visual trend representation.

A portfolio of all statistical display cards: CardStat, CardStatCompact, CardStatProgress, CardStatComparison, CardStatSparkline, CardStatHighlight, CardStatLi…

Extended carousel with autoplay support via embla-carousel-autoplay, multiple nav variants (side/overlay/bottom/none), card/showcase/minimal display modes, dot…

Seleção em cascata níveis — ReUI Cascader.

Visualização estruturada de release notes com categorização semântica e timeline de versões.

Resumo de pedido — ReUI Checkout.

A color picker input.

A batteries-included combobox with virtual scrolling, search, single/multi-select, groups, custom option rendering, and configurable popover positioning (side/…

A high-level command palette modal triggered by keyboard shortcuts.

Slider de comparação antes/depois com clip-path, arrastável ou via teclado (range input nativo).

Before/after slider — adaptado Kibo.

Confetti animation with 4 presets. Also exports useConfetti hook.

Diálogo de confirmação com typed confirmation para ações irreversíveis de alto risco.

Grid bento com o formulário de contato como tile principal e tiles satélite — composto de ds-bento-grid e ds-contact-form.

Linha de cartões de canal de contato (e-mail, telefone, chat) — composto de ds-card-icon.

Formulário de contato (nome, e-mail, assunto, tópico e mensagem) com estados idle/submitting/success/error.

Seção de contato split com formulário de um lado e um slot flexível do outro — composto de ds-hero-section e ds-contact-form.

Graph estilo GitHub 7x20 — adaptado Kibo.

Exibe um trecho de texto ou código com um botão acoplado para cópia rápida.

A precision numeric input with button controls, direct keyboard entry support, and inputProps passthrough for native HTML attributes.

Card visual com gradient e brand — adaptado Kibo.

Visual cron expression builder with simple and advanced modes.

Container CTA core com badge, título, descrição e ações — átomo base CTA.

CTA centrado editorial — blockus CTA #01-08.

CTA com captura email inline — blockus #17-24.

CTA split imagem + conteúdo — blockus #09-16.

Mosaico e grade fotográfica da cultura institucional e equipe em ação.

Cursor remoto com label para collab — adaptado Kibo.

Glow radial que segue o cursor do ponteiro, com fallback estático em prefers-reduced-motion.

Shell de dashboard com AppSidebar, Header, SectionCards, Chart e DataTable — replica shadcn dashboard-01.

A base layout for complex dashboards with sidebar and header.

A structured dashboard card with collapse/expand, fullscreen, refresh, loading skeleton, status badge, and configurable body padding.

Responsive layout container for dashboard panels with resizable split ratios and N-child support.

A high-performance virtualized data table with built-in toolbar, pagination, and sorting capabilities.

Seletor de data combinando um botão e um calendário (Popover).

Seleção intuitiva de intervalos de datas com presets e suporte aos 4 locales.

Swipe deck de cards — adaptado Kibo.

A description list component.

Line-level diff viewer with unified and split modes. No external dependencies.

A full-featured drawer wrapper with optional header, scrollable body, footer, direction-aware close button, snap points, scale background, and escape/pointer-d…

Dynamic island notification component.

Contextual empty states with built-in SVG icons for no-data, search, error, and no-results scenarios, i18n titles, action button, compact mode, and skeleton lo…

Estado vazio acionável com ação principal, atalhos e sugestões para zero-data e onboarding.

Empty state with 8 animated SVG illustrations for common UI contexts.

Calendário mensal com eventos — ReUI Event Calendar 6.

Fade mask com variantes x/y/top/bottom/left/right — inspirado em Launch UI Fade.

Seção FAQ core com heading, accordion, busca opcional.

FAQs com card suporte lateral — blockus #14 #19.

FAQs agrupadas por abas — blockus #03 #07.

Destaque ancorado para apresentar novas funcionalidades e guias passo a passo.

Seção feature com texto e mockup sticky (left/right) — inspirado em Launch UI Feature Sticky.

Floating feedback widget component.

File preview card with auto-detected type icons, size formatting and hover actions.

Área de upload de arquivos com suporte a arrastar e soltar e barra de progresso.

A complex component for building advanced query filters.

Filtros categoria e preço — ReUI Filter Sidebar.

Card com tilt 3D sutil ao seguir o ponteiro, para exibir screenshots/mockups em heroes.

Dock flutuante com magnificação no hover e fallback grid mobile — inspirado em Aceternity Floating Dock.

Faixa inferior atômica com copyright dinâmico, links legais e ações acessórias.

Rodapé de vanguarda com mega letreiro tipográfico de fundo, grade compacta de links, newsletter e status.

Bloco de rodapé integrado com cartão de conversão de alto impacto posicionado antes dos links.

Rodapé institucional completo com múltiplas colunas de links, apresentação de missão, newsletter e barra inferior.

A responsive footer navigation that displays in columns on desktop and as an accordion on mobile.

Captura atômica de e-mail para newsletter com validação, estado de envio e confirmação acessível.

Bloco de rodapé minimalista e centralizado com logotipo, links de navegação, canais sociais e copyright.

Letreiro tipográfico de rodapé de grande porte com corte outline, preenchimento sutil ou gradiente.

Bloco completo de recuperação de conta e redefinição de senha com instruções e confirmação.

Gera um formulário validado a partir de um schema zod (validação) e uma lista de campos (rótulo, tipo de widget, opções) — react-hook-form + Field/FieldGroup.

Carta aberta ou mensagem do coordenador/diretor com retrato, prosa editorial, drop cap e assinatura.

Funnel chart for visualizing conversion rates between sequential stages.

Galeria de imagens com filtro de categorias — composto de ds-image-gallery e ds-pill-group.

Seção split com texto de um lado e colagem de imagens do outro — composto de ds-hero-section e ds-image-gallery.

Grid de vídeos que abrem em diálogo ao clicar — composto de ds-video-dialog.

Timeline Gantt com barras e progresso — adaptado Kibo.

A geographic map component for rendering GeoJSON/TopoJSON data with tooltips, zooming (optional zoom controls), full-screen expand, choropleth, and point marke…

Glassmorphism com 5 variantes (glass-1..5) e backdrop-blur — inspirado em Launch UI Glass.

3D Globe component.

Glow posicional (top/above/center/below) com radial gradient blur — inspirado em Launch UI Glow.

Grid de pontos que pulsa de tamanho e opacidade perto do cursor, ocioso fora da interação — fundo de hero interativo.

A presentation component for a guided tour or onboarding card.

Container semântico banner com variantes default/blurred/transparent/solid, sticky, tamanhos sm/md/lg e skip link i18n. Base para todos os headers.

Grupo de CTAs do header com variantes de Button, gap configurável e skeleton.

Faixa de anúncio dismissível com tag, link e variantes default/outline/glow.

Identidade do header com logo medallion, título e subtítulo, tamanhos sm/md/lg e skeleton.

Header com brand centralizado e nav abaixo, com split actions laterais.

Header SaaS com command palette (⌘K), busca global, user menu e notificações.

Mega dropdown com grid de links e feature card — e-commerce / docs.

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.

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.

Extended input with icon prefix/suffix, clearable button, character counter with maxLength, loading spinner, i18n labels, and error state.

An email input field with a built-in mail icon and customizable size and radius variants.

A secure password input field with a toggle visibility button and custom size/radius options.

Tile de integração com logo e status — átomo base integrations.

Grid de integrações com busca — blockus #01-12.

Parede de logos em marquee infinita — blockus #13-24.

Kanban board com drag-and-drop real (@dnd-kit) — reordena e move cards entre colunas por ponteiro ou teclado.

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.

Context provider that sets the default locale for every ds-* component in the tree (prop > provider > en-US). Exports UILocaleProvider, useUILocale and useOpti…

Address autocomplete picker with async search callback — decoupled from any geocoding API.

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.

Declaração de manifesto institucional com tipografia editorial grande e citações autorais.

Markdown editor with edit/preview/split modes, toolbar, and fullscreen.

Carrossel de rolagem contínua para logos de clientes, depoimentos ou cartões de dados.

Marquee duplo (2 rows) com direção oposta e pause on hover — inspirado em Launch UI Social Proof Marquee 2 Rows.

Chuva de meteoros 100% CSS (sem canvas, sem RAF) para fundo de hero — posições determinísticas, custo de CPU essencialmente nulo.

Comparação direta entre dois pontos de dados com variação absoluta, relativa e barra proporcional.

Linha do tempo de marcos cronológicos e trajetória histórica com anos tabulares.

Compact stat label+value unit for horizontal summary strips. Compose with MiniCardGroup (pill, outlined, elevated, ghost variants) and MiniCardStrip (auto-divi…

Par contrastante de cartões para declaração articulada de Missão e Visão institucionais.

Mockup com frames small/large/mobile e sombra — inspirado em Launch UI Mockup.

A flexible modal dialog built on Dialog with size variants (sm/md/lg/xl/2xl/full), intent system (default/destructive/success/warning/info), defaultOpen for un…

Morphing Dialog using framer-motion.

Combobox que permite selecionar múltiplos itens de uma lista.

Dot-based section navigation with automatic scroll tracking and tooltips.

A user profile dropdown menu for navigation headers, built on DropdownMenu and Avatar.

Navbar flutuante com blur, borda e menu mobile — inspirado em Launch UI Navbar Floating.

A notification center component.

Campo numérico com spinbuttons — ReUI Number Field.

Grid interativo de unidades e endereços com horários e status de funcionamento.

Passos de onboarding com progresso — ReUI Onboarding 9.

An OTP input for verification codes.

Cabeçalho de página padronizado com breadcrumbs, título, tags, ações e navegação de retorno.

Full-page loading overlay with two variants: a shimmer bar fixed at the top of the viewport (bar) and a centered XL spinner (spinner). Controlled by a single l…

A pagination component with locale-aware aria labels, prev/next links, and ellipsis support.

Fundo de constelação (partículas conectadas por linhas) para hero sections, em canvas 2D com DPR limitado e pausa automática fora da viewport.

Céu estrelado vivo em canvas 2D: estrelas pulsantes com cintilação, 18% em cruz com halo e estrelas cadentes com cauda degradê. Pausa fora da viewport e frame …

Botão e prompt para autenticação biométrica e chaves de segurança WebAuthn / Passkeys.

Indicador dinâmico de segurança de senha com 4 níveis semânticos e checklist de requisitos em tempo real.

Phone input field with country code selection and flags.

A responsive pie and donut chart with interactive center label, legend, and outer slice labels.

A horizontal filter bar with pill-shaped toggle buttons, item counts, per-item intent colors, icon support, and automatic scroll overflow with fade indicators.

Mural de menções na imprensa, veículos de mídia e notícias institucionais.