Components · Data display & feedback

Display

Showcase-only containers and dividers that organize content in place — swipeable galleries, resizable panes, and rules between sections. Not part of the Zetta core spec.

Carousel

Slide 1 of 4

Build with the skill

No package to install — hand this to your AI to generate or migrate this component in your stack.

Prompt for your AI

Apply the Zetta "Carousel" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `carousel` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `carousel` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Spec

carousel

position: relative
overflow: hidden
width: 100%

carousel-dot

width: 12px
height: 12px
borderRadius: {rounded.full}
backgroundColor: {colors.surface-muted}
padding: 16px
cursor: pointer

carousel-dot-active

backgroundColor: {colors.primary}

carousel-dot-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

carousel-control

width: 32px
height: 32px
borderRadius: {rounded.full}
backgroundColor: {colors.surface-card}
borderColor: {colors.hairline}
borderWidth: 1px
iconColor: {colors.ink}
iconSize: 20px
shadow: {elevation.shadow.raised}
cursor: pointer

carousel-control-hover

backgroundColor: {colors.primary-bg}
borderColor: {colors.primary}

carousel-control-focus

outline: 2px solid {colors.border-focus}
outlineOffset: 2px

carousel-control-disabled

backgroundColor: {colors.disabled-bg}
iconColor: {colors.disabled-text}
borderColor: {colors.disabled-border}
cursor: not-allowed

Resizable

Navigation

Content area — drag the divider to resize.

Build with the skill

No package to install — hand this to your AI to generate or migrate this component in your stack.

Prompt for your AI

Apply the Zetta "Resizable" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `resizable` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `resizable` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Spec

resizable-handle

width: 6px
backgroundColor: transparent
cursor: col-resize
position: relative

resizable-handle-hover

backgroundColor: {colors.primary}

resizable-handle-focus

backgroundColor: {colors.primary}
outline: 2px solid {colors.border-focus}
outlineOffset: 2px

Separator

Section one

Section two

Build with the skill

No package to install — hand this to your AI to generate or migrate this component in your stack.

Prompt for your AI

Apply the Zetta "Separator" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `separator` spec and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `separator` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Spec

separator

color: {colors.hairline}
thickness: 1px

Anatomy & rules

Table

╭────────────────────────────────────────────────╮
│  Name ▲        Role            Status          │  ← table-header (muted, 500, 2px border)
│─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
│  Alice Johnson  Admin           ● Active        │  ← table-row
│  Bob Smith      Member          ○ Inactive       │
╰────────────────────────────────────────────────╯
  ↑ 1px hairline outer border, overflow hidden, {rounded.base}

Accordion

  Question / section title            ▾   ← accordion-trigger (15px / 500)
  ─────────────────────────────────────   ← hairline divider
  Answer / expanded content text.         ← accordion-content (14px / 400)

Carousel

  ←  [ Slide content ]  →   ← carousel-control buttons (32×32px circular)
        ● ○ ○ ○              ← carousel-dots (12px visual, 44px tap target)

When to use

Table: structured multi-column data sets that users need to scan, sort, or select from.
Accordion: collapsible FAQ, settings sections, or lengthy content that users explore selectively.
Separator: visual grouping of unrelated content within the same surface.
Carousel: sequential media (images, feature highlights) where only one item is shown at a time.
Resizable panels: split-view layouts where the user controls the proportion between two areas (e.g., code editor + preview).

When not to use

Don't use a table for fewer than 3 rows — use a list or a card group.
Don't use an accordion to hide critical information — users may not open it.
Don't use a carousel for content the user must not miss — carousel hides non-active slides.

Do

Provide column headers for all table columns.
Keep accordion trigger labels short and scannable.
Provide previous/next controls on carousels — do not rely on dots alone.

Don't

Don't use horizontal separators inside a table — the row borders already provide separation.
Don't auto-play carousels without providing a pause control.

Accessibility

Table ARIA: role="table" or native <table>. Sortable headers: aria-sort="ascending|descending|none". Selected rows: aria-selected="true".
Accordion ARIA: trigger uses aria-expanded and aria-controls pointing to the content panel. Content panel: role="region" with aria-labelledby pointing to the trigger.
Separator ARIA: decorative separators use role="none". If semantic, use role="separator".
Carousel ARIA: role="region" with aria-label. Live region announces slide changes. Controls: aria-label="Previous slide" / "Next slide".
Resizable handle ARIA: role="separator" with aria-orientation="vertical" and aria-valuenow (percentage) + aria-valuemin + aria-valuemax.

Known gaps

Avatar group (stacked overlapping avatars) — see zetta-avatar-group-v1_6.md (separate file, in progress).
Accessibility theme 44×44px carousel-control override — pending per stub in zetta-accessibility.md Section 7.

v1.1 Resolved

Table: row selection, bulk actions, filter panels, column configuration, saved views, sticky columns, sticky headers, virtualization, and mobile card transformation — all specified in zetta-table-v1_6.md.

Carousel slide transition animation:

Entrance: transform: translateX(100%) → translateX(0), duration {motion.duration-moderate}, easing {motion.easing-enter}.
Exit: transform: translateX(0) → translateX(-100%), same duration, easing {motion.easing-exit}.
Reduced motion: instant swap, no translate.

Display

Carousel

Build with the skill

Spec

Resizable

Build with the skill

Spec

Separator

Build with the skill

Spec

Anatomy & rules

Table

Accordion

Carousel

When to use

When not to use

Do

Don't

Accessibility

Known gaps

v1.1 Resolved

Related