Components

Every Catalyst component, isolated on its own preview page. Use these as a sandbox while designing — copy a page, tweak it, and commit your variants.

Form

  • Button

    Primary, secondary, outline, plain, and color variants.

  • Input

    Text inputs with optional invalid and disabled states.

  • Textarea

    Multiline text input.

  • Select

    Native select wrapper, styled.

  • Checkbox

    Single and grouped checkboxes with labels.

  • Radio

    Radio groups with labels and descriptions.

  • Switch

    Toggle switch for boolean state.

  • Fieldset

    Fieldset, legend, field, label, description, error.

  • Combobox

    Searchable single-select dropdown.

  • Listbox

    Headless UI listbox-based select.

  • Choice Cards

    Card-styled single-select with in-place selection motion.

  • Contact Method

    Email / phone account-identifier toggle.

  • Location Picker

    Searchable, grouped location chooser in a modal.

Display

  • Avatar

    Image, initials, square or round.

  • Badge

    Colored status badges.

  • Table

    Data table with striped, bleeding edge, and dense variants.

  • Description List

    Label/value pairs.

  • Divider

    Horizontal rule, soft or strong.

  • Empty State

    Quiet placeholder for empty tables, lists, and search results.

  • Stat

    KPI metric card with a delta badge; StatGroup lays a row out in a responsive grid.

  • Disclosure

    Animated expand/collapse (accordion).

  • Card

    The generic surface shell — hairline ring + soft radius; composition-first (the base for cards/panels).

  • Package Card

    A driving-ed enrollment package for the catalog — includes, location-aware price, Enroll CTA.

  • Checklist

    Task list with per-row status (done / to-do) and actions — the setup-dashboard core.

Feedback

  • Notice

    Inline, non-modal feedback banner (neutral / success / warning / critical).

Typography

  • Heading

    Heading and subheading levels.

  • Text

    Body, code, and strong text styles.

  • Link

    Styled inline link.

Overlay

  • Alert

    Modal confirmation dialog.

  • Dialog

    Larger modal dialog.

  • Dropdown

    Menu dropdown with sections and icons.

Navigation

  • Tabs

    Underline tabs for in-page navigation and filtering.

  • Pagination

    Previous / next / page links.

  • Navbar

    Top navigation bar — consumed inside a layout.

  • Sidebar

    Sidebar navigation — consumed inside a layout.

Layout

Theme