Components
Controls, inputs, overlays, data display, feedback and navigation primitives.
76 pages · 355 live examples, generated from the design system metadata.
Layout & Containers
AccordionRich disclosure for FAQs, settings, member directories, nested help, and guided setup. Eleven patterns use Gaudi tokens, icons, avatars, cards, and pills.12 examplesCarouselCarousel renders standard feature slides and editorial card rails.4 examplesDirectionScopes text direction for Gaudi controls that need directional keyboard and placement behavior.ResizableResizable panes with accessible separators and bounded panel sizes.2 examplesScrollAreaContained scrolling with themed scrollbars and optional smooth wheel motion for article reading.2 examplesSortableReorder lists and grids with drag handles, keyboard controls and cancellation.4 examples
Basics
AspectRatioKeep media at a stable aspect ratio as its container resizes.1 exampleAvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesButtonButton renders the Gaudi action and link-button variants.7 examplesButtonGroupGroup related actions with joined borders and consistent sizing.9 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesCheckboxCheckbox renders a token-styled binary control.6 examplesFieldField composes form label, description, error, and input building blocks.7 examplesIconStatic and interactive artwork from Gaudi’s centralized icon registry. AnimatedIcon adds opt-in motion with shared size and color tokens, a searchable catalogue, and host-controlled activation.5 examplesImageGalleryA responsive masonry or grid collection with an accessible image viewer. A one-item collection is a full-width, click-to-expand image.InputText, search, numeric and date inputs with prefix and suffix slots.11 examplesKbdKbd renders keyboard keys and multi-key shortcuts.2 examplesLinkLink centralizes navigation semantics for internal, anchor, and external links.LoaderAn accessible loading indicator with arcs, dots, expanding rings, and an indeterminate bar. Loader replaces the former Spinner component and story.3 examplesMapAn interactive geographic map with selectable markers, route lines, and camera controls. Powered by MapLibre; applications supply their own style, geography, and prepared data.PillPill renders compact category and status labels.4 examplesPointerA pointer effect scoped to its container, with direct, spring and lazy tracking, hover feedback, and native input fallbacks.ProgressDeterminate and indeterminate progress with a readable task label.4 examplesRadioGroupChoose one option using native radio controls or selectable cards.5 examplesReadingIndicatorReading progress as a classic top bar, a vertical ruler with a moving percentage, or a movable circular meter.SelectSelect renders a styled option picker with searchable combobox behavior and multi-select support.20 examplesSeparatorSeparate related content with a horizontal or vertical rule.3 examplesSliderAdjust one value or a range with pointer and keyboard input.4 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesTabsSwitch between related panels with keyboard-accessible tab controls.3 examplesTextareaMultiline text entry that composes with the same labels and errors as Input.2 examplesTextHighlightTextHighlight emphasizes short inline phrases inside prose.ToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesTooltipBrief contextual help attached to an independently labelled control.4 examplesVideoPlayerA native video player with a complete toolbar, an elastic minimal timeline, and a poster that opens a focused viewing dialog.
Messaging
Feedback & States
BannerBanner renders a compact announcement strip.5 examplesEmptyStateExplain empty collections, unavailable results and the next useful action.4 examplesSkeletonSkeleton renders non-semantic loading placeholders on the theme border token, so blocks read clearly in light and dark themes. Shimmer is the text counterpart: a highlight that sweeps across a label such as Thinking… while work is in progress.6 examples
Navigation
BreadcrumbBreadcrumb renders hierarchical page trails for navigation context.5 examplesFloatingMenuA compact, inverted pill of destinations that floats over the page once the reader scrolls away from the header, with an optional Back to top button. LayoutContainer renders it for the site; pass targetRef and position sticky to use it inside a scroll container.NavigationMenuNavigationMenu renders grouped site navigation with dropdown panels for categories, sections, and related destinations.2 examplesPaginationPagination renders blog-style previous/status/next navigation. Hovering or focusing the center status reveals direct page shortcuts.4 examplesScrollspyTrack the visible section and navigate a long document using anchor links.1 exampleStepperShow progress through a sequence of labelled steps.6 examplesTreeBrowse hierarchical content with expansion, selection, checkboxes and drag feedback.3 examples
Advanced Inputs
CalendarDate selection for single dates, ranges, bookings and localized calendars.11 examplesCascaderSelect items from hierarchical data using drill-down, columns, search and multiple selection.12 examplesColorPickerAn inline color canvas with hue, opacity, an eyedropper, and HEX/RGB/HSL/CSS editors.FileUploadChoose or drop attachments with validation, upload progress and recovery actions.5 examplesInputOtpOne-time code entry with grouped slots, paste support and completion feedback.1 exampleNumberFieldNumeric entry with increment buttons, bounds, locale formatting and scrubbing.2 examplesPhoneInputInternational phone entry with country selection and formatted numbers.1 exampleQuestionnaireA sequence of form questions with selection, validation and progress.4 examplesRatingDisplay a rating or let people select a score using labelled stars.4 examplesSignaturePadA composable signature input with pressure-aware SVG ink, undo and redo, native forms, saved previews, and image or JSON export.
Data Display
CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examplesDataTableDataTable is a TanStack table with a compact data anatomy: shared headers that preserve label casing, hairline rows, synced column and row hover, a tinted wash for selected rows, and declarative column alignment, width and pinning. It adds search with a live count, single or multi-column sorting, selection with bulk actions, expandable rows, row action menus, pinned rows, grouped bands, a totals footer, sticky headers, automatic virtualization, pagination or load-more, CSV export, and loading, refreshing, empty and error states. Sorting, selection, expansion and pinning work controlled or uncontrolled.19 examplesFilterBarA collection toolbar: search with a live result count, a Filters popover of facets with counts, and removable Field: Value chips. The host owns matching and persistence.6 examplesItemFlexible rows for people, settings, integrations, navigation and activity lists, composed from media, text, actions and optional header and footer rows.11 examplesSchemaDisplayRead an API endpoint or a JSON Schema: method badge, path with highlighted parameters, and request and response schemas as an expandable property tree.TerminalTerminal renders mac-style shell examples with typed commands and structured output lines.TimelineDisplay dated activity and milestones with readable descriptions and optional actions.6 examples
Overlays & Menus
CommanderCommander provides the site command palette with host-supplied destinations for navigation, content search, and theme actions.3 examplesDialogModal, confirmation and bare full-screen dialogs for editing, detail inspection, explicit decisions, lightboxes and launchers.12 examplesDropdownMenuAction menus with keyboard navigation, checkbox choices and destructive actions.8 examplesPopoverPopover renders compact positioned supporting content next to its trigger.8 examplesSheetA panel that slides in from an edge over a dimmed page, for side tasks such as settings, details, comments, notifications or an assistant, without leaving the current screen.8 examplesToastTransient feedback for completed actions, errors and recoverable background work.4 examples
Media & Previews
EmbedThe shared preview vocabulary for messages and content: one switch that hands each piece of content to its owner. Links go to LinkPreview, code to CodeBlock, generated pages to WebPreview; images and videos default to a LinkPreview card until you pass a renderer.LinkPreviewA link enriched with what the destination is. One normaliser, normalizeLinkPreview, turns the app's preview payload into a kind (repository, video, article, social post, docs, Wikipedia, package, image, file, internal post or website) and the rich fields that kind earns; three variants present it.WebPreviewA framed browser for a live or generated page: back, forward and reload, an editable address bar, open in a new tab, device widths, a sandboxed iframe with a loading state, an optional console, and a link preview card when a site refuses framing.
Planning
EventCalendarSchedule events across day, week, month, agenda and resource views.5 examplesFlowA node-and-edge canvas for workflows, pipelines, agent trees and driver maps, themed with Gaudi tokens and built on React Flow.5 examplesGanttA timeline board for scheduled work, dependencies and resource planning.8 examplesKanbanMove work items between columns while retaining an accessible move action.10 examples