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.
Installation
You can add the divider component using our CLI or manually:
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add dividerVariants
Choose single, double, or fill. Every treatment uses BoardUI semantic border and surface tokens, so it follows the active theme automatically.
<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.
<Divider align="start">Start</Divider><Divider align="center">Center</Divider><Divider align="end">End</Divider>Buttons and controls
Children are not restricted to text. Place any compact action or control inside the divider without changing the separator layout.
import { RiAddLine } from "@remixicon/react";import { Button } from "@/components/base/buttons/button";import { ButtonGroup, ButtonGroupItem } from "@/components/base/buttons/button-group";
<Divider> <Button variant="secondary" size="small" leadingIcon={RiAddLine}> Add item </Button></Divider>
<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" />