Design System

Token Catalog

Complete reference for every design token, component variant, and visual foundation in the aiChemist platform.

Color Palette

All color tokens organized by category. Each swatch shows the CSS custom property name and resolved hex value.

Backgrounds

dark

#0a0a14

card

#13131f

elevated

#1e1e2e

input

#0f0f1a

Primary

base

#a78bfa

hover

#8b5cf6

active

#7c3aed

muted

#6366f1

Accent

gold

#f59e0b

goldHover

#d97706

CTA

green

#22c55e

greenHover

#16a34a

greenActive

#15803d

Text

primary

#ffffff

secondary

#a1a1aa

muted

#6b7280

accent

#a78bfa

Status

success

#22c55e

warning

#f59e0b

error

#ef4444

info

#3b82f6

Border

default

#3f3f5a

focus

#a78bfa

subtle

rgba(167,139,250,0.2)

Typography Scale

Font sizes, weights, and families from the token pipeline.

Font Sizes

xs (12px)The quick brown fox
sm (14px)The quick brown fox
base (16px)The quick brown fox
lg (18px)The quick brown fox
xl (20px)The quick brown fox
2xl (24px)The quick brown fox
3xl (30px)The quick brown fox
4xl (36px)The quick brown fox
5xl (48px)The quick brown fox
6xl (60px)The quick brown fox

Font Weights

normal (400)The quick brown fox jumps over the lazy dog
medium (500)The quick brown fox jumps over the lazy dog
semibold (600)The quick brown fox jumps over the lazy dog
bold (700)The quick brown fox jumps over the lazy dog

Font Families

bodyInter, system-ui, sans-serif
headingInter, system-ui, sans-serif
monoJetBrains Mono, monospace

Spacing Scale

Visual representation of every spacing token. Bar width corresponds to the token value.

0 (0px)
1 (4px)
2 (8px)
3 (12px)
4 (16px)
5 (20px)
6 (24px)
8 (32px)
10 (40px)
12 (48px)
16 (64px)
20 (80px)
24 (96px)

Interactive Playground

Explore all 66 shared components with live prop controls. Adjust variants, sizes, counts, and content to see how each component responds in real time.

Button

Component Metadata
Familyaction
FrameworksNext.js, Astro/EmDash
DescriptionPrimary action button with variant and size props. Token-driven styling via CSS custom properties.
PropsButtonProps (variant: primary|secondary, size: sm|md|lg, children, ...ButtonHTMLAttributes)
Statesdefault, hover, active, focus, disabled
A11y
  • Minimum 4.5:1 contrast ratio
  • Visible focus indicator
  • Keyboard activatable
Responsive
  • Full-width on mobile (< 640px)
  • Inline on desktop
Motion
  • Hover scale transition 150ms ease
Token Dependencies
  • components.button.primary.background
  • components.button.primary.backgroundHover
  • components.button.primary.text
  • components.button.primary.borderRadius
  • components.button.primary.paddingX
  • components.button.primary.paddingY
  • components.button.secondary.background
  • components.button.secondary.border
  • components.button.secondary.text
Content Slotschildren (ReactNode)
CMS Bindings
  • Button label from CMS text field
  • Link target from CMS URL field
Test Cases
  • Renders primary variant
  • Renders secondary variant
  • Handles click events
  • Disabled state blocks interaction

Card

Card Preview

This is a card body. Cards render token-driven borders, padding, and background.

Component Metadata
Familylayout
FrameworksNext.js, Astro/EmDash
DescriptionContent container with optional title header. Token-driven background, border-radius, padding, and shadow.
PropsCardProps (title?: string, children, ...HTMLAttributes<HTMLDivElement>)
Statesdefault, hover
A11y
  • Semantic heading level in title
  • Sufficient contrast for card content
Responsive
  • Full-width on mobile
  • Grid-based on desktop
Motion
    Token Dependencies
    • components.card.background
    • components.card.borderRadius
    • components.card.padding
    • components.card.shadow
    Content Slotstitle (string), children (ReactNode)
    CMS Bindings
    • Title from CMS string field
    • Body from CMS portableText
    Test Cases
    • Renders with title
    • Renders without title
    • Passes className through

    Tabs

    The overview tab content with component descriptions.

    Component Metadata
    Familynavigation
    FrameworksNext.js
    DescriptionClient-side tabbed interface with ARIA roles. Manages active tab state internally.
    PropsTabsProps (tabs: TabItem[], defaultIndex?: number, className?: string)
    Statesdefault, active-tab, hover-tab, focus-tab
    A11y
    • role=tablist on container
    • role=tab on triggers
    • role=tabpanel on content
    • aria-selected state
    Responsive
    • Horizontal tabs on desktop
    • Scrollable on mobile
    Motion
      Token Dependencies
      • components.tabs.borderColor
      • components.tabs.triggerColor
      • components.tabs.triggerHoverColor
      • components.tabs.triggerActiveColor
      • components.tabs.triggerActiveBorder
      • components.tabs.panelColor
      • components.tabs.paddingX
      • components.tabs.paddingY
      Content Slotstabs[].content (ReactNode)
      CMS Bindings
      • Tab labels from CMS string array
      • Tab content from CMS portableText array
      Test Cases
      • Renders all tabs
      • Switches active tab on click
      • Defaults to specified index

      Alert

      Component Metadata
      Familyfeedback
      FrameworksNext.js, Astro/EmDash
      DescriptionDismissible notification banner with success/warning/error/info variants. Token-driven variant colors.
      PropsAlertProps (variant: AlertVariant, children, dismissible?: boolean, onDismiss?: () => void)
      Statesvisible, dismissed, hover-dismiss
      A11y
      • role=alert for screen reader announcement
      • Dismiss button has aria-label
      Responsive
      • Full-width on all breakpoints
      Motion
        Token Dependencies
        • components.alert.borderRadius
        • components.alert.padding
        • components.alert.paddingX
        • components.alert.success.background
        • components.alert.success.border
        • components.alert.success.text
        • components.alert.warning.background
        • components.alert.warning.border
        • components.alert.warning.text
        • components.alert.error.background
        • components.alert.error.border
        • components.alert.error.text
        • components.alert.info.background
        • components.alert.info.border
        • components.alert.info.text
        Content Slotschildren (ReactNode)
        CMS Bindings
        • Alert message from CMS text field
        • Variant from CMS select field
        Test Cases
        • Renders each variant with correct icon
        • Dismissible hides on click
        • Calls onDismiss callback

        Pricing Table

        Starter

        $0/mo
        • 1 design system
        • 50 tokens
        • 2 surfaces
        Recommended

        Pro

        $49/mo
        • Unlimited systems
        • Unlimited tokens
        • ADW pipeline
        • Priority support

        Enterprise

        Custom
        • Everything in Pro
        • SSO
        • SLA
        • Dedicated account
        Component Metadata
        Familydata-display
        FrameworksNext.js, Astro/EmDash
        DescriptionMulti-tier pricing comparison with featured tier highlighting. Token-driven card styles and CTA buttons.
        PropsPricingTableProps (tiers: PricingTier[], onTierSelect?: (tier) => void)
        Statesdefault, featured-tier, hover-cta, active-cta
        A11y
        • Semantic list for features
        • Button for CTA (not link)
        • Sufficient contrast on featured badge
        Responsive
        • Single column on mobile
        • Multi-column grid on desktop
        Motion
        • Hover elevation on pricing cards
        Token Dependencies
        • components.pricingCard.background
        • components.pricingCard.backgroundFeatured
        • components.pricingCard.borderRadius
        • components.pricingCard.padding
        • components.pricingCard.border
        • components.pricingCard.borderFeatured
        • components.pricingCard.priceColor
        • components.pricingCard.labelColor
        • components.pricingCard.featureColor
        • components.pricingCard.checkColor
        • components.pricingCard.shadow
        • components.pricingCard.shadowFeatured
        Content Slotstiers[].features (string[]), tiers[].cta (string)
        CMS Bindings
        • Tier data from CMS JSON field
        • Feature lists from CMS text arrays
        Test Cases
        • Renders all tiers
        • Featured tier has badge
        • onTierSelect fires on CTA click

        Testimonial Wall

        J

        Jane Smith

        CTO, Example Corp

        “This platform transformed our design workflow.”
        J

        John Doe

        Design Lead, Agency X

        “Token-driven components saved us weeks of work.”
        Component Metadata
        Familydata-display
        FrameworksNext.js, Astro/EmDash
        DescriptionGrid of customer testimonials with avatar, quote, star rating, and role. Token-driven card and star colors.
        PropsTestimonialWallProps (testimonials: Testimonial[])
        Statesdefault, hover-card
        A11y
        • Star rating has aria-label
        • Blockquote for quotes
        • Avatar alt text
        Responsive
        • Single column on mobile
        • 2-3 column grid on desktop
        Motion
        • Hover background transition on cards
        Token Dependencies
        • components.testimonial.background
        • components.testimonial.backgroundHover
        • components.testimonial.borderRadius
        • components.testimonial.padding
        • components.testimonial.border
        • components.testimonial.avatarBorder
        • components.testimonial.avatarSize
        • components.testimonial.quoteColor
        • components.testimonial.nameColor
        • components.testimonial.roleColor
        • components.testimonial.starColor
        • components.testimonial.starEmpty
        Content Slotstestimonials[].quote (string), testimonials[].avatarUrl (string)
        CMS Bindings
        • Testimonials from CMS collection with name/role/quote/rating fields
        Test Cases
        • Renders all testimonials
        • Avatar placeholder when no URL
        • Star rating reflects count

        Metrics Panel

        Revenue

        $48K

        +12%

        Users

        2.8K

        +8%

        Churn

        3.2%

        -0.4%
        Component Metadata
        Familydata-display
        FrameworksNext.js
        DescriptionGrid of metric cards with trend indicators (up/down/flat) and status colors (good/warning/critical). Configurable column count.
        PropsMetricsPanelProps (metrics: MetricItem[], columns?: 2|3|4)
        Statesdefault, status-good, status-warning, status-critical
        A11y
        • Trend arrows use aria-hidden
        • Status conveyed by color and text
        Responsive
        • 2 columns on mobile
        • configurable columns (2-4) on desktop
        Motion
          Token Dependencies
          • components.metricsPanel.background
          • components.metricsPanel.borderRadius
          • components.metricsPanel.padding
          • components.metricsPanel.border
          • components.metricsPanel.valueColor
          • components.metricsPanel.labelColor
          • components.metricsPanel.trendUp
          • components.metricsPanel.trendDown
          • components.metricsPanel.trendFlat
          • components.metricsPanel.statusGood
          • components.metricsPanel.statusWarning
          • components.metricsPanel.statusCritical
          Content Slotsmetrics[].label (string), metrics[].value (string)
          CMS Bindings
          • Metrics from CMS JSON field or API endpoint
          Test Cases
          • Renders all metrics
          • Correct trend arrow direction
          • Status class applied

          Author Bio Card

          J
          42 articles

          Jane Writer

          Senior Editor

          Covers enterprise technology and design systems.

          Component Metadata
          Familydata-display
          FrameworksNext.js, Astro/EmDash
          DescriptionAuthor profile card with avatar, bio, article count badge, and social links. Vertical and horizontal layout variants.
          PropsAuthorBioCardProps (author: AuthorProfile, layout?: vertical|horizontal)
          Statesdefault, hover-social-link
          A11y
          • Social links have title attribute
          • Avatar has alt text
          • External links have rel=noopener
          Responsive
          • Vertical layout on mobile
          • Horizontal layout option on desktop
          Motion
          • Social link hover color transition
          Token Dependencies
          • components.authorBio.background
          • components.authorBio.borderRadius
          • components.authorBio.padding
          • components.authorBio.border
          • components.authorBio.avatarSize
          • components.authorBio.avatarBorder
          • components.authorBio.nameColor
          • components.authorBio.roleColor
          • components.authorBio.bioColor
          • components.authorBio.socialColor
          • components.authorBio.socialHover
          • components.authorBio.badgeBackground
          • components.authorBio.badgeText
          Content Slotsauthor.bio (string), author.socialLinks (SocialLink[])
          CMS Bindings
          • Author data from EmDash authors collection
          Test Cases
          • Renders vertical layout
          • Renders horizontal layout
          • Shows article count badge
          • Social links open in new tab

          Feature Comparison Table

          FeatureBasicPro
          Tokens
          Components
          ADW Pipeline
          Component Metadata
          Familydata-display
          FrameworksNext.js, Astro/EmDash
          DescriptionAccessible comparison table with yes/no/partial support icons, column highlighting, and tooltips. Horizontally scrollable on mobile.
          PropsFeatureComparisonTableProps (columns: ComparisonColumn[], features: ComparisonFeature[])
          Statesdefault, highlighted-column, tooltip-visible
          A11y
          • role=table on table element
          • scope=col on header cells
          • aria-label on support icons
          • Scrollable region has tabIndex and aria-label
          Responsive
          • Horizontally scrollable on mobile
          • Full table on desktop
          Motion
            Token Dependencies
            • components.comparisonTable.background
            • components.comparisonTable.headerBackground
            • components.comparisonTable.borderRadius
            • components.comparisonTable.border
            • components.comparisonTable.rowStripe
            • components.comparisonTable.headerText
            • components.comparisonTable.cellText
            • components.comparisonTable.checkColor
            • components.comparisonTable.crossColor
            • components.comparisonTable.partialColor
            • components.comparisonTable.featureLabelColor
            • components.comparisonTable.tooltipBackground
            • components.comparisonTable.tooltipText
            Content Slotsfeatures[].name (string), features[].tooltip (string), columns[].name (string)
            CMS Bindings
            • Feature data from CMS JSON field
            • Column definitions from CMS collection
            Test Cases
            • Renders all columns and rows
            • Highlighted column has class
            • Tooltip displays on hover
            • Alternating row stripes

            Timeline

            Commit

            Initial commit

            Deploy

            Production deploy

            All routes 200, PM2 restarted

            Success
            Approval

            Design approved

            Warning
            Publish

            Docs published

            Architecture docs + 6 ADRs

            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionVertical chronological feed of events (commits, deploys, approvals, publishes, pipeline runs) with type filtering and status badges. Pipeline-generated via design-to-code automation.
            PropsTimelineProps (events: TimelineEvent[], filters?: EventType[], className?: string)
            Statesdefault, filtered, empty
            A11y
            • role=feed on container
            • aria-posinset/aria-setsize on events
            • aria-pressed on filter buttons
            • Keyboard navigable filters
            Responsive
            • Full-width on all breakpoints
            • Stacked layout
            Motion
            • Filter transition 150ms ease
            Token Dependencies
            • components.timeline.lineColor
            • components.timeline.eventBackground
            • components.timeline.eventBorder
            • components.timeline.eventBorderRadius
            • components.timeline.eventPadding
            • components.timeline.iconBackground
            • components.timeline.iconColor
            • components.timeline.titleColor
            • components.timeline.descriptionColor
            • components.timeline.timestampColor
            • components.timeline.badgeSuccessBg
            • components.timeline.badgeErrorBg
            • components.timeline.badgeWarningBg
            • components.timeline.badgePendingBg
            • components.timeline.badgeText
            • components.timeline.filterActiveBg
            • components.timeline.filterActiveText
            Content Slotsevents (TimelineEvent[])
            CMS Bindings
            • Event data from CMS collection
            • Filter types from CMS config
            Test Cases
            • Renders all events
            • Filters by event type
            • Shows status badges
            • Empty state message

            Form Wizard

            Step 1 of 3
            Component Metadata
            Familyforms
            FrameworksNext.js, Astro/EmDash
            DescriptionMulti-step form wizard with numbered step progress indicator, back/next navigation, per-step validation, and step counter. Supports 2-5 steps with arbitrary content per step.
            PropsFormWizardProps (steps: WizardStep[], onComplete?: () => void, className?: string)
            Statesdefault, step-active, step-completed, step-inactive, field-focus, field-error, last-step
            A11y
            • aria-current=step on active step circle
            • aria-live=polite on content region
            • aria-labelledby linking content to step indicator
            • Disabled back button on first step
            Responsive
            • Full-width on all breakpoints
            • Step labels hidden on mobile if needed
            Motion
            • Step circle transition 150ms ease
            • Button hover transition 150ms ease
            Token Dependencies
            • components.formWizard.background
            • components.formWizard.borderRadius
            • components.formWizard.padding
            • components.formWizard.stepActiveBackground
            • components.formWizard.stepActiveBorder
            • components.formWizard.stepActiveText
            • components.formWizard.stepCompletedBackground
            • components.formWizard.stepCompletedText
            • components.formWizard.stepInactiveBackground
            • components.formWizard.stepInactiveBorder
            • components.formWizard.stepInactiveText
            • components.formWizard.stepConnectorActive
            • components.formWizard.stepConnectorInactive
            • components.formWizard.stepLabelActive
            • components.formWizard.stepLabelInactive
            • components.formWizard.fieldBackground
            • components.formWizard.fieldBorder
            • components.formWizard.fieldBorderFocus
            • components.formWizard.fieldBorderError
            • components.formWizard.fieldText
            • components.formWizard.fieldPlaceholder
            • components.formWizard.labelColor
            • components.formWizard.errorText
            • components.formWizard.checkboxCheckedBg
            • components.formWizard.checkboxBorder
            • components.formWizard.navCounterColor
            Content Slotssteps[].content (ReactNode), steps[].label (string)
            CMS Bindings
            • Step definitions from CMS collection
            • Form schema from CMS config
            Test Cases
            • Renders all step indicators
            • Navigates forward
            • Navigates backward
            • Calls onComplete on last step
            • Back disabled on first step

            Score Gauge

            75

            Score

            +5%
            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionCircular SVG gauge with score value, label, and optional trend indicator. Three sizes (sm/md/lg) and four status colors (default/good/warning/critical). Full Stitch→Penpot→Tokens→Code pipeline product.
            PropsScoreGaugeProps (score: number, label: string, size?: sm|md|lg, status?: default|good|warning|critical, trend?: up|down|flat, trendValue?: string)
            Statesdefault, good, warning, critical
            A11y
            • SVG ring is aria-hidden
            • Score value is visible text
            • Trend arrows use aria-hidden with text fallback
            Responsive
            • Inline-flex, scales with container
            • Size prop controls diameter (80/120/200)
            Motion
            • stroke-dasharray transition 400ms ease
            Token Dependencies
            • components.scoreGauge.trackColor
            • components.scoreGauge.fillDefault
            • components.scoreGauge.fillGood
            • components.scoreGauge.fillWarning
            • components.scoreGauge.fillCritical
            • components.scoreGauge.scoreColor
            • components.scoreGauge.labelColor
            • components.scoreGauge.trendUpColor
            • components.scoreGauge.trendDownColor
            • components.scoreGauge.trendFlatColor
            • components.scoreGauge.background
            • components.scoreGauge.borderRadius
            • components.scoreGauge.strokeWidth
            • components.scoreGauge.glowOpacity
            Content Slotslabel (string), trendValue (string)
            CMS Bindings
            • Score from CMS number field
            • Label from CMS string field
            Test Cases
            • Renders score and label
            • Clamps score to 0-100
            • Applies size class
            • Applies status class
            • Shows trend indicator

            Radar Chart

            Behavioral Profile

            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionSVG radar/spider chart with configurable dimensions (3-8 axes), concentric grid, data polygon with fill and stroke, axis labels with values, and optional center overall score. Teal palette from Stitch Aetheris Observatory design system.
            PropsRadarChartProps (dimensions: RadarDimension[], title?: string, overallScore?: number, size?: number)
            Statesdefault, hover
            A11y
            • SVG is aria-hidden
            • Title is visible text heading
            • Score values in labels are visible text
            Responsive
            • max-width 320px SVG, scales with container
            • Labels adjust text-anchor by position
            Motion
            • Fill opacity transition 300ms ease
            Token Dependencies
            • components.radarChart.background
            • components.radarChart.borderRadius
            • components.radarChart.gridColor
            • components.radarChart.gridStrokeWidth
            • components.radarChart.axisColor
            • components.radarChart.fillColor
            • components.radarChart.fillOpacity
            • components.radarChart.strokeColor
            • components.radarChart.strokeWidth
            • components.radarChart.dotColor
            • components.radarChart.dotRadius
            • components.radarChart.labelColor
            • components.radarChart.valueColor
            • components.radarChart.titleColor
            • components.radarChart.scoreColor
            • components.radarChart.scoreBgColor
            Content Slotsdimensions[].label (string), title (string)
            CMS Bindings
            • Dimension data from CMS JSON field
            • Title from CMS string field
            Test Cases
            • Renders all dimension labels
            • Renders title when provided
            • Renders overall score in center
            • Clamps values to 0-100
            • Passes className through

            Progress Bar

            Component Metadata
            Familyfeedback
            FrameworksNext.js, Astro/EmDash
            DescriptionLinear progress bar with single/segmented modes, status colors, size variants, striped/animated patterns, and indeterminate loading state. Fundamental UI primitive for pipeline stages, CI progress, and goal tracking.
            PropsProgressBarProps (value?: number, segments?: ProgressBarSegment[], status?: default|success|warning|error, size?: sm|md|lg, showLabel?: boolean, striped?: boolean, animated?: boolean, indeterminate?: boolean, label?: string)
            Statesdefault, success, warning, error, striped, animated, indeterminate, segmented
            A11y
            • role=progressbar
            • aria-valuenow for determinate
            • aria-valuemin and aria-valuemax
            • aria-label for context
            Responsive
            • Full-width on all breakpoints
            • Height scales with size prop
            Motion
            • Fill width transition 0.4s ease
            • Stripe animation 1.5s linear infinite
            • Indeterminate bounce 1.5s ease-in-out infinite
            Token Dependencies
            • components.progressBar.trackBackground
            • components.progressBar.trackBorderRadius
            • components.progressBar.fillDefault
            • components.progressBar.fillSuccess
            • components.progressBar.fillWarning
            • components.progressBar.fillError
            • components.progressBar.fillBorderRadius
            • components.progressBar.labelColor
            • components.progressBar.labelFontSize
            • components.progressBar.heightSm
            • components.progressBar.heightMd
            • components.progressBar.heightLg
            • components.progressBar.segmentGap
            • components.progressBar.glowOpacity
            • components.progressBar.stripeAngle
            • components.progressBar.animationDuration
            Content Slotssegments[].label (string)
            CMS Bindings
            • Value from CMS number field
            • Segments from CMS JSON
            Test Cases
            • Renders with correct width for value
            • Clamps value to 0-100
            • Applies status class
            • Applies size class
            • Shows label in lg size
            • Renders striped pattern class
            • Renders indeterminate animation
            • Renders segments

            Pagination

            Component Metadata
            Familynavigation
            FrameworksNext.js, Astro/EmDash
            DescriptionPage navigation with numbered buttons, prev/next arrows, ellipsis for long ranges, active page highlight, disabled boundary states, and page counter. Addresses blog pagination scalability finding from E2E Test 2.
            PropsPaginationProps (totalPages: number, currentPage?: number, onPageChange?: (page) => void, maxVisible?: number, showCounter?: boolean)
            Statesdefault, page-active, page-hover, nav-disabled, nav-hover
            A11y
            • nav element with aria-label=Pagination
            • aria-current=page on active button
            • aria-label on each page button
            • Disabled buttons have disabled attribute
            Responsive
            • Centered on all breakpoints
            • Compact layout scales with button count
            Motion
            • Background/color transition 150ms ease on hover
            Token Dependencies
            • components.pagination.background
            • components.pagination.borderRadius
            • components.pagination.buttonBackground
            • components.pagination.buttonBackgroundHover
            • components.pagination.buttonBackgroundActive
            • components.pagination.buttonText
            • components.pagination.buttonTextHover
            • components.pagination.buttonTextActive
            • components.pagination.buttonBorderRadius
            • components.pagination.buttonSize
            • components.pagination.disabledColor
            • components.pagination.ellipsisColor
            • components.pagination.counterColor
            • components.pagination.navColor
            • components.pagination.navColorHover
            Content Slots
            CMS Bindings
            • Total pages from CMS collection count
            • Current page from URL parameter
            Test Cases
            • Renders all page buttons
            • Highlights current page
            • Prev disabled on first page
            • Next disabled on last page
            • Shows ellipsis for long ranges
            • Fires onPageChange callback

            Reading Time

            6 min read1,200 words
            Component Metadata
            Familycontent
            FrameworksNext.js, Astro/EmDash
            DescriptionReading time estimate badge with clock icon, minutes calculation, word count, and optional scroll progress bar. Addresses Self-Healing Loop finding: blog detail page lacks reading time estimate.
            PropsReadingTimeProps (wordCount: number, wordsPerMinute?: number, showWordCount?: boolean, progress?: number)
            Statesdefault, with-progress
            A11y
            • Progress bar has role=progressbar with aria-valuenow/min/max
            • Clock icon is aria-hidden
            Responsive
            • Inline-flex, scales with container
            Motion
            • Progress bar fill transition 200ms ease
            Token Dependencies
            • components.readingTime.background
            • components.readingTime.borderRadius
            • components.readingTime.textColor
            • components.readingTime.iconColor
            • components.readingTime.separatorColor
            • components.readingTime.progressTrack
            • components.readingTime.progressFill
            • components.readingTime.progressHeight
            Content Slots
            CMS Bindings
            • Word count from CMS text field length calculation
            • Progress from scroll position
            Test Cases
            • Calculates reading time from word count
            • Shows word count when enabled
            • Hides word count when disabled
            • Renders progress bar when progress provided
            • Passes className through

            AI Avatar Tooltip

            Component Metadata
            Familyai-interaction
            FrameworksNext.js, Astro/EmDash
            DescriptionFloating AI assistant indicator with pulsing avatar, glassmorphic chat bubble, typing indicator, message thread, and mini input. Supports idle/active/typing states, controlled/uncontrolled open state, and position anchoring.
            PropsAiAvatarTooltipProps (name?: string, greeting?: string, status?: AiStatus, messages?: AiMessage[], open?: boolean, onOpenChange?: (open: boolean) => void, placeholder?: string, onSend?: (message: string) => void, badge?: string, position?: 'bottom-right' | 'bottom-left')
            Statesidle-collapsed, active-collapsed, typing-collapsed, idle-expanded, active-expanded, typing-expanded, with-messages, with-badge
            A11y
            • Chat bubble has role=dialog with aria-label
            • Trigger has aria-expanded
            • Input has aria-label
            • Close button has aria-label
            • Send button has aria-label
            • Typing indicator has aria-label
            Responsive
            • Bubble width 320px on desktop, scales to fit mobile viewports
            Motion
            • Avatar glow pulse 3s ease-in-out (idle), 1.2s (typing)
            • Bubble enter animation 250ms ease-out
            • Typing dots bounce 1.4s staggered
            Token Dependencies
            • components.aiAvatarTooltip.avatarSize
            • components.aiAvatarTooltip.avatarBackground
            • components.aiAvatarTooltip.avatarGlowColor
            • components.aiAvatarTooltip.avatarGlowActiveColor
            • components.aiAvatarTooltip.avatarIconColor
            • components.aiAvatarTooltip.bubbleBackground
            • components.aiAvatarTooltip.bubbleBorder
            • components.aiAvatarTooltip.bubbleShadow
            • components.aiAvatarTooltip.bubbleBorderRadius
            • components.aiAvatarTooltip.headerTextColor
            • components.aiAvatarTooltip.bodyTextColor
            • components.aiAvatarTooltip.inputBackground
            • components.aiAvatarTooltip.inputBorderColor
            • components.aiAvatarTooltip.inputFocusBorderColor
            • components.aiAvatarTooltip.inputTextColor
            • components.aiAvatarTooltip.inputPlaceholderColor
            • components.aiAvatarTooltip.typingDotColor
            • components.aiAvatarTooltip.goldAccent
            • components.aiAvatarTooltip.closeButtonColor
            • components.aiAvatarTooltip.closeButtonHoverColor
            Content Slotsmessages (AiMessage[]), greeting (string)
            CMS Bindings
            • AI persona from CMS config
            • Greeting from CMS localization
            Test Cases
            • Renders trigger button with aria-expanded=false
            • Opens bubble on trigger click
            • Displays name and greeting in bubble
            • Shows typing indicator when status=typing
            • Renders messages
            • Calls onSend on Enter key
            • Shows gold badge when provided
            • Passes className through

            Live Readouts

            Heart Rate
            72bpm
            SpO2
            98%
            Stress
            Low
            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionReal-time biometric readout panel with metric cards in responsive grid. Each card shows large monospace value, unit, trend arrow, status dot, and optional sparkline. Supports normal/warning/critical states and active pulse animation.
            PropsLiveReadoutsProps (metrics: ReadoutMetric[], title?: string, columns?: 2|3|4)
            Statesnormal, warning, critical, active-pulse, with-sparkline, with-trend
            A11y
            • Region has role=region with aria-label
            • Status dot has aria-label
            • Trend arrow has aria-label
            • Sparkline is aria-hidden
            Responsive
            • Auto-fit grid (min 160px)
            • Optional fixed 2/3/4 columns
            Motion
            • Active card pulse 2s ease-in-out infinite
            • Critical status blink 1s
            • Card box-shadow transition 300ms
            Token Dependencies
            • components.liveReadouts.cardBackground
            • components.liveReadouts.cardBorderRadius
            • components.liveReadouts.cardBorder
            • components.liveReadouts.valueColor
            • components.liveReadouts.valueFontFamily
            • components.liveReadouts.labelColor
            • components.liveReadouts.unitColor
            • components.liveReadouts.trendUpColor
            • components.liveReadouts.trendDownColor
            • components.liveReadouts.trendFlatColor
            • components.liveReadouts.statusNormal
            • components.liveReadouts.statusWarning
            • components.liveReadouts.statusCritical
            • components.liveReadouts.sparklineColor
            • components.liveReadouts.pulseGlowColor
            Content Slotsmetrics (ReadoutMetric[]), title (string)
            CMS Bindings
            • Metrics from CMS biometric data
            • Thresholds from CMS config
            Test Cases
            • Renders metric cards with labels
            • Displays value and unit
            • Shows trend arrow with correct direction
            • Renders status dot with correct class
            • Shows sparkline when data provided
            • Applies active pulse class
            • Renders title when provided
            • Passes className through

            Wellness Matrix

            88Overall Wellness
            😴SleepOptimal
            82
            Deep
            REM
            🍎NutritionAttention
            64
            🏃ActivityOptimal
            92
            Component Metadata
            Familydata-display
            FrameworksNext.js
            DescriptionBiometric wellness dashboard grid with hero composite score, category cards with sparklines, mini bar charts, and status indicators. Precision Noir design system.
            PropsWellnessMatrixProps (compositeScore?: number, categories: WellnessCategory[], columns?: 2|3)
            Stateswith-hero, no-hero, optimal-all, mixed-status, critical-alert, 2-col, 3-col
            A11y
            • Status text distinguishable without color alone
            • Score ring decorative (aria-hidden)
            • Semantic heading for hero label if used in page context
            Responsive
            • 3-column on desktop
            • 2-column on tablet
            • 1-column on mobile
            Motion
            • Critical card pulse 2s ease-in-out
            • Bar fill transition 0.4s ease
            • Ring stroke transition 0.6s ease
            Token Dependencies
            • components.wellnessMatrix.heroBackground
            • components.wellnessMatrix.heroScoreColor
            • components.wellnessMatrix.heroLabelColor
            • components.wellnessMatrix.heroRingTrack
            • components.wellnessMatrix.heroRingFill
            • components.wellnessMatrix.cardBackground
            • components.wellnessMatrix.cardBorderRadius
            • components.wellnessMatrix.cardBorder
            • components.wellnessMatrix.categoryIconColor
            • components.wellnessMatrix.scoreColor
            • components.wellnessMatrix.labelColor
            • components.wellnessMatrix.sparklineColor
            • components.wellnessMatrix.barFillColor
            • components.wellnessMatrix.barTrackColor
            • components.wellnessMatrix.statusOptimal
            • components.wellnessMatrix.statusAttention
            • components.wellnessMatrix.statusCritical
            • components.wellnessMatrix.glowShadow
            Content SlotscompositeLabel (string), categories (WellnessCategory[])
            CMS Bindings
            • Category names from CMS text fields
            • Scores from CMS number fields
            Test Cases
            • Renders hero composite score with ring
            • Hides hero when compositeScore is undefined
            • Renders all category cards
            • Shows status badge with correct class
            • Renders sparkline when data provided
            • Renders subcategory mini bars
            • Applies critical pulse class
            • Passes className through

            Toast / Snackbar

            Operation succeeded

            Detailed notification description.

            Component Metadata
            Familyfeedback
            FrameworksNext.js, Astro/EmDash
            DescriptionTemporary notification toast/snackbar with variant icons (success/warning/error/info), auto-dismiss progress bar, close button, stacking container, and ARIA live regions. Fundamental feedback primitive for pipeline events, brain sync status, and system alerts.
            PropsToastProps (toast: ToastItem, onDismiss?: (id) => void) + ToastContainerProps (toasts: ToastItem[], onDismiss?, position?: top-right|top-left|bottom-right|bottom-left)
            Statessuccess, warning, error, info, with-description, with-progress, dismissible
            A11y
            • role=alert for error variant
            • role=status for non-error variants
            • aria-live=assertive for errors, polite for others
            • Close button has aria-label
            • Container has aria-label
            Responsive
            • Max-width 400px
            • Full-width on small viewports
            • Stacks vertically
            Motion
            • Enter animation 250ms ease-out
            • Progress bar linear shrink
            Token Dependencies
            • components.toast.background
            • components.toast.borderRadius
            • components.toast.padding
            • components.toast.shadow
            • components.toast.textColor
            • components.toast.descriptionColor
            • components.toast.closeColor
            • components.toast.closeHoverColor
            • components.toast.iconSuccess
            • components.toast.iconWarning
            • components.toast.iconError
            • components.toast.iconInfo
            • components.toast.progressTrack
            • components.toast.progressFill
            • components.toast.maxWidth
            • components.toast.gap
            Content Slotstoast.title (string), toast.description (string)
            CMS Bindings
            • Notification content from CMS event system
            • Variant from CMS config
            Test Cases
            • Renders title
            • Renders description when provided
            • Applies variant class
            • Shows variant icon
            • Shows close button when onDismiss provided
            • Calls onDismiss with toast id
            • Shows progress bar when duration set
            • Container renders multiple toasts
            • Uses role=alert for error variant

            Breadcrumbs

            Component Metadata
            Familynavigation
            FrameworksNext.js, Astro/EmDash
            DescriptionNavigation breadcrumb trail with home icon, chevron separators, path truncation for deep hierarchies, and ARIA breadcrumb landmark. Supports custom separators, max visible items with ellipsis, and text truncation for long labels.
            PropsBreadcrumbsProps (items: BreadcrumbItem[], separator?: string, showHome?: boolean, truncate?: boolean, maxVisible?: number)
            Statesdefault, with-home, truncated, ellipsis, deep-path
            A11y
            • nav element with aria-label=Breadcrumb
            • aria-current=page on last item
            • Separators are aria-hidden
            • Home icon link has aria-label
            Responsive
            • Wraps on narrow viewports
            • Truncation for long labels
            Motion
            • Link hover color transition 150ms ease
            Token Dependencies
            • components.breadcrumbs.background
            • components.breadcrumbs.separatorColor
            • components.breadcrumbs.linkColor
            • components.breadcrumbs.linkHoverColor
            • components.breadcrumbs.currentColor
            • components.breadcrumbs.fontSize
            • components.breadcrumbs.gap
            • components.breadcrumbs.padding
            • components.breadcrumbs.truncateMaxWidth
            • components.breadcrumbs.homeIconColor
            • components.breadcrumbs.homeIconHoverColor
            • components.breadcrumbs.ellipsisColor
            Content Slotsitems[].label (string), items[].href (string)
            CMS Bindings
            • Path from CMS navigation tree
            • Labels from CMS page titles
            Test Cases
            • Renders all breadcrumb items
            • Last item has aria-current=page
            • Shows home icon by default
            • Hides home icon when showHome=false
            • Shows ellipsis when maxVisible set
            • Has nav with aria-label
            • Custom separator renders
            • Passes className through

            Badge / Tag

            Badge Label
            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionCompact inline label for status indicators, counts, categories, and removable tags. Five color variants (default/success/warning/error/info), two sizes (sm/md), optional status dot, and removable mode with close button.
            PropsBadgeProps (children: ReactNode, variant?: default|success|warning|error|info, size?: sm|md, dot?: boolean, removable?: boolean, onRemove?: () => void)
            Statesdefault, success, warning, error, info, with-dot, removable, sm, md
            A11y
            • Remove button has aria-label
            • Dot indicator is aria-hidden
            • Text content conveyed by label
            Responsive
            • Inline-flex, wraps naturally in flex containers
            Motion
            • Remove button hover color transition 150ms
            Token Dependencies
            • components.badge.fontSize
            • components.badge.fontWeight
            • components.badge.paddingX
            • components.badge.paddingY
            • components.badge.borderRadius
            • components.badge.defaultBackground
            • components.badge.defaultText
            • components.badge.successBackground
            • components.badge.successText
            • components.badge.warningBackground
            • components.badge.warningText
            • components.badge.errorBackground
            • components.badge.errorText
            • components.badge.infoBackground
            • components.badge.infoText
            • components.badge.dotSize
            • components.badge.removeColor
            • components.badge.removeHoverColor
            Content Slotschildren (ReactNode)
            CMS Bindings
            • Label from CMS string field
            • Variant from CMS select field
            Test Cases
            • Renders children
            • Applies variant class
            • Applies size class
            • Shows dot when dot=true
            • Shows remove button when removable
            • Calls onRemove on click
            • Hides remove button when not removable
            • Passes className through

            Skeleton

            Component Metadata
            Familyfeedback
            FrameworksNext.js, Astro/EmDash
            DescriptionLoading placeholder with shimmer pulse animation. Three variants (text/circle/rectangle), configurable dimensions, multi-line text support, and aria-hidden for accessibility. Composable for card, profile, and list loading states.
            PropsSkeletonProps (variant?: text|circle|rectangle, width?: string|number, height?: string|number, lines?: number)
            Statestext-single, text-multi, circle, rectangle, shimmer-pulse
            A11y
            • All skeleton elements are aria-hidden=true
            • Actual loading content should use aria-busy on parent
            Responsive
            • Width fills container by default
            • Circle maintains aspect ratio
            Motion
            • Pulse animation 1.5s ease-in-out infinite
            Token Dependencies
            • components.skeleton.baseColor
            • components.skeleton.highlightColor
            • components.skeleton.borderRadius
            • components.skeleton.animationDuration
            • components.skeleton.textHeight
            • components.skeleton.textSpacing
            • components.skeleton.circleSize
            • components.skeleton.opacity
            Content Slots
            CMS Bindings
            • Used as placeholder while CMS content loads
            Test Cases
            • Renders text variant by default
            • Renders circle variant
            • Renders rectangle variant
            • Renders multiple lines
            • Last line is shorter in multi-line
            • Has aria-hidden
            • Applies custom width
            • Passes className through

            Accordion

            Component Metadata
            Familylayout
            FrameworksNext.js, Astro/EmDash
            DescriptionCollapsible content sections with single or multi-expand modes, animated chevron rotation, dividers between items, and full ARIA accordion pattern. Use for FAQs, settings panels, documentation sections, and pipeline step details.
            PropsAccordionProps (items: AccordionItem[], multiple?: boolean, defaultOpen?: string[])
            Statescollapsed, expanded, hover, single-mode, multi-mode
            A11y
            • Button trigger with aria-expanded
            • aria-controls linking trigger to panel
            • Panel has role=region with aria-labelledby
            • hidden attribute when collapsed
            Responsive
            • Full-width on all breakpoints
            • Touch-friendly trigger target
            Motion
            • Chevron rotate 180deg transition
            • Background hover transition
            Token Dependencies
            • components.accordion.background
            • components.accordion.borderRadius
            • components.accordion.border
            • components.accordion.headerPadding
            • components.accordion.headerColor
            • components.accordion.headerHoverBackground
            • components.accordion.contentPadding
            • components.accordion.contentColor
            • components.accordion.chevronColor
            • components.accordion.chevronActiveColor
            • components.accordion.dividerColor
            • components.accordion.animationDuration
            Content Slotsitems[].title (string), items[].content (ReactNode)
            CMS Bindings
            • FAQ items from CMS collection
            • Section content from CMS portableText
            Test Cases
            • Renders all items
            • Expands on click
            • Collapses previously open in single mode
            • Multiple can be open in multi mode
            • Has aria-expanded
            • Panel has role=region
            • Default open items are expanded
            • Passes className through

            Tooltip

            Component Metadata
            Familyoverlay
            FrameworksNext.js, Astro/EmDash
            DescriptionAccessible tooltip overlay with placement variants (top, bottom, left, right), arrow indicator, configurable delay, and focus/hover trigger support. Uses role=tooltip with aria-describedby linking.
            PropsTooltipProps (content: ReactNode, children: ReactElement, placement?: TooltipPlacement, delay?: number)
            Stateshidden, visible, top, bottom, left, right
            A11y
            • role=tooltip on tooltip element
            • aria-describedby on trigger linking to tooltip
            • Keyboard accessible via focus/blur
            • Dismiss on Escape (planned)
            Responsive
            • Max-width constraint prevents overflow
            • Touch devices show on focus
            Motion
            • Fade-in animation on show
            • Configurable animation duration via token
            Token Dependencies
            • components.tooltip.background
            • components.tooltip.textColor
            • components.tooltip.borderRadius
            • components.tooltip.padding
            • components.tooltip.fontSize
            • components.tooltip.maxWidth
            • components.tooltip.shadow
            • components.tooltip.border
            • components.tooltip.arrowSize
            • components.tooltip.arrowColor
            • components.tooltip.zIndex
            • components.tooltip.animationDuration
            • components.tooltip.offsetDistance
            Content Slotscontent (ReactNode — string or rich JSX)
            CMS Bindings
            • Tooltip text from CMS field
            • Help text from content collection
            Test Cases
            • Hidden by default
            • Shows on hover
            • Hides on mouse leave
            • Shows on focus
            • Has role=tooltip
            • Applies placement class
            • Renders rich content
            • Passes className through

            Avatar

            +2
            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionUser avatar with initials fallback, five size variants (xs–xl), online/offline/busy status indicators, image support, and grouped layout with overflow count. Uses role=img with aria-label.
            PropsAvatarProps (src?: string, alt: string, size?: AvatarSize, status?: AvatarStatus) + AvatarGroupProps (children, max?: number)
            Stateswith-image, initials-fallback, online, offline, busy, grouped, overflow
            A11y
            • role=img on avatar with aria-label
            • Image aria-hidden when role=img provides label
            • Status dot aria-label for status
            • AvatarGroup role=group with aria-label
            Responsive
            • Fixed size via tokens
            • Group wraps naturally in flex
            Motion
            • No animation by default
            Token Dependencies
            • components.avatar.borderRadius
            • components.avatar.borderColor
            • components.avatar.borderWidth
            • components.avatar.background
            • components.avatar.textColor
            • components.avatar.fontWeight
            • components.avatar.sizeXs
            • components.avatar.sizeSm
            • components.avatar.sizeMd
            • components.avatar.sizeLg
            • components.avatar.sizeXl
            • components.avatar.statusDotSize
            • components.avatar.statusOnline
            • components.avatar.statusOffline
            • components.avatar.statusBusy
            • components.avatar.groupOverlap
            Content Slotsalt (string for initials), src (image URL)
            CMS Bindings
            • User profile image from CMS
            • Author avatar from collection
            Test Cases
            • Renders initials from name
            • Renders image when src provided
            • Applies size class
            • Shows status dot
            • Has role=img with aria-label
            • AvatarGroup renders children
            • AvatarGroup shows overflow count
            • Passes className through

            Divider

            LeftRight
            Component Metadata
            Familylayout
            FrameworksNext.js, Astro/EmDash
            DescriptionVisual separator supporting horizontal/vertical orientation, default/accent color variants, and centered label text with line masking. Uses role=separator with aria-orientation.
            PropsDividerProps (orientation?: DividerOrientation, variant?: DividerVariant, label?: string)
            Stateshorizontal, vertical, default, accent, labeled
            A11y
            • role=separator with aria-orientation
            • Decorative label not separately announced
            Responsive
            • Horizontal fills container width
            • Vertical stretches to parent height
            Motion
            • No animation
            Token Dependencies
            • components.divider.color
            • components.divider.thickness
            • components.divider.spacing
            • components.divider.labelColor
            • components.divider.labelFontSize
            • components.divider.labelBackground
            • components.divider.labelPadding
            • components.divider.accentColor
            Content Slotslabel (string — optional centered text)
            CMS Bindings
            • Section divider label from CMS field
            Test Cases
            • Renders horizontal by default
            • Renders vertical orientation
            • Applies accent variant
            • Shows label text
            • Has role=separator
            • Has aria-orientation
            • Label mode has two lines
            • Passes className through

            Switch

            Component Metadata
            Familyforms
            FrameworksNext.js, Astro/EmDash
            DescriptionToggle switch with pill track, sliding thumb, label, disabled state, keyboard support (Space/Enter), focus ring, and role=switch with aria-checked. Animated on/off transitions.
            PropsSwitchProps (checked?: boolean, onChange?: (checked: boolean) => void, label?: string, disabled?: boolean)
            Statesoff, on, disabled-off, disabled-on, focus-visible
            A11y
            • role=switch with aria-checked
            • aria-disabled when disabled
            • Keyboard toggle via Space and Enter
            • Focus ring on keyboard navigation
            Responsive
            • Fixed track size from tokens
            • Label wraps naturally
            Motion
            • Thumb slides with transition
            • Track background fades
            Token Dependencies
            • components.switch.trackWidth
            • components.switch.trackHeight
            • components.switch.trackBorderRadius
            • components.switch.trackOffBackground
            • components.switch.trackOnBackground
            • components.switch.trackDisabledBackground
            • components.switch.thumbSize
            • components.switch.thumbColor
            • components.switch.thumbOffset
            • components.switch.labelColor
            • components.switch.labelFontSize
            • components.switch.labelGap
            • components.switch.animationDuration
            • components.switch.focusRing
            Content Slotslabel (string — optional descriptive text)
            CMS Bindings
            • Toggle label from CMS field
            • Default state from CMS boolean
            Test Cases
            • Renders unchecked by default
            • Renders checked state
            • Toggles on click
            • Shows label text
            • Disabled prevents toggle
            • Has role=switch
            • Has aria-checked
            • Passes className through

            Chip

            Design SystemSelectedRemovableWith Icon
            Component Metadata
            Familydata-display
            FrameworksNext.js, Astro/EmDash
            DescriptionCompact pill-shaped element for tags, filters, and selections. Supports selected state, removable mode, leading icon, and keyboard interaction. Uses role=option with aria-selected for interactive chips.
            PropsChipProps (children: ReactNode, selected?: boolean, onClick?: () => void, removable?: boolean, onRemove?: () => void, icon?: ReactNode)
            Statesdefault, selected, hover, removable, with-icon
            A11y
            • role=option with aria-selected for interactive chips
            • Keyboard selection via Space and Enter
            • Remove button with aria-label
            • Icon aria-hidden
            Responsive
            • Wraps in flex container
            • Fixed height from padding tokens
            Motion
            • Background color transition on hover
            • Remove icon color transition
            Token Dependencies
            • components.chip.background
            • components.chip.textColor
            • components.chip.borderRadius
            • components.chip.paddingX
            • components.chip.paddingY
            • components.chip.fontSize
            • components.chip.fontWeight
            • components.chip.gap
            • components.chip.selectedBackground
            • components.chip.selectedTextColor
            • components.chip.hoverBackground
            • components.chip.removeColor
            • components.chip.removeHoverColor
            Content Slotschildren (ReactNode — label), icon (ReactNode — leading visual)
            CMS Bindings
            • Tag list from CMS taxonomy
            • Category filters from collection
            Test Cases
            • Renders children as label
            • Applies selected class
            • Calls onClick on click
            • Shows remove button when removable
            • Calls onRemove on remove click
            • Renders icon
            • Has role=option when interactive
            • Passes className through

            Dropdown

            Component Metadata
            Familyforms
            FrameworksNext.js, Astro/EmDash
            DescriptionCustom dropdown select with trigger button, floating menu, keyboard navigation (Enter/Space/Escape/ArrowDown), outside-click close, selected item highlight, and placeholder support. Uses aria-haspopup and role=listbox.
            PropsDropdownProps (options: DropdownOption[], value?: string, onChange?: (value: string) => void, placeholder?: string)
            Statesclosed, open, with-selection, placeholder, hover-item
            A11y
            • Trigger has aria-haspopup=listbox and aria-expanded
            • Menu has role=listbox with aria-label
            • Items have role=option with aria-selected
            • Keyboard: Enter/Space toggle, Escape close, ArrowDown open
            Responsive
            • Min-width from CSS
            • Menu matches trigger width
            Motion
            • No animation by default
            Token Dependencies
            • components.dropdown.triggerBackground
            • components.dropdown.triggerBorder
            • components.dropdown.triggerBorderRadius
            • components.dropdown.triggerPadding
            • components.dropdown.triggerColor
            • components.dropdown.triggerFontSize
            • components.dropdown.menuBackground
            • components.dropdown.menuBorder
            • components.dropdown.menuBorderRadius
            • components.dropdown.menuShadow
            • components.dropdown.menuMaxHeight
            • components.dropdown.itemPadding
            • components.dropdown.itemColor
            • components.dropdown.itemHoverBackground
            • components.dropdown.itemSelectedColor
            • components.dropdown.placeholderColor
            • components.dropdown.chevronColor
            • components.dropdown.zIndex
            Content Slotsoptions[].label (string), placeholder (string)
            CMS Bindings
            • Option list from CMS taxonomy
            • Default value from CMS field
            Test Cases
            • Renders trigger with placeholder
            • Opens menu on click
            • Shows all options
            • Selects option on click
            • Closes on selection
            • Shows selected label
            • Has aria-haspopup
            • Passes className through

            Input

            Your key is stored locally
            Must be at least 3 characters
            Component Metadata
            Familyforms
            FrameworksNext.js, Astro/EmDash
            DescriptionText input with label, helper text, error state with role=alert, focus ring, disabled state, and all native HTML input attributes. Uses aria-invalid and aria-describedby for accessible error/helper linking.
            PropsInputProps extends InputHTMLAttributes (label?: string, helper?: string, error?: string)
            Statesdefault, focused, error, disabled, with-label, with-helper
            A11y
            • Label linked via htmlFor/id
            • aria-invalid when error
            • aria-describedby linking to error or helper
            • Error message has role=alert
            Responsive
            • Full-width by default
            • Max-width set by parent container
            Motion
            • Border color and box-shadow transition on focus
            Token Dependencies
            • components.input.background
            • components.input.borderColor
            • components.input.borderRadius
            • components.input.borderWidth
            • components.input.padding
            • components.input.fontSize
            • components.input.textColor
            • components.input.placeholderColor
            • components.input.focusBorderColor
            • components.input.focusRing
            • components.input.errorBorderColor
            • components.input.errorColor
            • components.input.labelColor
            • components.input.labelFontSize
            • components.input.helperColor
            • components.input.helperFontSize
            • components.input.disabledOpacity
            Content Slotslabel (string), helper (string), error (string), placeholder (string)
            CMS Bindings
            • Field label from CMS schema
            • Validation message from CMS
            Test Cases
            • Renders input element
            • Shows label text
            • Shows helper text
            • Shows error message
            • Error has role=alert
            • Has aria-invalid when error
            • Disabled state applied
            • Passes className through

            Modal / Dialog

            Component Metadata
            Familyoverlays
            FrameworksNext.js, Astro/EmDash
            DescriptionAccessible modal dialog with overlay backdrop, escape key close, body scroll lock, slide-up animation, close button, and optional title. Uses role=dialog with aria-modal=true.
            PropsModalProps (open: boolean, onClose: () => void, title?: string, children: ReactNode, className?: string)
            Statesopen, closed, with-title, without-title
            A11y
            • role=dialog with aria-modal=true
            • aria-label from title or fallback 'Dialog'
            • Close button with aria-label='Close dialog'
            • Escape key closes modal
            Responsive
            • Max-width constrained with 1rem margin
            • Centers vertically and horizontally
            Motion
            • Overlay fade-in animation
            • Content slide-up animation
            Token Dependencies
            • components.modal.overlayBackground
            • components.modal.background
            • components.modal.borderRadius
            • components.modal.border
            • components.modal.shadow
            • components.modal.padding
            • components.modal.maxWidth
            • components.modal.titleColor
            • components.modal.titleFontSize
            • components.modal.bodyColor
            • components.modal.closeColor
            • components.modal.closeHoverColor
            • components.modal.zIndex
            • components.modal.animationDuration
            Content Slotstitle (string), children (ReactNode)
            CMS Bindings
            • Dialog title from CMS
            • Dialog body content from CMS
            Test Cases
            • Renders when open
            • Does not render when closed
            • Shows title when provided
            • Renders children
            • Has aria-modal attribute
            • Calls onClose when close button clicked
            • Has close button with aria-label
            • Passes className through

            Textarea

            Markdown supported
            Must be at least 20 characters
            Component Metadata
            Familyforms
            FrameworksNext.js, Astro/EmDash
            DescriptionMulti-line text input with label, helper text, error state with role=alert, focus ring, vertical resize, disabled state, and all native textarea attributes. Mirrors Input API for consistency.
            PropsTextareaProps extends TextareaHTMLAttributes (label?: string, helper?: string, error?: string)
            Statesdefault, focused, error, disabled, with-label, with-helper
            A11y
            • Label linked via htmlFor/id
            • aria-invalid when error
            • aria-describedby linking to error or helper
            • Error message has role=alert
            Responsive
            • Full-width by default
            • Min-height set by token
            • Vertical resize only
            Motion
            • Border color and box-shadow transition on focus
            Token Dependencies
            • components.textarea.background
            • components.textarea.borderColor
            • components.textarea.borderRadius
            • components.textarea.borderWidth
            • components.textarea.padding
            • components.textarea.fontSize
            • components.textarea.textColor
            • components.textarea.placeholderColor
            • components.textarea.focusBorderColor
            • components.textarea.focusRing
            • components.textarea.errorBorderColor
            • components.textarea.errorColor
            • components.textarea.labelColor
            • components.textarea.labelFontSize
            • components.textarea.helperColor
            • components.textarea.helperFontSize
            • components.textarea.minHeight
            • components.textarea.disabledOpacity
            • components.textarea.resizeColor
            Content Slotslabel (string), helper (string), error (string), placeholder (string)
            CMS Bindings
            • Field label from CMS schema
            • Validation message from CMS
            Test Cases
            • Renders textarea element
            • Shows label text
            • Shows helper text
            • Shows error message
            • Error has role=alert
            • Has aria-invalid when error
            • Disabled state applied
            • Passes className through

            Select

            Pick the best option
            Please select a value
            Component Metadata
            Familyforms
            FrameworksNext.js, Astro/EmDash
            DescriptionNative select input with label, helper text, error state with role=alert, custom chevron icon, focus ring, disabled state, and all native select attributes. Consistent with Input/Textarea form family.
            PropsSelectProps extends SelectHTMLAttributes (label?: string, helper?: string, error?: string, placeholder?: string, options: SelectOption[])
            Statesdefault, focused, error, disabled, with-label, with-placeholder
            A11y
            • Label linked via htmlFor/id
            • aria-invalid when error
            • aria-describedby linking to error or helper
            • Error message has role=alert
            Responsive
            • Full-width by default
            • Custom chevron icon via SVG
            Motion
            • Border color and box-shadow transition on focus
            Token Dependencies
            • components.select.background
            • components.select.borderColor
            • components.select.borderRadius
            • components.select.borderWidth
            • components.select.padding
            • components.select.fontSize
            • components.select.textColor
            • components.select.placeholderColor
            • components.select.focusBorderColor
            • components.select.focusRing
            • components.select.errorBorderColor
            • components.select.errorColor
            • components.select.labelColor
            • components.select.labelFontSize
            • components.select.helperColor
            • components.select.helperFontSize
            • components.select.chevronColor
            • components.select.disabledOpacity
            Content Slotslabel (string), helper (string), error (string), placeholder (string), options (SelectOption[])
            CMS Bindings
            • Field label from CMS schema
            • Options from CMS enum fields
            • Validation from CMS
            Test Cases
            • Renders select element
            • Shows label text
            • Shows helper text
            • Shows error message
            • Error has role=alert
            • Has aria-invalid when error
            • Renders all options
            • Passes className through

            Table

            Sample component inventory
            ComponentFamilyTokens
            ButtonAction9
            CardLayout4
            TableData14
            Component Metadata
            Familydata
            FrameworksNext.js, Astro/EmDash
            DescriptionData table with typed column definitions, row hover, optional striped rows, caption, and responsive horizontal scroll. Uses semantic HTML with role=table, scope=col headers.
            PropsTableProps (columns: TableColumn[], data: Record<string, ReactNode>[], caption?: string, striped?: boolean, className?: string)
            Statesdefault, striped, with-caption, row-hover
            A11y
            • role=table on table element
            • scope=col on header cells
            • Caption element for table description
            • Semantic thead/tbody structure
            Responsive
            • Horizontal scroll on overflow
            • Border radius on container
            Motion
            • Row hover background transition
            Token Dependencies
            • components.table.background
            • components.table.borderColor
            • components.table.borderRadius
            • components.table.headerBackground
            • components.table.headerColor
            • components.table.headerFontSize
            • components.table.headerFontWeight
            • components.table.cellPadding
            • components.table.cellColor
            • components.table.cellFontSize
            • components.table.rowHoverBackground
            • components.table.stripeBackground
            • components.table.captionColor
            • components.table.captionFontSize
            Content Slotscolumns (TableColumn[]), data (Record[]), caption (string)
            CMS Bindings
            • Column definitions from CMS schema
            • Row data from CMS collections
            Test Cases
            • Renders table element
            • Renders column headers
            • Renders row data
            • Shows caption when provided
            • Applies striped class to odd rows
            • Header cells have scope=col
            • Renders correct number of rows
            • Passes className through

            Empty State

            No components yet

            Create your first component to populate this section.

            Component Metadata
            Familyfeedback
            FrameworksNext.js, Astro/EmDash
            DescriptionEmpty state placeholder with icon, title, description, and action slot. Dashed border container for empty lists, search results, and initial states. Uses role=status with aria-label.
            PropsEmptyStateProps (icon?: ReactNode, title: string, description?: string, action?: ReactNode, className?: string)
            Statesminimal (title only), with-icon, with-description, with-action, full
            A11y
            • role=status for live region semantics
            • aria-label from title
            • Icon container is aria-hidden
            • Action slot is fully interactive
            Responsive
            • Centers content
            • Max-width on description for readability
            Motion
            • No animation — static placeholder
            Token Dependencies
            • components.emptyState.background
            • components.emptyState.borderColor
            • components.emptyState.borderRadius
            • components.emptyState.padding
            • components.emptyState.iconColor
            • components.emptyState.iconSize
            • components.emptyState.titleColor
            • components.emptyState.titleFontSize
            • components.emptyState.descriptionColor
            • components.emptyState.descriptionFontSize
            • components.emptyState.gap
            Content Slotsicon (ReactNode), title (string), description (string), action (ReactNode)
            CMS Bindings
            • Title from CMS
            • Description from CMS
            • Action label from CMS
            Test Cases
            • Renders with title
            • Has role=status
            • Shows description when provided
            • Renders icon when provided
            • Renders action when provided
            • Has aria-label from title
            • Icon is aria-hidden
            • Passes className through

            Spinner

            Component Metadata
            Familyfeedback
            FrameworksNext.js, Astro/EmDash
            DescriptionAnimated loading spinner with SVG arc rotation, 3 sizes (sm/md/lg), optional label, and role=status for accessibility. Uses CSS keyframe animation with token-controlled speed.
            PropsSpinnerProps (size?: SpinnerSize, label?: string, className?: string)
            Statessm, md, lg, with-label, without-label
            A11y
            • role=status for live region
            • aria-label defaults to 'Loading'
            • Custom label overrides aria-label
            • SVG is aria-hidden
            Responsive
            • Inline-flex for inline usage
            • Size controlled by tokens
            Motion
            • Continuous rotation animation at token-controlled speed
            Token Dependencies
            • components.spinner.color
            • components.spinner.trackColor
            • components.spinner.sizeSm
            • components.spinner.sizeMd
            • components.spinner.sizeLg
            • components.spinner.strokeWidth
            • components.spinner.speed
            • components.spinner.labelColor
            • components.spinner.labelFontSize
            • components.spinner.gap
            Content Slotslabel (string)
            CMS Bindings
            • Loading message from CMS
            Test Cases
            • Renders spinner
            • Has aria-label Loading by default
            • Uses custom label as aria-label
            • Shows label text
            • Renders SVG
            • Applies size class
            • SVG is aria-hidden
            • Passes className through

            Tag

            DefaultActivePendingBlockedFeatured
            Component Metadata
            Familydata
            FrameworksNext.js, Astro/EmDash
            DescriptionInline label for categorization, status, and metadata. 4 color variants (default, success, warning, error) with optional leading icon. Non-interactive — use Chip for interactive tags.
            PropsTagProps (children: ReactNode, variant?: TagVariant, icon?: ReactNode, className?: string)
            Statesdefault, success, warning, error, with-icon
            A11y
            • Icon container is aria-hidden
            • Text content is readable by screen readers
            • Color is not the only differentiator (text labels required)
            Responsive
            • Inline-flex, wraps naturally in flex containers
            Motion
            • No animation — static label
            Token Dependencies
            • components.tag.background
            • components.tag.textColor
            • components.tag.borderRadius
            • components.tag.paddingX
            • components.tag.paddingY
            • components.tag.fontSize
            • components.tag.fontWeight
            • components.tag.gap
            • components.tag.successBackground
            • components.tag.successColor
            • components.tag.warningBackground
            • components.tag.warningColor
            • components.tag.errorBackground
            • components.tag.errorColor
            Content Slotschildren (ReactNode), icon (ReactNode)
            CMS Bindings
            • Tag label from CMS taxonomy
            • Variant from CMS status field
            Test Cases
            • Renders with children
            • Applies default variant class
            • Applies success variant
            • Applies warning variant
            • Applies error variant
            • Renders icon when provided
            • Icon is aria-hidden
            • Passes className through

            Sidebar

            Content area
            Component Metadata
            Familynavigation
            FrameworksNext.js, Astro/EmDash
            DescriptionVertical navigation sidebar with sectioned links, active state (aria-current=page), optional icons, section labels, and brand header. Token-driven width, colors, and spacing.
            PropsSidebarProps (header?: string, sections: SidebarSection[], className?: string)
            Statesdefault, with-header, with-sections, active-link
            A11y
            • role=navigation with aria-label
            • aria-current=page on active link
            • Icon containers are aria-hidden
            • Semantic list structure (ul/li)
            Responsive
            • Fixed width from token
            • Full height within container
            Motion
            • Link hover color and background transition
            Token Dependencies
            • components.sidebar.background
            • components.sidebar.borderColor
            • components.sidebar.width
            • components.sidebar.padding
            • components.sidebar.headerColor
            • components.sidebar.headerFontSize
            • components.sidebar.linkColor
            • components.sidebar.linkHoverColor
            • components.sidebar.linkHoverBackground
            • components.sidebar.linkActiveColor
            • components.sidebar.linkActiveBackground
            • components.sidebar.linkPadding
            • components.sidebar.linkBorderRadius
            • components.sidebar.linkFontSize
            • components.sidebar.sectionGap
            • components.sidebar.sectionLabelColor
            • components.sidebar.sectionLabelFontSize
            Content Slotsheader (string), sections (SidebarSection[]), link icons (ReactNode)
            CMS Bindings
            • Navigation structure from CMS
            • Active state from current route
            Test Cases
            • Renders navigation
            • Renders header when provided
            • Renders section labels
            • Renders all links
            • Active link has aria-current=page
            • Inactive link has no aria-current
            • Has aria-label for navigation
            • Passes className through

            Component Catalog

            Every variant and size of the shared UI components.

            Button

            Primary Variant

            Secondary Variant

            Disabled States

            Component Metadata
            Familyaction
            FrameworksNext.js, Astro/EmDash
            DescriptionPrimary action button with variant and size props. Token-driven styling via CSS custom properties.
            PropsButtonProps (variant: primary|secondary, size: sm|md|lg, children, ...ButtonHTMLAttributes)
            Statesdefault, hover, active, focus, disabled
            A11y
            • Minimum 4.5:1 contrast ratio
            • Visible focus indicator
            • Keyboard activatable
            Responsive
            • Full-width on mobile (< 640px)
            • Inline on desktop
            Motion
            • Hover scale transition 150ms ease
            Token Dependencies
            • components.button.primary.background
            • components.button.primary.backgroundHover
            • components.button.primary.text
            • components.button.primary.borderRadius
            • components.button.primary.paddingX
            • components.button.primary.paddingY
            • components.button.secondary.background
            • components.button.secondary.border
            • components.button.secondary.text
            Content Slotschildren (ReactNode)
            CMS Bindings
            • Button label from CMS text field
            • Link target from CMS URL field
            Test Cases
            • Renders primary variant
            • Renders secondary variant
            • Handles click events
            • Disabled state blocks interaction

            Card

            Default (no title)

            A card without a title prop renders only the body content.

            With Title

            Card Title

            A card with a title prop renders a header section above the body.

            Nested Content

            Outer Card

            Cards support arbitrary nested content:

            Inner Card

            This card is nested inside the outer card.

            Component Metadata
            Familylayout
            FrameworksNext.js, Astro/EmDash
            DescriptionContent container with optional title header. Token-driven background, border-radius, padding, and shadow.
            PropsCardProps (title?: string, children, ...HTMLAttributes<HTMLDivElement>)
            Statesdefault, hover
            A11y
            • Semantic heading level in title
            • Sufficient contrast for card content
            Responsive
            • Full-width on mobile
            • Grid-based on desktop
            Motion
              Token Dependencies
              • components.card.background
              • components.card.borderRadius
              • components.card.padding
              • components.card.shadow
              Content Slotstitle (string), children (ReactNode)
              CMS Bindings
              • Title from CMS string field
              • Body from CMS portableText
              Test Cases
              • Renders with title
              • Renders without title
              • Passes className through

              Tabs

              Interactive Demo

              The component catalog demonstrates every shared component from the packages/ui library. Each component consumes CSS custom properties from the token pipeline.

              Component Metadata
              Familynavigation
              FrameworksNext.js
              DescriptionClient-side tabbed interface with ARIA roles. Manages active tab state internally.
              PropsTabsProps (tabs: TabItem[], defaultIndex?: number, className?: string)
              Statesdefault, active-tab, hover-tab, focus-tab
              A11y
              • role=tablist on container
              • role=tab on triggers
              • role=tabpanel on content
              • aria-selected state
              Responsive
              • Horizontal tabs on desktop
              • Scrollable on mobile
              Motion
                Token Dependencies
                • components.tabs.borderColor
                • components.tabs.triggerColor
                • components.tabs.triggerHoverColor
                • components.tabs.triggerActiveColor
                • components.tabs.triggerActiveBorder
                • components.tabs.panelColor
                • components.tabs.paddingX
                • components.tabs.paddingY
                Content Slotstabs[].content (ReactNode)
                CMS Bindings
                • Tab labels from CMS string array
                • Tab content from CMS portableText array
                Test Cases
                • Renders all tabs
                • Switches active tab on click
                • Defaults to specified index

                Alerts

                All Variants

                Dismissible

                Component Metadata
                Familyfeedback
                FrameworksNext.js, Astro/EmDash
                DescriptionDismissible notification banner with success/warning/error/info variants. Token-driven variant colors.
                PropsAlertProps (variant: AlertVariant, children, dismissible?: boolean, onDismiss?: () => void)
                Statesvisible, dismissed, hover-dismiss
                A11y
                • role=alert for screen reader announcement
                • Dismiss button has aria-label
                Responsive
                • Full-width on all breakpoints
                Motion
                  Token Dependencies
                  • components.alert.borderRadius
                  • components.alert.padding
                  • components.alert.paddingX
                  • components.alert.success.background
                  • components.alert.success.border
                  • components.alert.success.text
                  • components.alert.warning.background
                  • components.alert.warning.border
                  • components.alert.warning.text
                  • components.alert.error.background
                  • components.alert.error.border
                  • components.alert.error.text
                  • components.alert.info.background
                  • components.alert.info.border
                  • components.alert.info.text
                  Content Slotschildren (ReactNode)
                  CMS Bindings
                  • Alert message from CMS text field
                  • Variant from CMS select field
                  Test Cases
                  • Renders each variant with correct icon
                  • Dismissible hides on click
                  • Calls onDismiss callback

                  Pricing Table

                  3-Tier Layout

                  Starter

                  $0/mo
                  • 1 design system
                  • 50 tokens
                  • 2 surfaces
                  Recommended

                  Pro

                  $49/mo
                  • Unlimited systems
                  • Unlimited tokens
                  • ADW pipeline

                  Enterprise

                  Custom
                  • Everything in Pro
                  • SSO
                  • SLA
                  Component Metadata
                  Familydata-display
                  FrameworksNext.js, Astro/EmDash
                  DescriptionMulti-tier pricing comparison with featured tier highlighting. Token-driven card styles and CTA buttons.
                  PropsPricingTableProps (tiers: PricingTier[], onTierSelect?: (tier) => void)
                  Statesdefault, featured-tier, hover-cta, active-cta
                  A11y
                  • Semantic list for features
                  • Button for CTA (not link)
                  • Sufficient contrast on featured badge
                  Responsive
                  • Single column on mobile
                  • Multi-column grid on desktop
                  Motion
                  • Hover elevation on pricing cards
                  Token Dependencies
                  • components.pricingCard.background
                  • components.pricingCard.backgroundFeatured
                  • components.pricingCard.borderRadius
                  • components.pricingCard.padding
                  • components.pricingCard.border
                  • components.pricingCard.borderFeatured
                  • components.pricingCard.priceColor
                  • components.pricingCard.labelColor
                  • components.pricingCard.featureColor
                  • components.pricingCard.checkColor
                  • components.pricingCard.shadow
                  • components.pricingCard.shadowFeatured
                  Content Slotstiers[].features (string[]), tiers[].cta (string)
                  CMS Bindings
                  • Tier data from CMS JSON field
                  • Feature lists from CMS text arrays
                  Test Cases
                  • Renders all tiers
                  • Featured tier has badge
                  • onTierSelect fires on CTA click

                  Testimonial Wall

                  Social Proof Grid

                  J

                  Jane Smith

                  CTO, Example Corp

                  “This platform transformed our design workflow.”
                  J

                  John Doe

                  Design Lead, Agency X

                  “Token-driven components saved us weeks of work.”
                  Component Metadata
                  Familydata-display
                  FrameworksNext.js, Astro/EmDash
                  DescriptionGrid of customer testimonials with avatar, quote, star rating, and role. Token-driven card and star colors.
                  PropsTestimonialWallProps (testimonials: Testimonial[])
                  Statesdefault, hover-card
                  A11y
                  • Star rating has aria-label
                  • Blockquote for quotes
                  • Avatar alt text
                  Responsive
                  • Single column on mobile
                  • 2-3 column grid on desktop
                  Motion
                  • Hover background transition on cards
                  Token Dependencies
                  • components.testimonial.background
                  • components.testimonial.backgroundHover
                  • components.testimonial.borderRadius
                  • components.testimonial.padding
                  • components.testimonial.border
                  • components.testimonial.avatarBorder
                  • components.testimonial.avatarSize
                  • components.testimonial.quoteColor
                  • components.testimonial.nameColor
                  • components.testimonial.roleColor
                  • components.testimonial.starColor
                  • components.testimonial.starEmpty
                  Content Slotstestimonials[].quote (string), testimonials[].avatarUrl (string)
                  CMS Bindings
                  • Testimonials from CMS collection with name/role/quote/rating fields
                  Test Cases
                  • Renders all testimonials
                  • Avatar placeholder when no URL
                  • Star rating reflects count

                  Metrics Panel

                  KPI Grid

                  Revenue

                  $48K

                  +12%

                  Users

                  2.8K

                  +8%

                  Churn

                  3.2%

                  -0.4%
                  Component Metadata
                  Familydata-display
                  FrameworksNext.js
                  DescriptionGrid of metric cards with trend indicators (up/down/flat) and status colors (good/warning/critical). Configurable column count.
                  PropsMetricsPanelProps (metrics: MetricItem[], columns?: 2|3|4)
                  Statesdefault, status-good, status-warning, status-critical
                  A11y
                  • Trend arrows use aria-hidden
                  • Status conveyed by color and text
                  Responsive
                  • 2 columns on mobile
                  • configurable columns (2-4) on desktop
                  Motion
                    Token Dependencies
                    • components.metricsPanel.background
                    • components.metricsPanel.borderRadius
                    • components.metricsPanel.padding
                    • components.metricsPanel.border
                    • components.metricsPanel.valueColor
                    • components.metricsPanel.labelColor
                    • components.metricsPanel.trendUp
                    • components.metricsPanel.trendDown
                    • components.metricsPanel.trendFlat
                    • components.metricsPanel.statusGood
                    • components.metricsPanel.statusWarning
                    • components.metricsPanel.statusCritical
                    Content Slotsmetrics[].label (string), metrics[].value (string)
                    CMS Bindings
                    • Metrics from CMS JSON field or API endpoint
                    Test Cases
                    • Renders all metrics
                    • Correct trend arrow direction
                    • Status class applied

                    Author Bio Card

                    Vertical Layout

                    J
                    42 articles

                    Jane Writer

                    Senior Editor

                    Covers enterprise technology and design systems.

                    A
                    28 articles

                    Alex Dev

                    Staff Engineer

                    Specializes in component architecture and tokens.

                    Component Metadata
                    Familydata-display
                    FrameworksNext.js, Astro/EmDash
                    DescriptionAuthor profile card with avatar, bio, article count badge, and social links. Vertical and horizontal layout variants.
                    PropsAuthorBioCardProps (author: AuthorProfile, layout?: vertical|horizontal)
                    Statesdefault, hover-social-link
                    A11y
                    • Social links have title attribute
                    • Avatar has alt text
                    • External links have rel=noopener
                    Responsive
                    • Vertical layout on mobile
                    • Horizontal layout option on desktop
                    Motion
                    • Social link hover color transition
                    Token Dependencies
                    • components.authorBio.background
                    • components.authorBio.borderRadius
                    • components.authorBio.padding
                    • components.authorBio.border
                    • components.authorBio.avatarSize
                    • components.authorBio.avatarBorder
                    • components.authorBio.nameColor
                    • components.authorBio.roleColor
                    • components.authorBio.bioColor
                    • components.authorBio.socialColor
                    • components.authorBio.socialHover
                    • components.authorBio.badgeBackground
                    • components.authorBio.badgeText
                    Content Slotsauthor.bio (string), author.socialLinks (SocialLink[])
                    CMS Bindings
                    • Author data from EmDash authors collection
                    Test Cases
                    • Renders vertical layout
                    • Renders horizontal layout
                    • Shows article count badge
                    • Social links open in new tab

                    Feature Comparison Table

                    Accessible Data Table

                    FeatureBasicPro
                    Tokens
                    Components
                    ADW Pipeline
                    Component Metadata
                    Familydata-display
                    FrameworksNext.js, Astro/EmDash
                    DescriptionAccessible comparison table with yes/no/partial support icons, column highlighting, and tooltips. Horizontally scrollable on mobile.
                    PropsFeatureComparisonTableProps (columns: ComparisonColumn[], features: ComparisonFeature[])
                    Statesdefault, highlighted-column, tooltip-visible
                    A11y
                    • role=table on table element
                    • scope=col on header cells
                    • aria-label on support icons
                    • Scrollable region has tabIndex and aria-label
                    Responsive
                    • Horizontally scrollable on mobile
                    • Full table on desktop
                    Motion
                      Token Dependencies
                      • components.comparisonTable.background
                      • components.comparisonTable.headerBackground
                      • components.comparisonTable.borderRadius
                      • components.comparisonTable.border
                      • components.comparisonTable.rowStripe
                      • components.comparisonTable.headerText
                      • components.comparisonTable.cellText
                      • components.comparisonTable.checkColor
                      • components.comparisonTable.crossColor
                      • components.comparisonTable.partialColor
                      • components.comparisonTable.featureLabelColor
                      • components.comparisonTable.tooltipBackground
                      • components.comparisonTable.tooltipText
                      Content Slotsfeatures[].name (string), features[].tooltip (string), columns[].name (string)
                      CMS Bindings
                      • Feature data from CMS JSON field
                      • Column definitions from CMS collection
                      Test Cases
                      • Renders all columns and rows
                      • Highlighted column has class
                      • Tooltip displays on hover
                      • Alternating row stripes

                      Timeline

                      Vertical chronological feed — commits, deploys, approvals, publishes, pipeline runs. First component produced by the design-to-code pipeline (Stitch → Tokens → React).

                      Activity Feed with Filters

                      Pipeline

                      Design-to-Code Pipeline Run

                      Timeline component — full E2E automation

                      Success
                      Deploy

                      Production Deploy

                      PM2 restart, all routes 200

                      Success
                      Commit

                      test(ui): unit tests

                      33 tests passing via vitest

                      Approval

                      Drift Score: 100/100

                      Success
                      Publish

                      Architecture Docs Published

                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionVertical chronological feed of events (commits, deploys, approvals, publishes, pipeline runs) with type filtering and status badges. Pipeline-generated via design-to-code automation.
                      PropsTimelineProps (events: TimelineEvent[], filters?: EventType[], className?: string)
                      Statesdefault, filtered, empty
                      A11y
                      • role=feed on container
                      • aria-posinset/aria-setsize on events
                      • aria-pressed on filter buttons
                      • Keyboard navigable filters
                      Responsive
                      • Full-width on all breakpoints
                      • Stacked layout
                      Motion
                      • Filter transition 150ms ease
                      Token Dependencies
                      • components.timeline.lineColor
                      • components.timeline.eventBackground
                      • components.timeline.eventBorder
                      • components.timeline.eventBorderRadius
                      • components.timeline.eventPadding
                      • components.timeline.iconBackground
                      • components.timeline.iconColor
                      • components.timeline.titleColor
                      • components.timeline.descriptionColor
                      • components.timeline.timestampColor
                      • components.timeline.badgeSuccessBg
                      • components.timeline.badgeErrorBg
                      • components.timeline.badgeWarningBg
                      • components.timeline.badgePendingBg
                      • components.timeline.badgeText
                      • components.timeline.filterActiveBg
                      • components.timeline.filterActiveText
                      Content Slotsevents (TimelineEvent[])
                      CMS Bindings
                      • Event data from CMS collection
                      • Filter types from CMS config
                      Test Cases
                      • Renders all events
                      • Filters by event type
                      • Shows status badges
                      • Empty state message

                      Score Gauge

                      Circular SVG gauge with score, label, trend, and status. Third pipeline-generated component — first to complete the full Stitch → Penpot → Tokens → Code pipeline.

                      All Sizes

                      85

                      Small

                      +3%
                      62

                      Medium

                      -8%
                      94

                      Large

                      +12%

                      Status Variants

                      75

                      Default

                      92

                      Good

                      55

                      Warning

                      23

                      Critical

                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionCircular SVG gauge with score value, label, and optional trend indicator. Three sizes (sm/md/lg) and four status colors (default/good/warning/critical). Full Stitch→Penpot→Tokens→Code pipeline product.
                      PropsScoreGaugeProps (score: number, label: string, size?: sm|md|lg, status?: default|good|warning|critical, trend?: up|down|flat, trendValue?: string)
                      Statesdefault, good, warning, critical
                      A11y
                      • SVG ring is aria-hidden
                      • Score value is visible text
                      • Trend arrows use aria-hidden with text fallback
                      Responsive
                      • Inline-flex, scales with container
                      • Size prop controls diameter (80/120/200)
                      Motion
                      • stroke-dasharray transition 400ms ease
                      Token Dependencies
                      • components.scoreGauge.trackColor
                      • components.scoreGauge.fillDefault
                      • components.scoreGauge.fillGood
                      • components.scoreGauge.fillWarning
                      • components.scoreGauge.fillCritical
                      • components.scoreGauge.scoreColor
                      • components.scoreGauge.labelColor
                      • components.scoreGauge.trendUpColor
                      • components.scoreGauge.trendDownColor
                      • components.scoreGauge.trendFlatColor
                      • components.scoreGauge.background
                      • components.scoreGauge.borderRadius
                      • components.scoreGauge.strokeWidth
                      • components.scoreGauge.glowOpacity
                      Content Slotslabel (string), trendValue (string)
                      CMS Bindings
                      • Score from CMS number field
                      • Label from CMS string field
                      Test Cases
                      • Renders score and label
                      • Clamps score to 0-100
                      • Applies size class
                      • Applies status class
                      • Shows trend indicator

                      Reading Time

                      Reading time estimate with clock icon, word count, and optional progress bar. Self-Healing Loop component — addresses blog detail page finding.

                      Short Article

                      3 min read600 words

                      Long Article with Word Count

                      16 min read3,200 words

                      With Progress Bar

                      12 min read2,400 words

                      Without Word Count

                      9 min read
                      Component Metadata
                      Familycontent
                      FrameworksNext.js, Astro/EmDash
                      DescriptionReading time estimate badge with clock icon, minutes calculation, word count, and optional scroll progress bar. Addresses Self-Healing Loop finding: blog detail page lacks reading time estimate.
                      PropsReadingTimeProps (wordCount: number, wordsPerMinute?: number, showWordCount?: boolean, progress?: number)
                      Statesdefault, with-progress
                      A11y
                      • Progress bar has role=progressbar with aria-valuenow/min/max
                      • Clock icon is aria-hidden
                      Responsive
                      • Inline-flex, scales with container
                      Motion
                      • Progress bar fill transition 200ms ease
                      Token Dependencies
                      • components.readingTime.background
                      • components.readingTime.borderRadius
                      • components.readingTime.textColor
                      • components.readingTime.iconColor
                      • components.readingTime.separatorColor
                      • components.readingTime.progressTrack
                      • components.readingTime.progressFill
                      • components.readingTime.progressHeight
                      Content Slots
                      CMS Bindings
                      • Word count from CMS text field length calculation
                      • Progress from scroll position
                      Test Cases
                      • Calculates reading time from word count
                      • Shows word count when enabled
                      • Hides word count when disabled
                      • Renders progress bar when progress provided
                      • Passes className through

                      Pagination

                      Page navigation with numbered buttons, prev/next arrows, ellipsis, and counter. Fifth pipeline-generated component — addresses blog scalability from E2E Test 2.

                      Short Range (5 pages)

                      Long Range with Ellipsis

                      Boundary States

                      Component Metadata
                      Familynavigation
                      FrameworksNext.js, Astro/EmDash
                      DescriptionPage navigation with numbered buttons, prev/next arrows, ellipsis for long ranges, active page highlight, disabled boundary states, and page counter. Addresses blog pagination scalability finding from E2E Test 2.
                      PropsPaginationProps (totalPages: number, currentPage?: number, onPageChange?: (page) => void, maxVisible?: number, showCounter?: boolean)
                      Statesdefault, page-active, page-hover, nav-disabled, nav-hover
                      A11y
                      • nav element with aria-label=Pagination
                      • aria-current=page on active button
                      • aria-label on each page button
                      • Disabled buttons have disabled attribute
                      Responsive
                      • Centered on all breakpoints
                      • Compact layout scales with button count
                      Motion
                      • Background/color transition 150ms ease on hover
                      Token Dependencies
                      • components.pagination.background
                      • components.pagination.borderRadius
                      • components.pagination.buttonBackground
                      • components.pagination.buttonBackgroundHover
                      • components.pagination.buttonBackgroundActive
                      • components.pagination.buttonText
                      • components.pagination.buttonTextHover
                      • components.pagination.buttonTextActive
                      • components.pagination.buttonBorderRadius
                      • components.pagination.buttonSize
                      • components.pagination.disabledColor
                      • components.pagination.ellipsisColor
                      • components.pagination.counterColor
                      • components.pagination.navColor
                      • components.pagination.navColorHover
                      Content Slots
                      CMS Bindings
                      • Total pages from CMS collection count
                      • Current page from URL parameter
                      Test Cases
                      • Renders all page buttons
                      • Highlights current page
                      • Prev disabled on first page
                      • Next disabled on last page
                      • Shows ellipsis for long ranges
                      • Fires onPageChange callback

                      Radar Chart

                      Pure SVG radar/spider chart with configurable dimensions. Fourth pipeline-generated component via Stitch Aetheris Observatory design (teal #44e5c2).

                      5-Dimension (Pentagon)

                      Behavioral Profile

                      4-Dimension (Square)

                      Project Health

                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionSVG radar/spider chart with configurable dimensions (3-8 axes), concentric grid, data polygon with fill and stroke, axis labels with values, and optional center overall score. Teal palette from Stitch Aetheris Observatory design system.
                      PropsRadarChartProps (dimensions: RadarDimension[], title?: string, overallScore?: number, size?: number)
                      Statesdefault, hover
                      A11y
                      • SVG is aria-hidden
                      • Title is visible text heading
                      • Score values in labels are visible text
                      Responsive
                      • max-width 320px SVG, scales with container
                      • Labels adjust text-anchor by position
                      Motion
                      • Fill opacity transition 300ms ease
                      Token Dependencies
                      • components.radarChart.background
                      • components.radarChart.borderRadius
                      • components.radarChart.gridColor
                      • components.radarChart.gridStrokeWidth
                      • components.radarChart.axisColor
                      • components.radarChart.fillColor
                      • components.radarChart.fillOpacity
                      • components.radarChart.strokeColor
                      • components.radarChart.strokeWidth
                      • components.radarChart.dotColor
                      • components.radarChart.dotRadius
                      • components.radarChart.labelColor
                      • components.radarChart.valueColor
                      • components.radarChart.titleColor
                      • components.radarChart.scoreColor
                      • components.radarChart.scoreBgColor
                      Content Slotsdimensions[].label (string), title (string)
                      CMS Bindings
                      • Dimension data from CMS JSON field
                      • Title from CMS string field
                      Test Cases
                      • Renders all dimension labels
                      • Renders title when provided
                      • Renders overall score in center
                      • Clamps values to 0-100
                      • Passes className through

                      Form Wizard

                      Multi-step form with progress indicator, field helpers, and navigation. Second component produced by the design-to-code pipeline.

                      Onboarding Flow (4 Steps)

                      Step 1 of 4
                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionMulti-step form wizard with numbered step progress indicator, back/next navigation, per-step validation, and step counter. Supports 2-5 steps with arbitrary content per step.
                      PropsFormWizardProps (steps: WizardStep[], onComplete?: () => void, className?: string)
                      Statesdefault, step-active, step-completed, step-inactive, field-focus, field-error, last-step
                      A11y
                      • aria-current=step on active step circle
                      • aria-live=polite on content region
                      • aria-labelledby linking content to step indicator
                      • Disabled back button on first step
                      Responsive
                      • Full-width on all breakpoints
                      • Step labels hidden on mobile if needed
                      Motion
                      • Step circle transition 150ms ease
                      • Button hover transition 150ms ease
                      Token Dependencies
                      • components.formWizard.background
                      • components.formWizard.borderRadius
                      • components.formWizard.padding
                      • components.formWizard.stepActiveBackground
                      • components.formWizard.stepActiveBorder
                      • components.formWizard.stepActiveText
                      • components.formWizard.stepCompletedBackground
                      • components.formWizard.stepCompletedText
                      • components.formWizard.stepInactiveBackground
                      • components.formWizard.stepInactiveBorder
                      • components.formWizard.stepInactiveText
                      • components.formWizard.stepConnectorActive
                      • components.formWizard.stepConnectorInactive
                      • components.formWizard.stepLabelActive
                      • components.formWizard.stepLabelInactive
                      • components.formWizard.fieldBackground
                      • components.formWizard.fieldBorder
                      • components.formWizard.fieldBorderFocus
                      • components.formWizard.fieldBorderError
                      • components.formWizard.fieldText
                      • components.formWizard.fieldPlaceholder
                      • components.formWizard.labelColor
                      • components.formWizard.errorText
                      • components.formWizard.checkboxCheckedBg
                      • components.formWizard.checkboxBorder
                      • components.formWizard.navCounterColor
                      Content Slotssteps[].content (ReactNode), steps[].label (string)
                      CMS Bindings
                      • Step definitions from CMS collection
                      • Form schema from CMS config
                      Test Cases
                      • Renders all step indicators
                      • Navigates forward
                      • Navigates backward
                      • Calls onComplete on last step
                      • Back disabled on first step

                      AI Avatar Tooltip

                      Floating AI assistant indicator with glassmorphic chat bubble, pulsing glow states, typing indicator, and message thread. Sixth pipeline component from the Kaleido Ether design system.

                      Status States (Idle / Active / Typing)

                      Expanded with Messages

                      Component Metadata
                      Familyai-interaction
                      FrameworksNext.js, Astro/EmDash
                      DescriptionFloating AI assistant indicator with pulsing avatar, glassmorphic chat bubble, typing indicator, message thread, and mini input. Supports idle/active/typing states, controlled/uncontrolled open state, and position anchoring.
                      PropsAiAvatarTooltipProps (name?: string, greeting?: string, status?: AiStatus, messages?: AiMessage[], open?: boolean, onOpenChange?: (open: boolean) => void, placeholder?: string, onSend?: (message: string) => void, badge?: string, position?: 'bottom-right' | 'bottom-left')
                      Statesidle-collapsed, active-collapsed, typing-collapsed, idle-expanded, active-expanded, typing-expanded, with-messages, with-badge
                      A11y
                      • Chat bubble has role=dialog with aria-label
                      • Trigger has aria-expanded
                      • Input has aria-label
                      • Close button has aria-label
                      • Send button has aria-label
                      • Typing indicator has aria-label
                      Responsive
                      • Bubble width 320px on desktop, scales to fit mobile viewports
                      Motion
                      • Avatar glow pulse 3s ease-in-out (idle), 1.2s (typing)
                      • Bubble enter animation 250ms ease-out
                      • Typing dots bounce 1.4s staggered
                      Token Dependencies
                      • components.aiAvatarTooltip.avatarSize
                      • components.aiAvatarTooltip.avatarBackground
                      • components.aiAvatarTooltip.avatarGlowColor
                      • components.aiAvatarTooltip.avatarGlowActiveColor
                      • components.aiAvatarTooltip.avatarIconColor
                      • components.aiAvatarTooltip.bubbleBackground
                      • components.aiAvatarTooltip.bubbleBorder
                      • components.aiAvatarTooltip.bubbleShadow
                      • components.aiAvatarTooltip.bubbleBorderRadius
                      • components.aiAvatarTooltip.headerTextColor
                      • components.aiAvatarTooltip.bodyTextColor
                      • components.aiAvatarTooltip.inputBackground
                      • components.aiAvatarTooltip.inputBorderColor
                      • components.aiAvatarTooltip.inputFocusBorderColor
                      • components.aiAvatarTooltip.inputTextColor
                      • components.aiAvatarTooltip.inputPlaceholderColor
                      • components.aiAvatarTooltip.typingDotColor
                      • components.aiAvatarTooltip.goldAccent
                      • components.aiAvatarTooltip.closeButtonColor
                      • components.aiAvatarTooltip.closeButtonHoverColor
                      Content Slotsmessages (AiMessage[]), greeting (string)
                      CMS Bindings
                      • AI persona from CMS config
                      • Greeting from CMS localization
                      Test Cases
                      • Renders trigger button with aria-expanded=false
                      • Opens bubble on trigger click
                      • Displays name and greeting in bubble
                      • Shows typing indicator when status=typing
                      • Renders messages
                      • Calls onSend on Enter key
                      • Shows gold badge when provided
                      • Passes className through

                      Live Readouts

                      Real-time biometric readout panel with metric cards, sparklines, trend arrows, and status indicators. Seventh pipeline component from the Clinical Sentinel design system.

                      Normal Vitals (5 metrics)

                      Heart Rate
                      72bpm
                      Blood Pressure
                      120/80mmHg
                      SpO2
                      98%
                      Stress
                      Low
                      Respiration
                      16rpm

                      Critical State (blinking indicators)

                      Heart Rate
                      142bpm
                      SpO2
                      91%
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionReal-time biometric readout panel with metric cards in responsive grid. Each card shows large monospace value, unit, trend arrow, status dot, and optional sparkline. Supports normal/warning/critical states and active pulse animation.
                      PropsLiveReadoutsProps (metrics: ReadoutMetric[], title?: string, columns?: 2|3|4)
                      Statesnormal, warning, critical, active-pulse, with-sparkline, with-trend
                      A11y
                      • Region has role=region with aria-label
                      • Status dot has aria-label
                      • Trend arrow has aria-label
                      • Sparkline is aria-hidden
                      Responsive
                      • Auto-fit grid (min 160px)
                      • Optional fixed 2/3/4 columns
                      Motion
                      • Active card pulse 2s ease-in-out infinite
                      • Critical status blink 1s
                      • Card box-shadow transition 300ms
                      Token Dependencies
                      • components.liveReadouts.cardBackground
                      • components.liveReadouts.cardBorderRadius
                      • components.liveReadouts.cardBorder
                      • components.liveReadouts.valueColor
                      • components.liveReadouts.valueFontFamily
                      • components.liveReadouts.labelColor
                      • components.liveReadouts.unitColor
                      • components.liveReadouts.trendUpColor
                      • components.liveReadouts.trendDownColor
                      • components.liveReadouts.trendFlatColor
                      • components.liveReadouts.statusNormal
                      • components.liveReadouts.statusWarning
                      • components.liveReadouts.statusCritical
                      • components.liveReadouts.sparklineColor
                      • components.liveReadouts.pulseGlowColor
                      Content Slotsmetrics (ReadoutMetric[]), title (string)
                      CMS Bindings
                      • Metrics from CMS biometric data
                      • Thresholds from CMS config
                      Test Cases
                      • Renders metric cards with labels
                      • Displays value and unit
                      • Shows trend arrow with correct direction
                      • Renders status dot with correct class
                      • Shows sparkline when data provided
                      • Applies active pulse class
                      • Renders title when provided
                      • Passes className through

                      Wellness Matrix

                      Biometric wellness dashboard grid — first component built via the fully automated Stitch→Penpot→Tokens→Code pipeline. Precision Noir design system.

                      Full Dashboard (hero + 6 categories)

                      88Overall Wellness
                      😴SleepOptimal
                      82
                      Deep
                      Light
                      REM
                      🍎NutritionAttention
                      64
                      Protein
                      Carbs
                      🏃ActivityOptimal
                      92
                      🧘MindfulnessOptimal
                      75
                      💧HydrationCritical
                      48
                      Intake
                      Target
                      💚RecoveryOptimal
                      85
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js
                      DescriptionBiometric wellness dashboard grid with hero composite score, category cards with sparklines, mini bar charts, and status indicators. Precision Noir design system.
                      PropsWellnessMatrixProps (compositeScore?: number, categories: WellnessCategory[], columns?: 2|3)
                      Stateswith-hero, no-hero, optimal-all, mixed-status, critical-alert, 2-col, 3-col
                      A11y
                      • Status text distinguishable without color alone
                      • Score ring decorative (aria-hidden)
                      • Semantic heading for hero label if used in page context
                      Responsive
                      • 3-column on desktop
                      • 2-column on tablet
                      • 1-column on mobile
                      Motion
                      • Critical card pulse 2s ease-in-out
                      • Bar fill transition 0.4s ease
                      • Ring stroke transition 0.6s ease
                      Token Dependencies
                      • components.wellnessMatrix.heroBackground
                      • components.wellnessMatrix.heroScoreColor
                      • components.wellnessMatrix.heroLabelColor
                      • components.wellnessMatrix.heroRingTrack
                      • components.wellnessMatrix.heroRingFill
                      • components.wellnessMatrix.cardBackground
                      • components.wellnessMatrix.cardBorderRadius
                      • components.wellnessMatrix.cardBorder
                      • components.wellnessMatrix.categoryIconColor
                      • components.wellnessMatrix.scoreColor
                      • components.wellnessMatrix.labelColor
                      • components.wellnessMatrix.sparklineColor
                      • components.wellnessMatrix.barFillColor
                      • components.wellnessMatrix.barTrackColor
                      • components.wellnessMatrix.statusOptimal
                      • components.wellnessMatrix.statusAttention
                      • components.wellnessMatrix.statusCritical
                      • components.wellnessMatrix.glowShadow
                      Content SlotscompositeLabel (string), categories (WellnessCategory[])
                      CMS Bindings
                      • Category names from CMS text fields
                      • Scores from CMS number fields
                      Test Cases
                      • Renders hero composite score with ring
                      • Hides hero when compositeScore is undefined
                      • Renders all category cards
                      • Shows status badge with correct class
                      • Renders sparkline when data provided
                      • Renders subcategory mini bars
                      • Applies critical pulse class
                      • Passes className through

                      Toolbar

                      Horizontal action toolbar with toggle buttons, dividers, and ARIA toolbar role. 40th component in the shared UI library.

                      Formatting Toolbar

                      View Toolbar

                      Component Metadata
                      Familynavigation
                      FrameworksNext.js, Astro/EmDash
                      DescriptionHorizontal toolbar with icon buttons, active/pressed toggle state, divider separators, and ARIA toolbar role. Token-driven colors, spacing, and border radius for consistent action bars.
                      PropsToolbarProps (items: ToolbarItem[], ariaLabel?: string, className?: string)
                      Statesdefault, active-button, with-divider, with-icon
                      A11y
                      • role=toolbar with aria-label
                      • aria-pressed on toggle buttons
                      • Dividers are aria-hidden
                      • Button title for tooltip
                      Responsive
                      • Horizontal flex layout
                      • Wraps when constrained
                      Motion
                      • Button hover color and background transition
                      Token Dependencies
                      • components.toolbar.background
                      • components.toolbar.borderColor
                      • components.toolbar.padding
                      • components.toolbar.gap
                      • components.toolbar.buttonColor
                      • components.toolbar.buttonHoverColor
                      • components.toolbar.buttonHoverBackground
                      • components.toolbar.buttonActiveColor
                      • components.toolbar.buttonActiveBackground
                      • components.toolbar.buttonPadding
                      • components.toolbar.buttonBorderRadius
                      • components.toolbar.buttonFontSize
                      • components.toolbar.dividerColor
                      Content Slotsitems[].label (string), items[].icon (ReactNode)
                      CMS Bindings
                      • Action list from CMS config
                      • Active state from application state
                      Test Cases
                      • Renders toolbar with role=toolbar
                      • Renders all button items
                      • Active button has aria-pressed=true
                      • Inactive button has aria-pressed=false
                      • Renders divider item
                      • Divider is aria-hidden
                      • Has aria-label
                      • Passes className through

                      Radio Group

                      Radio button group with native fieldset, custom styled circles, option descriptions, error/disabled states, and focus ring. 41st component.

                      Plan Selection

                      Choose a plan

                      With Disabled Option

                      Target
                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionRadio button group with native fieldset/legend, visually hidden native inputs, custom styled radio circles with checked dot animation, option descriptions, error state with role=alert, disabled state, and focus-visible ring. Uses role=radiogroup with aria-label.
                      PropsRadioGroupProps (label?: string, options: RadioOption[], value?: string, onChange?: (value) => void, name?: string, error?: string)
                      Statesunchecked, checked, disabled, error, with-description, focus-visible
                      A11y
                      • Native fieldset/legend for group labeling
                      • role=radiogroup with aria-label
                      • Native radio inputs (visually hidden) for keyboard support
                      • aria-invalid when error
                      • Error message has role=alert
                      • Focus ring on keyboard navigation
                      Responsive
                      • Full-width by default
                      • Options stack vertically
                      Motion
                      • Border color transition on check
                      • Focus ring shadow transition
                      Token Dependencies
                      • components.radioGroup.labelColor
                      • components.radioGroup.labelFontSize
                      • components.radioGroup.gap
                      • components.radioGroup.radioSize
                      • components.radioGroup.radioBorder
                      • components.radioGroup.radioCheckedBorder
                      • components.radioGroup.radioCheckedDot
                      • components.radioGroup.radioDotSize
                      • components.radioGroup.optionColor
                      • components.radioGroup.optionFontSize
                      • components.radioGroup.descriptionColor
                      • components.radioGroup.descriptionFontSize
                      • components.radioGroup.focusRing
                      • components.radioGroup.errorColor
                      • components.radioGroup.errorFontSize
                      • components.radioGroup.disabledOpacity
                      Content Slotslabel (string), options[].label (string), options[].description (string), error (string)
                      CMS Bindings
                      • Options from CMS enum field
                      • Label from CMS schema
                      • Error from CMS validation
                      Test Cases
                      • Renders all radio options
                      • Shows group label
                      • Checked option has checked class
                      • Calls onChange with value
                      • Shows error message
                      • Error has role=alert
                      • Disabled option has disabled class
                      • Passes className through

                      Checkbox

                      Styled checkbox with custom SVG checkmark, indeterminate state, label, description, and focus ring. 42nd component.

                      States

                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionStyled checkbox with custom checkmark SVG, indeterminate state with minus icon, label, description, disabled state, focus-visible ring, and aria-checked=mixed support. Uses visually hidden native input for keyboard accessibility.
                      PropsCheckboxProps (label?: string, description?: string, checked?: boolean, indeterminate?: boolean, onChange?: (checked) => void, disabled?: boolean)
                      Statesunchecked, checked, indeterminate, disabled, focus-visible, with-description
                      A11y
                      • Native checkbox (visually hidden) for keyboard support
                      • aria-checked=mixed for indeterminate
                      • Label linked via htmlFor
                      • Focus ring on keyboard navigation
                      Responsive
                      • Inline-flex by default
                      • Label wraps naturally
                      Motion
                      • Background and border transition on check
                      Token Dependencies
                      • components.checkbox.size
                      • components.checkbox.borderRadius
                      • components.checkbox.border
                      • components.checkbox.checkedBackground
                      • components.checkbox.checkedBorder
                      • components.checkbox.checkmarkColor
                      • components.checkbox.labelColor
                      • components.checkbox.labelFontSize
                      • components.checkbox.descriptionColor
                      • components.checkbox.descriptionFontSize
                      • components.checkbox.gap
                      • components.checkbox.focusRing
                      • components.checkbox.disabledOpacity
                      • components.checkbox.indeterminateBackground
                      Content Slotslabel (string), description (string)
                      CMS Bindings
                      • Checkbox label from CMS field
                      • Default state from CMS boolean
                      Test Cases
                      • Renders checkbox
                      • Shows label text
                      • Checked state has checked class
                      • Calls onChange on click
                      • Indeterminate has mixed aria-checked
                      • Shows description text
                      • Disabled has disabled class
                      • Passes className through

                      Search Input

                      Search input with magnifying glass icon, clear button, focus ring, and role=search landmark. 43rd component.

                      Empty / Pre-filled

                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionSearch input with magnifying glass icon, clear button, focus ring, role=search landmark, and native search input type. Token-driven styling with placeholder and icon colors.
                      PropsSearchInputProps (value?: string, onChange?: (value) => void, placeholder?: string, ariaLabel?: string)
                      Statesempty, with-value, focused, clearing
                      A11y
                      • role=search on container
                      • aria-label on input
                      • Clear button with aria-label
                      • Search icon is aria-hidden
                      Responsive
                      • Full-width by default
                      • Focus ring on focus-within
                      Motion
                      • Border color and box-shadow transition on focus
                      Token Dependencies
                      • components.searchInput.background
                      • components.searchInput.borderColor
                      • components.searchInput.borderRadius
                      • components.searchInput.padding
                      • components.searchInput.fontSize
                      • components.searchInput.textColor
                      • components.searchInput.placeholderColor
                      • components.searchInput.iconColor
                      • components.searchInput.iconSize
                      • components.searchInput.focusBorderColor
                      • components.searchInput.focusRing
                      • components.searchInput.clearColor
                      • components.searchInput.clearHoverColor
                      Content Slotsplaceholder (string), ariaLabel (string)
                      CMS Bindings
                      • Placeholder from CMS config
                      • Search query value from app state
                      Test Cases
                      • Renders search input
                      • Has role=search
                      • Shows placeholder
                      • Has aria-label
                      • Shows clear button when value present
                      • Hides clear button when empty
                      • Calls onChange on input
                      • Passes className through

                      Slider

                      Range slider with custom track, fill, label, value display, and formatter. 44th component.

                      With Value Display

                      Volume65

                      With Formatter

                      Price$250
                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionRange slider with custom-styled track, fill progress indicator, circular thumb, label, value display with optional formatter, disabled state, and full ARIA slider pattern (aria-valuemin/max/now/text).
                      PropsSliderProps (value?: number, min?: number, max?: number, step?: number, onChange?: (value) => void, label?: string, showValue?: boolean, formatValue?: (v) => string, disabled?: boolean)
                      Statesdefault, dragging, disabled, with-label, with-value
                      A11y
                      • Native range input for keyboard support
                      • aria-label from label prop
                      • aria-valuemin/max/now/text
                      • Focus ring on keyboard navigation
                      Responsive
                      • Full-width by default
                      • Track fills container
                      Motion
                      • Fill width transition
                      • Thumb grab cursor
                      Token Dependencies
                      • components.slider.trackHeight
                      • components.slider.trackBackground
                      • components.slider.trackBorderRadius
                      • components.slider.fillColor
                      • components.slider.thumbSize
                      • components.slider.thumbColor
                      • components.slider.thumbBorder
                      • components.slider.thumbShadow
                      • components.slider.labelColor
                      • components.slider.labelFontSize
                      • components.slider.valueColor
                      • components.slider.valueFontSize
                      • components.slider.focusRing
                      • components.slider.disabledOpacity
                      Content Slotslabel (string), formatValue ((v) => string)
                      CMS Bindings
                      • Min/max from CMS config
                      • Label from CMS field
                      Test Cases
                      • Renders range input
                      • Shows label text
                      • Shows value when showValue
                      • Calls onChange on input
                      • Has aria-valuemin/max/now
                      • Formats value with formatter
                      • Disabled has disabled class
                      • Passes className through

                      Number Input

                      Numeric stepper with +/- buttons, min/max clamping, label, and disabled state. 45th component.

                      Quantity (1-99)

                      Disabled

                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionNumeric stepper with increment/decrement buttons, native number input, min/max clamping, label, disabled state, and focus ring. Hides native spin buttons for consistent styling.
                      PropsNumberInputProps (value?: number, min?: number, max?: number, step?: number, onChange?: (value) => void, label?: string, disabled?: boolean)
                      Statesdefault, at-min, at-max, disabled, focused, with-label
                      A11y
                      • Decrease button with aria-label
                      • Increase button with aria-label
                      • Input has aria-label from label prop
                      • Buttons disabled at min/max bounds
                      Responsive
                      • Flexible width
                      • Buttons fixed width
                      Motion
                      • Border and shadow transition on focus
                      • Button hover color transition
                      Token Dependencies
                      • components.numberInput.background
                      • components.numberInput.borderColor
                      • components.numberInput.borderRadius
                      • components.numberInput.padding
                      • components.numberInput.fontSize
                      • components.numberInput.textColor
                      • components.numberInput.labelColor
                      • components.numberInput.labelFontSize
                      • components.numberInput.buttonColor
                      • components.numberInput.buttonHoverColor
                      • components.numberInput.buttonHoverBackground
                      • components.numberInput.focusBorderColor
                      • components.numberInput.focusRing
                      • components.numberInput.disabledOpacity
                      Content Slotslabel (string)
                      CMS Bindings
                      • Min/max from CMS config
                      • Label from CMS schema
                      Test Cases
                      • Renders number input
                      • Shows label text
                      • Shows current value
                      • Increment button increases value
                      • Decrement button decreases value
                      • Clamps to min
                      • Clamps to max
                      • Passes className through

                      Popover

                      Floating content panel with click trigger, outside-click dismiss, Escape close, and role=dialog. 46th component.

                      With Title / Without Title

                      Component Metadata
                      Familyoverlays
                      FrameworksNext.js, Astro/EmDash
                      DescriptionFloating content panel with click trigger, outside-click dismiss, Escape key close, optional title with close button, and role=dialog. Supports both controlled and uncontrolled open state.
                      PropsPopoverProps (trigger: ReactElement, title?: string, children: ReactNode, open?: boolean, onOpenChange?: (open) => void)
                      Statesclosed, open, with-title, without-title
                      A11y
                      • Trigger has aria-haspopup=dialog and aria-expanded
                      • Panel has role=dialog with aria-label
                      • Close button with aria-label
                      • Escape key closes panel
                      Responsive
                      • Absolute positioned below trigger
                      • Max-width constrained
                      Motion
                      • No animation by default
                      Token Dependencies
                      • components.popover.background
                      • components.popover.borderColor
                      • components.popover.borderRadius
                      • components.popover.padding
                      • components.popover.shadow
                      • components.popover.maxWidth
                      • components.popover.zIndex
                      • components.popover.titleColor
                      • components.popover.titleFontSize
                      • components.popover.bodyColor
                      • components.popover.bodyFontSize
                      • components.popover.closeColor
                      • components.popover.closeHoverColor
                      Content Slotstitle (string), children (ReactNode), trigger (ReactElement)
                      CMS Bindings
                      • Panel content from CMS
                      • Title from CMS field
                      Test Cases
                      • Hidden by default
                      • Opens on trigger click
                      • Shows title when provided
                      • Renders children content
                      • Has role=dialog
                      • Trigger has aria-haspopup
                      • Close button closes panel
                      • Passes className through

                      FileUpload

                      Drag-and-drop file upload zone with file list and progress bars.

                      Upload Zone with Files

                      Drag & drop files here, or click to browse

                      • tokens.json12.1 KB
                      • mockup.png1.7 MB

                      Disabled

                      Uploads disabled

                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionDrag-and-drop file upload zone with click-to-browse, file list display, progress bars, size formatting, max size filtering, and disabled state. Token-driven styling with dashed border.
                      PropsFileUploadProps (accept?: string, multiple?: boolean, maxSize?: number, onFiles?: (files) => void, files?: FileUploadFile[], helpText?: string, disabled?: boolean)
                      Statesidle, dragging, with-files, with-progress, disabled
                      A11y
                      • Zone has role=button with aria-label
                      • File input is aria-hidden
                      • File list has aria-label
                      • Progress bars have role=progressbar with aria-valuenow/min/max
                      Responsive
                      • Full-width by default
                      • Centered content in zone
                      Motion
                      • Border color and background transition on drag/hover
                      Token Dependencies
                      • components.fileUpload.background
                      • components.fileUpload.borderColor
                      • components.fileUpload.borderColorActive
                      • components.fileUpload.borderRadius
                      • components.fileUpload.borderStyle
                      • components.fileUpload.padding
                      • components.fileUpload.iconColor
                      • components.fileUpload.iconSize
                      • components.fileUpload.textColor
                      • components.fileUpload.textFontSize
                      • components.fileUpload.linkColor
                      • components.fileUpload.linkHoverColor
                      • components.fileUpload.fileNameColor
                      • components.fileUpload.fileSizeColor
                      • components.fileUpload.progressBackground
                      • components.fileUpload.progressFill
                      • components.fileUpload.progressHeight
                      Content SlotshelpText (string), files (FileUploadFile[])
                      CMS Bindings
                      • Help text from CMS config
                      • Accept types from CMS field
                      Test Cases
                      • Renders upload zone
                      • Shows help text
                      • Zone has role=button
                      • File input is hidden
                      • Displays file list
                      • Shows file size formatted
                      • Progress bar has correct value
                      • Passes className through

                      CodeBlock

                      Code display with line numbers, language header, and copy button.

                      TypeScript / JSON

                      typescript
                      const greeting = "Hello, World!";console.log(greeting);
                      json
                      {  "name": "cms-aichemist",  "version": "1.0.0"}
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionCode display block with line numbers, language header, copy-to-clipboard button, monospace font, and horizontal scroll. Token-driven for all visual elements.
                      PropsCodeBlockProps (code: string, language?: string, showLineNumbers?: boolean, showCopy?: boolean)
                      Statesdefault, with-language, no-line-numbers, copied-state
                      A11y
                      • Pre element has role=region with aria-label
                      • Line numbers are aria-hidden
                      • Copy button has aria-label that updates on copy
                      Responsive
                      • Full-width by default
                      • Horizontal scroll on overflow
                      Motion
                      • Copy button color transition on hover
                      Token Dependencies
                      • components.codeBlock.background
                      • components.codeBlock.borderColor
                      • components.codeBlock.borderRadius
                      • components.codeBlock.padding
                      • components.codeBlock.fontFamily
                      • components.codeBlock.fontSize
                      • components.codeBlock.lineHeight
                      • components.codeBlock.textColor
                      • components.codeBlock.lineNumberColor
                      • components.codeBlock.lineNumberWidth
                      • components.codeBlock.headerBackground
                      • components.codeBlock.headerColor
                      • components.codeBlock.headerFontSize
                      • components.codeBlock.copyColor
                      • components.codeBlock.copyHoverColor
                      Content Slotscode (string), language (string)
                      CMS Bindings
                      • Code content from CMS field
                      • Language from CMS metadata
                      Test Cases
                      • Renders code content
                      • Shows language header
                      • Has line numbers
                      • Copy button present
                      • Pre has role=region
                      • Line numbers are aria-hidden
                      • Hides line numbers when disabled
                      • Passes className through

                      KanbanBoard

                      Column-based kanban board with cards, tags, and counts.

                      To Do2
                      Design tokens auditdesign
                      Write docs
                      In Progress1
                      Build components53 so farfeat
                      Done1
                      Deploy to production
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionColumn-based kanban board with card counts, card titles/descriptions/tags, click handlers, horizontal scroll, and keyboard-accessible cards. Token-driven column and card styling.
                      PropsKanbanBoardProps (columns: KanbanColumn[], onCardClick?: (cardId, columnId) => void)
                      Statesempty-columns, populated, many-cards, horizontal-scroll
                      A11y
                      • Board has role=region with aria-label
                      • Columns have role=list with aria-label
                      • Cards have role=listitem
                      • Cards are focusable and keyboard-accessible
                      Responsive
                      • Horizontal scroll on overflow
                      • Min-width per column
                      Motion
                      • Border-color transition on card hover
                      Token Dependencies
                      • components.kanbanBoard.columnBackground
                      • components.kanbanBoard.columnBorderRadius
                      • components.kanbanBoard.columnPadding
                      • components.kanbanBoard.columnGap
                      • components.kanbanBoard.columnMinWidth
                      • components.kanbanBoard.headerColor
                      • components.kanbanBoard.headerFontSize
                      • components.kanbanBoard.countBackground
                      • components.kanbanBoard.countColor
                      • components.kanbanBoard.cardBackground
                      • components.kanbanBoard.cardBorderRadius
                      • components.kanbanBoard.cardPadding
                      • components.kanbanBoard.cardBorder
                      • components.kanbanBoard.cardGap
                      • components.kanbanBoard.titleColor
                      • components.kanbanBoard.titleFontSize
                      • components.kanbanBoard.descColor
                      • components.kanbanBoard.descFontSize
                      Content Slotscolumns (KanbanColumn[]), cards (KanbanCard[])
                      CMS Bindings
                      • Columns from CMS workflow states
                      • Cards from CMS items
                      Test Cases
                      • Renders columns
                      • Has role=region
                      • Columns have role=list
                      • Cards have role=listitem
                      • Shows column titles
                      • Shows card count
                      • Clicking card calls onCardClick
                      • Passes className through

                      TreeView

                      Collapsible hierarchical tree with depth indentation and selection.

                      File Explorer

                      • src
                        • components
                          • Button.tsx
                          • Card.tsx
                        • index.ts
                      • package.json
                      Component Metadata
                      Familynavigation
                      FrameworksNext.js, Astro/EmDash
                      DescriptionCollapsible hierarchical tree with expand/collapse chevrons, selection state, depth indentation, branch connector lines, and keyboard navigation. Token-driven styling.
                      PropsTreeViewProps (nodes: TreeNode[], selected?: string, onSelect?: (id) => void, defaultExpanded?: string[])
                      Statesall-collapsed, partially-expanded, node-selected, deeply-nested
                      A11y
                      • Root has role=tree with aria-label
                      • Items have role=treeitem
                      • Expandable items have aria-expanded
                      • Selected items have aria-selected
                      • Children groups have role=group
                      Responsive
                      • Full-width by default
                      • Indent scales with depth
                      Motion
                      • Chevron rotation on expand
                      • Background transition on hover
                      Token Dependencies
                      • components.treeView.indentSize
                      • components.treeView.itemPadding
                      • components.treeView.itemBorderRadius
                      • components.treeView.itemHoverBackground
                      • components.treeView.itemSelectedBackground
                      • components.treeView.labelColor
                      • components.treeView.labelFontSize
                      • components.treeView.iconColor
                      • components.treeView.iconSize
                      • components.treeView.branchLineColor
                      • components.treeView.gap
                      Content Slotsnodes (TreeNode[]), icons (ReactNode[])
                      CMS Bindings
                      • Tree data from CMS hierarchy
                      • Expanded state from app
                      Test Cases
                      • Renders root nodes
                      • Has role=tree
                      • Items have role=treeitem
                      • Expand shows children
                      • Selected item has selected class
                      • Clicking calls onSelect
                      • Default expanded works
                      • Passes className through

                      StepIndicator

                      Multi-step progress indicator with numbered circles and connector lines.

                      Mid-progress / All Complete

                      Component Metadata
                      Familynavigation
                      FrameworksNext.js, Astro/EmDash
                      DescriptionMulti-step progress indicator with numbered circles, connector lines, completed checkmarks, active highlight, and step labels. Token-driven for all visual states.
                      PropsStepIndicatorProps (steps: Step[], currentStep: number)
                      Statesall-pending, mid-progress, all-completed, first-step, last-step
                      A11y
                      • Container has role=navigation with aria-label
                      • Uses ordered list (ol)
                      • Active step has aria-current=step
                      • Checkmark icon is aria-hidden
                      Responsive
                      • Full-width flex layout
                      • Steps share equal space
                      Motion
                      • No animation by default
                      Token Dependencies
                      • components.stepIndicator.circleSize
                      • components.stepIndicator.circleBorder
                      • components.stepIndicator.circleBackground
                      • components.stepIndicator.circleColor
                      • components.stepIndicator.activeBackground
                      • components.stepIndicator.activeBorder
                      • components.stepIndicator.activeColor
                      • components.stepIndicator.completedBackground
                      • components.stepIndicator.completedBorder
                      • components.stepIndicator.completedColor
                      • components.stepIndicator.lineColor
                      • components.stepIndicator.lineActiveColor
                      • components.stepIndicator.lineHeight
                      • components.stepIndicator.labelColor
                      • components.stepIndicator.labelActiveColor
                      • components.stepIndicator.labelFontSize
                      • components.stepIndicator.fontSize
                      Content Slotssteps (Step[]), labels (string[])
                      CMS Bindings
                      • Step labels from CMS workflow
                      • Current step from app state
                      Test Cases
                      • Renders all steps
                      • Has role=navigation
                      • Active step has aria-current
                      • Completed steps show checkmark
                      • Active step has active class
                      • Shows step labels
                      • Shows step numbers for pending
                      • Passes className through

                      Drawer

                      Sliding panel overlay from left or right edge with backdrop and dismiss.

                      Drawer requires interactive state — see /drawer route

                      Drawers use open/close state and portals. Visit the dedicated Drawer showcase for interactive demos.

                      Component Metadata
                      Familyoverlays
                      FrameworksNext.js, Astro/EmDash
                      DescriptionSliding panel overlay from left or right edge with backdrop, title, close button, Escape key dismiss, and scroll body. Token-driven width, shadow, animation, and colors.
                      PropsDrawerProps (open: boolean, onClose: () => void, title?: string, position?: 'left'|'right', children: ReactNode)
                      Statesclosed, open-right, open-left, with-title, scrolling
                      A11y
                      • Panel has role=dialog with aria-modal=true
                      • Panel has aria-label
                      • Close button with aria-label
                      • Escape key closes drawer
                      • Overlay click closes drawer
                      Responsive
                      • Max-width 90vw on small screens
                      • Full height
                      Motion
                      • Slide-in animation from edge
                      Token Dependencies
                      • components.drawer.background
                      • components.drawer.overlayColor
                      • components.drawer.width
                      • components.drawer.padding
                      • components.drawer.headerColor
                      • components.drawer.headerFontSize
                      • components.drawer.borderColor
                      • components.drawer.closeColor
                      • components.drawer.closeHoverColor
                      • components.drawer.zIndex
                      • components.drawer.shadow
                      • components.drawer.transitionDuration
                      Content Slotstitle (string), children (ReactNode)
                      CMS Bindings
                      • Drawer title from CMS
                      • Content from CMS section
                      Test Cases
                      • Hidden when closed
                      • Visible when open
                      • Has role=dialog
                      • Shows title
                      • Close button fires onClose
                      • Overlay click fires onClose
                      • Has aria-modal=true
                      • Passes className through

                      ColorSwatch

                      Color palette swatches with selection ring, labels, and hex values.

                      With Labels

                      Primary#a78bfa
                      Hover#8b5cf6
                      Active#7c3aed
                      Success#10b981
                      Error#ef4444

                      Without Labels

                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionColor palette swatch grid with selection state, optional labels and hex values, role=listbox pattern, and token-driven styling. Supports selected ring, scale hover, and checker pattern for alpha colors.
                      PropsColorSwatchProps (colors: ColorSwatchColor[], selected?: string, onSelect?: (color) => void, showLabel?: boolean)
                      Statesno-selection, color-selected, with-labels, without-labels
                      A11y
                      • Container has role=listbox with aria-label
                      • Each swatch has role=option with aria-selected
                      • Swatch buttons have aria-label with color name/value
                      Responsive
                      • Flex-wrap by default
                      • Gap-controlled spacing
                      Motion
                      • Scale transform on hover
                      • Box-shadow transition on select
                      Token Dependencies
                      • components.colorSwatch.size
                      • components.colorSwatch.borderRadius
                      • components.colorSwatch.border
                      • components.colorSwatch.selectedRing
                      • components.colorSwatch.labelColor
                      • components.colorSwatch.labelFontSize
                      • components.colorSwatch.hexColor
                      • components.colorSwatch.hexFontSize
                      • components.colorSwatch.gap
                      • components.colorSwatch.tooltipBackground
                      • components.colorSwatch.tooltipColor
                      • components.colorSwatch.tooltipFontSize
                      • components.colorSwatch.checkerBackground
                      Content Slotscolors (ColorSwatchColor[]), labels (string[])
                      CMS Bindings
                      • Color values from CMS token set
                      • Color labels from CMS config
                      Test Cases
                      • Renders swatch buttons
                      • Has role=listbox
                      • Swatch has role=option
                      • Selected swatch has selected class
                      • Clicking calls onSelect
                      • Shows labels when showLabel is true
                      • Shows hex values
                      • Passes className through

                      DatePicker

                      Calendar-based date picker with month navigation and today highlight.

                      Default / Pre-selected

                      May 2026
                      SuMoTuWeThFrSa
                      April 2026
                      SuMoTuWeThFrSa
                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionCalendar-based date picker with month navigation, today highlight, selected state, weekday headers, and keyboard-accessible day buttons. Token-driven styling for all visual elements.
                      PropsDatePickerProps (value?: Date, onChange?: (date) => void)
                      Statesno-selection, date-selected, today-highlighted, month-navigated
                      A11y
                      • Container has role=group with aria-label
                      • Grid has role=grid with aria-label
                      • Day buttons have aria-pressed for selection
                      • Today has aria-current=date
                      • Month label has aria-live=polite
                      • Nav buttons have aria-label
                      Responsive
                      • Inline-block by default
                      • 7-column grid auto-sizes
                      Motion
                      • Background transition on day hover
                      Token Dependencies
                      • components.datePicker.background
                      • components.datePicker.borderColor
                      • components.datePicker.borderRadius
                      • components.datePicker.padding
                      • components.datePicker.shadow
                      • components.datePicker.headerColor
                      • components.datePicker.headerFontSize
                      • components.datePicker.dayColor
                      • components.datePicker.dayHoverBackground
                      • components.datePicker.daySelectedBackground
                      • components.datePicker.daySelectedColor
                      • components.datePicker.dayTodayBorder
                      • components.datePicker.daySize
                      • components.datePicker.dayFontSize
                      • components.datePicker.weekdayColor
                      • components.datePicker.navColor
                      • components.datePicker.navHoverColor
                      Content Slotsvalue (Date), monthLabel (auto-generated)
                      CMS Bindings
                      • Default date from CMS field
                      • Date format from CMS config
                      Test Cases
                      • Renders calendar grid
                      • Shows current month label
                      • Has weekday headers
                      • Clicking a day calls onChange
                      • Selected day has selected class
                      • Today has today class
                      • Previous month navigation works
                      • Passes className through

                      Countdown

                      Countdown timer with days, hours, minutes, and seconds.

                      Live Timer

                      Next Release
                      06Days
                      23Hours
                      59Minutes
                      59Seconds
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionCountdown timer displaying days, hours, minutes, seconds with optional labels. Token-driven colors, fonts, and segment styling.
                      PropsCountdownProps (targetDate: Date, label?: string, onComplete?: () => void, showLabels?: boolean)
                      Statesrunning, complete, with-label, without-labels
                      A11y
                      • Container has role=timer
                      • aria-label from label prop
                      • Separators are aria-hidden
                      Responsive
                      • Flex wrap for segments
                      • Min-width per segment
                      Motion
                      • Digits update every second via setInterval
                      Token Dependencies
                      • components.countdown.bg
                      • components.countdown.borderColor
                      • components.countdown.borderRadius
                      • components.countdown.padding
                      • components.countdown.gap
                      • components.countdown.digitColor
                      • components.countdown.digitFontSize
                      • components.countdown.labelColor
                      • components.countdown.labelFontSize
                      • components.countdown.separatorColor
                      • components.countdown.separatorFontSize
                      Content Slotslabel (string), digit segments
                      CMS Bindings
                      • Target date from CMS datetime field
                      Test Cases
                      • Renders four segments
                      • Has role=timer
                      • Shows label when provided
                      • Shows digit labels by default
                      • Hides labels when showLabels=false
                      • Shows colons between segments
                      • Digits are zero-padded
                      • Passes className through

                      Meter

                      Visual meter bar with range-based color coding.

                      Range Colors

                      Low15/100
                      Medium50/100
                      High85/100
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionVisual meter bar with range-based color coding (low/medium/high/overflow). Token-driven colors, sizing, and thresholds. ARIA meter role.
                      PropsMeterProps (value: number, min?: number, max?: number, low?: number, high?: number, label?: string, showValue?: boolean)
                      Stateslow-range, medium-range, high-range, overflow, with-label, with-value
                      A11y
                      • Track has role=meter with aria-valuenow, aria-valuemin, aria-valuemax
                      • aria-label from label prop
                      Responsive
                      • Full width by default
                      • Height from token
                      Motion
                      • Width transition (0.3s ease)
                      Token Dependencies
                      • components.meter.height
                      • components.meter.borderRadius
                      • components.meter.trackBg
                      • components.meter.fillLow
                      • components.meter.fillMedium
                      • components.meter.fillHigh
                      • components.meter.fillOverflow
                      • components.meter.labelColor
                      • components.meter.labelFontSize
                      • components.meter.valueColor
                      • components.meter.valueFontSize
                      • components.meter.gap
                      Content Slotslabel (string), value display
                      CMS Bindings
                      • Value from CMS metric
                      • Thresholds from CMS config
                      Test Cases
                      • Renders meter track
                      • Has role=meter
                      • Shows label
                      • Shows value text
                      • Low range has low class
                      • High range has high class
                      • Fill width reflects value
                      • Passes className through

                      CommandPalette

                      Searchable command overlay with keyboard shortcuts.

                      Interactive — see /command route

                      CommandPalette uses modal state and focus management. Visit the dedicated Command Palette showcase for interactive demos.

                      Component Metadata
                      Familynavigation
                      FrameworksNext.js, Astro/EmDash
                      DescriptionCommand palette overlay with search input, filtered results, keyboard shortcut badges, and Escape dismiss. Token-driven colors and sizing.
                      PropsCommandPaletteProps (open: boolean, onClose: () => void, items: CommandItem[], onSelect: (item: CommandItem) => void, placeholder?: string)
                      Statesopen, closed, empty-results, filtered, with-shortcuts
                      A11y
                      • Dialog has role=dialog with aria-modal
                      • Search input has aria-label
                      • Items have role=option in role=listbox
                      • Escape key closes palette
                      Responsive
                      • Max width 560px, centered
                      • Responsive via padding
                      Motion
                      • No enter/exit animation by default
                      Token Dependencies
                      • components.commandPalette.overlayBg
                      • components.commandPalette.bg
                      • components.commandPalette.borderColor
                      • components.commandPalette.borderRadius
                      • components.commandPalette.maxWidth
                      • components.commandPalette.inputBg
                      • components.commandPalette.inputColor
                      • components.commandPalette.inputFontSize
                      • components.commandPalette.inputPadding
                      • components.commandPalette.itemBg
                      • components.commandPalette.itemBgHover
                      • components.commandPalette.itemColor
                      • components.commandPalette.itemPadding
                      • components.commandPalette.itemFontSize
                      • components.commandPalette.shortcutColor
                      • components.commandPalette.shortcutBg
                      • components.commandPalette.emptyColor
                      Content Slotsitems (CommandItem array), placeholder (string)
                      CMS Bindings
                      • Commands from CMS configuration
                      • Labels from CMS data
                      Test Cases
                      • Renders when open
                      • Hidden when closed
                      • Has role=dialog
                      • Shows search input
                      • Shows command items
                      • Shows shortcut badge
                      • Shows empty state for no results
                      • Passes className through

                      Stat

                      KPI stat card with label, value, and trend indicator.

                      Dashboard Stats

                      Components
                      60+5
                      Tokens
                      911+64
                      Drift
                      100%Stable
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionKPI stat card with label, large value, trend direction indicator, and optional icon. Token-driven colors and typography.
                      PropsStatProps (label: string, value: string | number, trend?: StatTrend, trendText?: string, icon?: ReactNode)
                      Statesup-trend, down-trend, neutral-trend, no-trend, with-icon
                      A11y
                      • Container has role=group with aria-label
                      • Icon is aria-hidden
                      • Trend arrows are aria-hidden
                      Responsive
                      • Flex column layout
                      • Stacks naturally in grid
                      Motion
                      • No motion by default
                      Token Dependencies
                      • components.stat.bg
                      • components.stat.borderColor
                      • components.stat.borderRadius
                      • components.stat.padding
                      • components.stat.labelColor
                      • components.stat.labelFontSize
                      • components.stat.valueColor
                      • components.stat.valueFontSize
                      • components.stat.trendUpColor
                      • components.stat.trendDownColor
                      • components.stat.trendFontSize
                      • components.stat.trendIconSize
                      Content Slotslabel (string), value (string|number), trendText (string), icon (ReactNode)
                      CMS Bindings
                      • Value from CMS metric field
                      • Trend from CMS calculated field
                      Test Cases
                      • Renders label
                      • Renders value
                      • Has role=group
                      • Up trend has up class
                      • Down trend has down class
                      • Shows trend text
                      • Renders icon when provided
                      • Passes className through

                      ToggleGroup

                      Segmented button group for single or multi-select toggling.

                      Single Select

                      With Disabled

                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionSegmented button group for single or multi-select toggling. Token-driven colors, padding, border radii. ARIA radio group pattern.
                      PropsToggleGroupProps (options: ToggleOption[], value: string | string[], onChange: (value: string | string[]) => void, multiple?: boolean)
                      Statessingle-select, multi-select, active, inactive, disabled
                      A11y
                      • Container has role=group
                      • Each button has role=radio with aria-checked
                      • Disabled options marked with disabled attribute
                      Responsive
                      • Inline-flex, wraps naturally
                      Motion
                      • Background and color transitions (0.15s)
                      Token Dependencies
                      • components.toggleGroup.bg
                      • components.toggleGroup.borderRadius
                      • components.toggleGroup.gap
                      • components.toggleGroup.padding
                      • components.toggleGroup.buttonBg
                      • components.toggleGroup.buttonBgActive
                      • components.toggleGroup.buttonColor
                      • components.toggleGroup.buttonColorActive
                      • components.toggleGroup.buttonRadius
                      • components.toggleGroup.buttonPaddingX
                      • components.toggleGroup.buttonPaddingY
                      • components.toggleGroup.fontSize
                      Content Slotsoption labels (string)
                      CMS Bindings
                      • Options from CMS enum/select field
                      Test Cases
                      • Renders all options
                      • Has role=group
                      • Active option has active class
                      • Buttons have role=radio
                      • aria-checked on active button
                      • Disabled option has disabled attribute
                      • Inactive buttons lack active class
                      • Passes className through

                      Rating

                      Star rating input with hover preview, numeric display, and disabled state.

                      Values

                      ExcellentAveragePoor

                      Disabled

                      Locked
                      Component Metadata
                      Familyfeedback
                      FrameworksNext.js, Astro/EmDash
                      DescriptionStar rating component with interactive selection, hover preview, numeric value display, and disabled state. Token-driven star colors, sizes, and opacity.
                      PropsRatingProps (value?: number, max?: number, onChange?: (value: number) => void, showValue?: boolean, label?: string, disabled?: boolean)
                      Statesempty, partial, full, hover, disabled
                      A11y
                      • Container has role=group with aria-label
                      • Each star is a button with aria-label
                      • Stars use aria-pressed for current value
                      • Disabled buttons prevent interaction
                      Responsive
                      • Inline-flex by default
                      • Stars wrap naturally
                      Motion
                      • Fill color transition on hover (0.15s)
                      Token Dependencies
                      • components.rating.starSize
                      • components.rating.gap
                      • components.rating.filledColor
                      • components.rating.emptyColor
                      • components.rating.hoverColor
                      • components.rating.labelColor
                      • components.rating.labelFontSize
                      • components.rating.valueColor
                      • components.rating.valueFontSize
                      • components.rating.disabledOpacity
                      Content Slotslabel (string), value display (numeric)
                      CMS Bindings
                      • Rating value from CMS field
                      • Label from CMS data
                      Test Cases
                      • Renders 5 stars by default
                      • Has role=group
                      • Shows label text
                      • Filled stars have filled class
                      • Empty stars lack filled class
                      • Shows numeric value when showValue
                      • Disabled adds disabled class
                      • Passes className through

                      StatusDot

                      Inline status indicator with colored dot, label, and optional pulse animation.

                      Variants

                      DeployedBuildingFailedQueuedIdle

                      With Pulse

                      LiveProcessingAlert
                      Component Metadata
                      Familyfeedback
                      FrameworksNext.js, Astro/EmDash
                      DescriptionInline status indicator with colored dot, label, and optional pulse animation. Five variants: success, warning, error, info, neutral. Token-driven colors and sizing.
                      PropsStatusDotProps (variant?: StatusDotVariant, label?: string, pulse?: boolean)
                      Statessuccess, warning, error, info, neutral, pulsing
                      A11y
                      • Container has role=status
                      • aria-label combines variant and label
                      • Dot is aria-hidden
                      Responsive
                      • Inline-flex by default
                      • Wraps with text
                      Motion
                      • Optional pulse animation on dot
                      Token Dependencies
                      • components.statusDot.dotSize
                      • components.statusDot.gap
                      • components.statusDot.labelColor
                      • components.statusDot.labelFontSize
                      • components.statusDot.successColor
                      • components.statusDot.warningColor
                      • components.statusDot.errorColor
                      • components.statusDot.infoColor
                      • components.statusDot.neutralColor
                      • components.statusDot.pulseScale
                      Content Slotslabel (string)
                      CMS Bindings
                      • Status from CMS field
                      • Label from CMS data
                      Test Cases
                      • Renders dot
                      • Has role=status
                      • Shows label text
                      • Success variant has success class
                      • Error variant has error class
                      • Dot is aria-hidden
                      • Pulse adds pulse class
                      • Passes className through

                      CopyButton

                      Click-to-copy button with clipboard API, success feedback, and auto-reset.

                      Default / Custom Labels

                      Component Metadata
                      Familyactions
                      FrameworksNext.js, Astro/EmDash
                      DescriptionClick-to-copy button with clipboard API integration and visual success feedback. Token-driven colors, sizing, and border styles.
                      PropsCopyButtonProps (text: string, label?: string, successLabel?: string)
                      Statesidle, copied/success, hover
                      A11y
                      • Button has aria-label with copy target text
                      • Success state updates aria-label
                      • Icons are aria-hidden
                      Responsive
                      • Inline-flex by default
                      Motion
                      • Background/color transition (0.15s)
                      • Auto-reset after 2s
                      Token Dependencies
                      • components.copyButton.bg
                      • components.copyButton.bgHover
                      • components.copyButton.bgSuccess
                      • components.copyButton.color
                      • components.copyButton.colorSuccess
                      • components.copyButton.borderColor
                      • components.copyButton.borderRadius
                      • components.copyButton.padding
                      • components.copyButton.iconSize
                      • components.copyButton.fontSize
                      • components.copyButton.gap
                      Content Slotslabel (string), successLabel (string)
                      CMS Bindings
                      • Copy text from CMS field
                      Test Cases
                      • Renders with label
                      • Has button role
                      • Shows copy icon
                      • Has aria-label with text
                      • Shows custom label
                      • Shows custom success label text in DOM
                      • Default label is Copy
                      • Passes className through

                      InlineEdit

                      Click-to-edit inline text field with Enter to save and Escape to cancel.

                      With Value / Empty / Disabled

                      Project AlphaAdd a title...Locked
                      Component Metadata
                      Familyforms
                      FrameworksNext.js, Astro/EmDash
                      DescriptionClick-to-edit inline text field with view/edit modes, Enter to confirm, Escape to cancel, blur to save, and disabled state. Token-driven border, colors, and edit icon.
                      PropsInlineEditProps (value: string, onSave?: (value) => void, onCancel?: () => void, placeholder?: string, disabled?: boolean)
                      Statesview-mode, edit-mode, empty/placeholder, disabled, hover
                      A11y
                      • View mode has role=button with aria-label
                      • Edit mode input has aria-label
                      • Keyboard: Enter activates edit, Enter saves, Escape cancels
                      • Edit icon is aria-hidden
                      Responsive
                      • Inline-flex by default
                      • Input min-width 120px
                      Motion
                      • Background transition on hover (0.15s)
                      • Focus ring on input
                      Token Dependencies
                      • components.inlineEdit.bg
                      • components.inlineEdit.bgEditing
                      • components.inlineEdit.color
                      • components.inlineEdit.colorPlaceholder
                      • components.inlineEdit.borderColor
                      • components.inlineEdit.borderColorFocus
                      • components.inlineEdit.borderRadius
                      • components.inlineEdit.padding
                      • components.inlineEdit.fontSize
                      • components.inlineEdit.iconSize
                      • components.inlineEdit.iconColor
                      • components.inlineEdit.hoverBg
                      Content Slotsvalue (string), placeholder (string)
                      CMS Bindings
                      • Value from CMS field
                      • Placeholder from CMS config
                      Test Cases
                      • Renders value text
                      • Has role=button in view mode
                      • Shows edit icon
                      • Shows placeholder when empty
                      • Disabled has disabled class
                      • Edit icon is aria-hidden
                      • Has aria-label in view mode
                      • Passes className through

                      DataList

                      Key-value pair list with optional dividers and striped rows.

                      With Dividers

                      Components
                      66
                      Tokens
                      983
                      Tests
                      483
                      Drift Score
                      100/100

                      Striped

                      Framework
                      Next.js 15
                      CMS
                      EmDash + Astro 6
                      Design
                      Penpot
                      Component Metadata
                      Familydata-display
                      FrameworksNext.js, Astro/EmDash
                      DescriptionKey-value pair list using semantic dl/dt/dd elements with optional dividers and striped rows. Token-driven label width, colors, and spacing.
                      PropsDataListProps (items: DataListItem[], dividers?: boolean, striped?: boolean)
                      Statesdefault, with-dividers, striped, single-item, many-items
                      A11y
                      • Uses semantic dl/dt/dd elements
                      • Container has role=list
                      • Rows have role=listitem
                      Responsive
                      • Full width by default
                      • Label width fixed, value flexible
                      Motion
                      • No animation
                      Token Dependencies
                      • components.dataList.gap
                      • components.dataList.labelColor
                      • components.dataList.labelFontSize
                      • components.dataList.labelWidth
                      • components.dataList.valueColor
                      • components.dataList.valueFontSize
                      • components.dataList.dividerColor
                      • components.dataList.stripedBg
                      • components.dataList.padding
                      Content Slotsitems (DataListItem array)
                      CMS Bindings
                      • Items from CMS key-value fields
                      Test Cases
                      • Renders all items
                      • Has role=list
                      • Rows have role=listitem
                      • Shows dt labels
                      • Shows dd values
                      • Dividers class when enabled
                      • Striped class when enabled
                      • Passes className through

                      Shadows

                      Box shadow tokens from subtle to glow effects.

                      sm

                      --shadow-sm

                      md

                      --shadow-md

                      lg

                      --shadow-lg

                      glow

                      --shadow-glow

                      glowGreen

                      --shadow-glowGreen

                      Border Radii

                      Border radius tokens from sharp to fully rounded.

                      none

                      0px

                      sm

                      4px

                      md

                      8px

                      lg

                      12px

                      xl

                      16px

                      2xl

                      24px

                      full

                      9999px