Enterprise-grade design system and component library for LEMA-UFPB
A fully custom SVG box-and-whisker chart with ResizeObserver for responsive layout, notch support, and outlier plotting.
A navigation aid showing the user's location in a hierarchical page structure with separators and ellipsis.
A data-driven breadcrumbs component.
Moldura simulando janela de navegador ou terminal de sistema operacional para screenshots e previews.
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.
Feature-rich button with loading state, start/end icons, rounded variant (full/lg/md/none), fullWidth, double-click debounce, two-step destructive confirmation, and built-in tooltip via Radix. Wraps the shadcn Button primitive.
A date picker with day selection, range support, and dropdown navigation.
A highlighted alert component.
A financial candlestick chart with volume bars, moving averages, reference lines, and brush zoom.
A versatile card container with sub-components for header, title, action buttons, descriptions, body content, and footer actions.
Feature / navigation card with a tinted icon medallion, title and description. Icon colour and background derive from a single semantic tone token. Supports soft/solid/outline media styles, three sizes, centred or left alignment, badge, link mode with hover lift, and a loading skeleton.
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 portfolio of all statistical display cards: CardStat, CardStatCompact, CardStatProgress, CardStatComparison, CardStatSparkline, CardStatHighlight, CardStatList, CardStatGauge, and CardStatHeatbar.
Shared utilities, CVA variants, and helper components (TrendBadge, CardStatEmptySlot) for the card-stat family.
A statistical card with an inline sparkline chart for visual trend representation.
A sliding carousel for cycling through elements with previous/next navigation using Embla.
Extended carousel with autoplay support via embla-carousel-autoplay, multiple nav variants (side/overlay/bottom/none), card/showcase/minimal display modes, dot indicators, responsive slides-per-view, external API control via setApi, i18n aria-labels, and skeleton loading. Wraps the shadcn Carousel primitive.
Seleção em cascata níveis — ReUI Cascader.
Visualização estruturada de release notes com categorização semântica e timeline de versões.
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 guess that wraps or clips long values.
A form control for selecting one or more options from a set.
Resumo de pedido — ReUI Checkout.
An expandable/collapsible section with trigger and content regions.
A color picker input.
An autocomplete combobox built on @base-ui/react with search, groups, multi-select chips, and keyboard navigation.
A batteries-included combobox with virtual scrolling, search, single/multi-select, groups, custom option rendering, and configurable popover positioning (side/align/offset).
A fast, searchable command palette and menu list interface driven by keyboard navigation.
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.
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.
A right-click context menu with items, submenus, checkboxes, radio items, and separators.
Graph estilo GitHub 7x20 — adaptado Kibo.
Exibe um trecho de texto ou código com um botão acoplado para cópia rápida.