Components · Data display

Separator

A 1px hairline divider for separating content. Horizontal by default; supports a vertical variant.

Preview

Light

Section one

Section two

Dark

Section one

Section two

Accessibility

Section one

Section two

Spec

Values and token references straight from the Zetta spec.

separator

color: {colors.hairline}
thickness: 1px

Build with the skill

No package to install — hand this to your AI to generate the separator in your stack.

Prompt for your AI

Implement the Zetta "Separator" component in this project's stack using the zetta-design-md skill.

- Apply the `separator` spec from the skill.
- 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

1px hairline. Use a semantic <hr> or role="separator" with the right aria-orientation.

Known gaps

A labeled separator (text in the middle of the rule) is not yet specified.