Divider

A composable horizontal separator for organizing dense application interfaces. Use a single hairline, framed double line, or soft filled strip, then place text, buttons, or compact controls anywhere along it.

Notifications

Today

Latest activity

Installation

You can add the divider component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

CLI

Manual

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add divider

Variants

Choose single, double, or fill. Every treatment uses BoardUI semantic border and surface tokens, so it follows the active theme automatically.

Single line

Double line

Background fill

<Divider>Single line</Divider><Divider variant="double">Double line</Divider><Divider variant="fill">Background fill</Divider>

Alignment

The align prop positions content at the start, center, or end. Single-line dividers keep the hairline on the open side.

Start

Center

End

<Divider align="start">Start</Divider><Divider align="center">Center</Divider><Divider align="end">End</Divider>

Icons, chips, buttons and avatars

Children are not restricted to text. An icon, a chip, a button, a button group, or a stack of avatars all sit in the same slot, and the line closes around whatever width they take. No extra props are involved: the content is composed as children, so anything compact belongs here.

NEW

import { RiAddLine, RiArrowDownLine, RiArrowUpLine } from "@remixicon/react";import { Avatar } from "@/components/base/avatar/avatar";import { Chip } from "@/components/base/badges/chip";import { Button } from "@/components/base/buttons/button";import { ButtonGroup, ButtonGroupItem } from "@/components/base/buttons/button-group";
{/* Icon */}<Divider>  <RiAddLine className="size-5 text-foreground-icon-secondary" aria-hidden /></Divider>
{/* Chip */}<Divider>  <Chip color="neutral">NEW</Chip></Divider>
{/* Button */}<Divider>  <Button variant="secondary" size="small">Button</Button></Divider>
{/* Button group */}<Divider>  <ButtonGroup size="small" aria-label="Move item">    <ButtonGroupItem size="small" aria-label="Move down">      <RiArrowDownLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Add between">      <RiAddLine className="size-5" aria-hidden />    </ButtonGroupItem>    <ButtonGroupItem size="small" aria-label="Move up">      <RiArrowUpLine className="size-5" aria-hidden />    </ButtonGroupItem>  </ButtonGroup></Divider>
{/* Avatar group */}<Divider>  <div className="flex items-center">    <Avatar size="md" src="/avatars/aspen-lubin.webp" alt="Aspen Lubin"      className="ring-2 ring-background-primary-default" />    <Avatar size="md" src="/avatars/john-clarkson.webp" alt="John Clarkson"      className="-ml-2 ring-2 ring-background-primary-default" />    <span className="-ml-2 inline-flex size-8 items-center justify-center rounded-full bg-neutral-900 text-caption-1-semibold text-white ring-2 ring-background-primary-default dark:bg-neutral-700">      +7    </span>  </div></Divider>
{/* Any of the above also works on the filled surface */}<Divider variant="fill">  <ButtonGroup size="small" aria-label="Activity filter">    <ButtonGroupItem size="small" selected>All</ButtonGroupItem>    <ButtonGroupItem size="small">Unread</ButtonGroupItem>    <ButtonGroupItem size="small">Archived</ButtonGroupItem>  </ButtonGroup></Divider>

Without content

Omit children for a purely structural separator. In this form the component exposes the native separator role and horizontal orientation to assistive technology.

<Divider aria-label="Section break" /><Divider variant="double" aria-label="Section break" /><Divider variant="fill" aria-label="Section break" />