amezquita design systemGet started

Components

34 components in three tiers, read from the installed package’s registry. Every card is the real component running in the base theme, not a screenshot.

Primitives (16)

Single elements: buttons, inputs, links, labels.

  • AvatarUser profile picture with fallback to initials when no image is provided
  • LiveDraft3
    BadgeSmall status indicator or numeric count overlay attached to another element
  • ButtonTrigger for user actions; renders as <button> or <a> depending on context
  • CheckboxSingle boolean selection with an associated label; supports indeterminate state

  • Level 3

    Level 4

    Level 5

    HeadingSemantic heading element (H1–H5 visual sizes, any <h1>–<h6> tag) with a visual size decoupled from its document-outline level
  • We’ll only use it for release notes.
    InputLabelled single-line text entry with hint and error states
  • LabelStandalone form label element — used when a label must be decoupled from its input

  • Read the release notes before upgrading.

    Source on GitHub(opens in a new tab)
    LinkNavigation to another page or resource; use Link for navigation and Button for actions
  • RadioSingle-selection control within a mutually exclusive group
  • SelectDropdown for choosing a single value from a list; supports grouped options
  • Loading profile
    SkeletonPlaceholder loading state that mirrors the geometry of the content it replaces

  • This site’s own SkipLink is the first Tab stop on every page. Press Tab from the top of the page to see it.

    SkipLinkFirst Tab stop on the page that lets keyboard users jump past the header to the main content
  • SpinnerIndeterminate loading indicator for in-progress operations
  • SwitchBinary toggle for on/off settings; renders as a styled checkbox under the hood
  • basetokensreacta11y
    TagInline label for categorising or annotating content — non-interactive
  • 0/200
    TextareaMulti-line text entry with label, hint, and error states — mirrors Input API

Composition (9)

Containers and overlays that hold other components.

  • 1.1.1 is out

    The registry now installs the base theme’s colours.
    AlertContextual inline feedback message with semantic severity levels (info, success, warning, error)
  • AlertDialogConfirmation gate for an action the user must explicitly accept or decline — real alertdialog role, no outside-click/close-button dismiss, unlike Dialog

  • Songwriting profile

    A consumer of the system since 1.0.

    CardCompound container for grouped content — composed from named sub-components
  • DialogOverlay for tasks or information requiring focused attention
  • DrawerSide-anchored slide-in panel for supplemental content or secondary navigation
  • MenuDropdown list of actions opened from a trigger: account menus, overflow ("more") menus, row actions
  • NavigationMenuThe site's header navigation: top-level links, plus groups that open a dropdown of links. Hidden below 1024px, where SideNav's drawer carries the same links (its headerItems)
  • ToastEphemeral notification pushed to a corner of the viewport; auto-dismisses after a timeout
  • TooltipContextual label revealed on hover or focus — supplements an icon or truncated text

Patterns (9)

Larger, opinionated pieces of a page, built from the other two tiers.

  • AccordionCollapsible content sections with animated expand/collapse; supports single or multi-open modes
  • BreadcrumbHierarchical page location trail; the last item is the current page (non-linked)
  • 1.1.1Patch
    1.1.0Minor
    1.0.0Major
    DataTableSortable, filterable, paginated table for structured datasets

  • No components match

    Try a shorter search.

    EmptyStatePlaceholder for zero-content states — icon, heading, supporting text, and an optional action

  • Design system

    Start from base

    A brand-neutral theme every project starts from.

    HeroPage-level section header with eyebrow, title, lead text, and an action slot
  • PaginationPage navigation controls for multi-page data sets; exposes current page and total page count
  • SideNavSection navigation: inline beside the content (240px wide) from 1024px up; below that, in a left Drawer opened by SideNavTrigger, which hides itself from 1024px up. Wrap both in SideNavProvider
  • TokenValue
    space-inline-gap8px
    space-element-gap16px
    TableStatic data table with semantic header, body, and row structure
  • npm install @amezquita/design-system
    TabsSegmented view switcher with full keyboard navigation; built on Radix Tabs