Components · Data display
Accordion
Collapsible sections separated by hairlines. Built on native <details>/<summary>,
so toggling and keyboard support come for free. Try it in the preview.
Preview
Light
What is Zetta?
A token-first design system delivered as a skill — three themes and ~70 components.
How do I use it?
Install the plugin and let your AI apply the skill in your own stack.
Is there a package?
No — Zetta ships tokens and specs, not a shared component library.
Dark
What is Zetta?
A token-first design system delivered as a skill — three themes and ~70 components.
How do I use it?
Install the plugin and let your AI apply the skill in your own stack.
Is there a package?
No — Zetta ships tokens and specs, not a shared component library.
Accessibility
What is Zetta?
A token-first design system delivered as a skill — three themes and ~70 components.
How do I use it?
Install the plugin and let your AI apply the skill in your own stack.
Is there a package?
No — Zetta ships tokens and specs, not a shared component library.
Spec
Values and token references straight from the Zetta spec.
accordion-item
- borderBottomColor
- {colors.hairline}
- borderBottomWidth
- 1px
accordion-trigger
- display
- flex
- alignItems
- center
- justifyContent
- space-between
- width
- 100%
- textColor
- {colors.ink}
- fontFamily
- Geist
- fontSize
- 15px
- fontWeight
- 500
- lineHeight
- 1.6
- paddingY
- 14px
- cursor
- pointer
- iconColor
- {colors.muted}
- iconSize
- 16px
accordion-trigger-hover
- textColor
- {colors.brand}
accordion-trigger-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
accordion-content
- textColor
- {colors.body}
- fontFamily
- Geist
- fontSize
- 14px
- fontWeight
- 400
- lineHeight
- 1.6
- paddingBottom
- {spacing.md}
Build with the skill
No package to install — hand this to your AI to generate the accordion in your stack.
Implement the Zetta "Accordion" component in this project's stack using the zetta-design-md skill.
- Apply the `accordion` spec from the skill (variants: trigger, content).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.Anatomy & rules
- Items separated by a 1px
hairline. Trigger: 15 / 500 Geist,ink, 14px vertical padding, 16px chevron inmutedthat rotates on open. - Hover shifts the trigger text to
brand; focus shows a 2px ring. Content: 14 / 400body, 16px bottom padding.
Known gaps
- Single-open (exclusive) accordion mode is not yet specified — native
<details>allows multiple open.