All components

LAYOUT / COMPONENTS

Divider

Separate content with restraint.

Live component2 documented props

About divider

Required copy, this will always be here

01

Anatomy

Shared parts, named consistently.

  1. 1
    DividerRequired

    Dividers in cards mark sections or show expandable areas, aiding organization. (Visible only when the card expands.)

Try the default

A working example with the shared V1 visual language.

Continue with your workspace

Create a new design system

When to use

Use only where space and headings do not make grouping clear. Avoid unnecessary visual noise in short lists.

The separator is semantic and noninteractive; it does not receive focus.

Related components

Source & adaptation

V1 semantic colors, DM Sans typography, compact controls, and responsive layouts. The API table describes this implementation; source design notes may use earlier API terminology.

components/library/layout.tsx