Basic Components

Divider

Renders a thin line to separate content and create a clear visual hierarchy. Dividers can be used to group related items in lists and layouts.

Source Edit this page

Renders a thin line to separate content and create a clear visual hierarchy. Dividers can be used to group related items in lists and layouts.

Basic Divider

A simple horizontal divider.

Content above the divider

Content below the divider

<Col>
  <Text>Content above the divider</Text>
  <Divider />
  <Text>Content below the divider</Text>
</Col>

Divider Sizes

Sizes (xs, sm, md, lg, xl) drive the per-size vertical padding via --py-unit. The line itself stays one pixel; pass padding to make the surrounding spacing visible.

Divider xs

Content after xs divider

Divider sm

Content after sm divider

Divider md (default)

Content after md divider

Divider lg

Content after lg divider

Divider xl

Content after xl divider

<Col lg>
  <div>
    <Text semibold>Divider xs</Text>
    <Divider xs padding />
    <Text>Content after xs divider</Text>
  </div>
  <div>
    <Text semibold>Divider sm</Text>
    <Divider sm padding />
    <Text>Content after sm divider</Text>
  </div>
  <div>
    <Text semibold>Divider md (default)</Text>
    <Divider padding />
    <Text>Content after md divider</Text>
  </div>
  <div>
    <Text semibold>Divider lg</Text>
    <Divider lg padding />
    <Text>Content after lg divider</Text>
  </div>
  <div>
    <Text semibold>Divider xl</Text>
    <Divider xl padding />
    <Text>Content after xl divider</Text>
  </div>
</Col>

Divider Appearances

Dividers use inherit by default. Pass an explicit appearance for a colored line.

Divider primary

Content after primary divider

Divider brand

Content after brand divider

Divider accent

Content after accent divider

Divider secondary

Content after secondary divider

Divider tertiary

Content after tertiary divider

Divider success

Content after success divider

Divider danger

Content after danger divider

Divider warning

Content after warning divider

<Col lg>
  <div>
    <Text semibold>Divider primary</Text>
    <Divider primary />
    <Text>Content after primary divider</Text>
  </div>
  <div>
    <Text semibold>Divider brand</Text>
    <Divider brand />
    <Text>Content after brand divider</Text>
  </div>
  <div>
    <Text semibold>Divider accent</Text>
    <Divider accent />
    <Text>Content after accent divider</Text>
  </div>
  <div>
    <Text semibold>Divider secondary</Text>
    <Divider secondary />
    <Text>Content after secondary divider</Text>
  </div>
  <div>
    <Text semibold>Divider tertiary</Text>
    <Divider tertiary />
    <Text>Content after tertiary divider</Text>
  </div>
  <div>
    <Text semibold>Divider success</Text>
    <Divider success />
    <Text>Content after success divider</Text>
  </div>
  <div>
    <Text semibold>Divider danger</Text>
    <Divider danger />
    <Text>Content after danger divider</Text>
  </div>
  <div>
    <Text semibold>Divider warning</Text>
    <Divider warning />
    <Text>Content after warning divider</Text>
  </div>
</Col>

Filled Variant

filled swaps the outline appearance for a solid bar in the same color.

<Col lg>
  <Divider primary filled />
  <Divider brand filled />
  <Divider accent filled />
  <Divider success filled />
  <Divider danger filled />
</Col>

Vertical Divider

Pass vertical to render a vertical separator. Useful for inline navigation or toolbars; place it inside a Row so it can stretch to the row's height.

Home

About

Contact

<Row className="h-10">
  <Text>Home</Text>
  <Divider vertical />
  <Text>About</Text>
  <Divider vertical />
  <Text>Contact</Text>
</Row>

Separating List Items

Use Divider between items in a Stack or Col to group related rows.

Plan

Pro

Seats

Renews

May 2026

<Stack>
  <Row justifyBetween>
    <Text semibold>Plan</Text>
    <Text>Pro</Text>
  </Row>
  <Divider />
  <Row justifyBetween>
    <Text semibold>Seats</Text>
    <Text>12</Text>
  </Row>
  <Divider />
  <Row justifyBetween>
    <Text semibold>Renews</Text>
    <Text>May 2026</Text>
  </Row>
</Stack>

Separating Content Blocks

Dividers also work as section breaks between larger blocks of content.

Block 1

The first block introduces the topic and sets context for the sections that follow.

Block 2

The second block expands on the idea, with the divider providing a clear visual break.

Block 3

The third block closes out the sequence, demonstrating consistent rhythm throughout.

<Col lg>
  <div>
    <Text semibold lg>Block 1</Text>
    <Text>The first block introduces the topic and sets context for the sections that follow.</Text>
  </div>
  <Divider />
  <div>
    <Text semibold lg>Block 2</Text>
    <Text>The second block expands on the idea, with the divider providing a clear visual break.</Text>
  </div>
  <Divider />
  <div>
    <Text semibold lg>Block 3</Text>
    <Text>The third block closes out the sequence, demonstrating consistent rhythm throughout.</Text>
  </div>
</Col>

Divider Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance	✓	Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`noPadding`	Padding	✓	Disable internal padding
`padding`	Padding		Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display		Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`horizontal`	Orientation	✓	Display as a horizontal line (default)
`vertical`	Orientation		Display as a vertical line instead of horizontal
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint