Content dividers
A break between two runs of content: one ContentDivider in three types around whatever child you give it. The sheet’s six content forms are compositions.
Content dividers
A break between two runs of content: one ContentDivider in three types around whatever child you give it. The sheet’s six content forms are compositions.
Demo
Type is the one visual prop; Content and Label stand in for the sheet’s Type axis, which the kit leaves to the child.
One element, and the child is the rest
ContentDivider takes a type, a className, and children, and that is the whole API. The six things the sheet draws in the middle are six things you put there, so the copied snippet carries the child and its imports along with the element.Contextual demo
A divider is only as good as what it sits between: a sign-in card, a chat thread, and a list of notifications.
Three consumers already ship it
single-line divider today, all three with a <span className="text-tertiary text-sm font-medium"> inside it: OR in login-simple-social-logins.tsx and signup-02-modal.tsx, Today in message-chat-menu.tsx, which also passes className="my-4". That span is the Text style this page calls TextLabel.The family
One export, one file, one import path.
| Component | Description | Import from |
|---|---|---|
| ContentDivider | The whole family: one element in three types, holding whatever you put in the middle. It draws the rules, the borders, or the fill, and styles nothing inside. | @/components/application/content-divider/content-divider |
The variant space
Three types across the sheet’s six content values: 18 symbols, one panel per type, every middle composed from kit parts.
Three heights from one label
single-line has no vertical padding, so it is the label’s line box; dual-line adds py-3 inside its two 1px borders, 1 + 12 + 20 + 12 + 1; background-fill adds py-2, 8 + 20 + 8. The sheet draws the same symbol at 44, not 46: a Figma stroke sits inside the frame and adds no height, where the CSS border adds its pixel each side. The gap between the child and the rules is gap-x-2, 8px, on all three, and the rules are 1px of border-secondary. A taller child makes a taller row: by their own classes, a sm Button is py-2 on a 20px line, 36px, and a sm ButtonUtility is p-1.5 around a 20px icon, 32px. Since 2026-08-23 items-center keeps a bordered child from stretching to the row height.One symbol breaks the pattern
1252:127672, is drawn at 10px of padding with a 4px gap where the other five dual-line symbols use 12 and 8. The kit has no Type prop, so it cannot know a button icon is inside it and draws 12 and 8 regardless. Recorded as Figma-only; the Code tab has the row.Label styles
The sheet draws two label styles and the kit draws neither: the child brings its own type. Both are here, plus none.
The label is yours to set
content-divider.tsx mentions text: no size, no weight, no color, no text-center, no whitespace-nowrap. The sheet sets the last two on every label and the kit leaves them to the child, which is why the long label above wraps where the sheet’s would not. This page exports HeadingLabel and TextLabel for its own demos; in product code, write the span.