Skip to main content

Separator

Draws a rule between sections of related content.

import { Separator } from "@/fragments/ui";Source

Preview

import { Box } from '@/components/Box';
import { Separator } from '@/components/Separator';
import { Text } from '@/components/Text';

<Box width="100%">
  <Text>Standard weight</Text>

Installation

npx @usefragments/cli add separator

Writes src/fragments/ui/components/Separator plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.

Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.

Examples

With Label

A label sits inside the rule for a major break.

import { Box } from '@/components/Box';
import { Separator } from '@/components/Separator';
import { Text } from '@/components/Text';

<Box width="100%">
  <Text>First section</Text>

Vertical

Divides items sitting in a row.

import { Box } from '@/components/Box';
import { Separator } from '@/components/Separator';
import { Stack } from '@/components/Stack';
import { Text } from '@/components/Text';

<Stack direction="row" align="center" gap="md" style={{ height: '40px' }}>

Gap Options

gap sets the breathing room around the rule.

import { Box } from '@/components/Box';
import { Separator } from '@/components/Separator';
import { Text } from '@/components/Text';

<Box width="100%">
  <Text>none</Text>

API

Component props
Prop
Type
Default
Description
orientationenumhorizontalverticalhorizontalDirection of the separator
gapenumnonexssmmdlgxlnoneBreathing room around the rule
softbooleanfalseSofter, lighter appearance
labelstringNot setOptional text label (horizontal only)
styleobjectNot set—

Accessibility

  • Uses role="separator" for semantic meaning
  • Decorative separators should be aria-hidden

Guidance

Use when

  • Dividing sections that spacing alone cannot separate
  • Labelled breaks such as an Or divider
  • Splitting items inside a toolbar or row

Avoid when

  • Whenever spacing already reads as a break
  • Decorative rules (use a border)
  • Building layout structure (use Grid)

Related

  • CardsiblingCards provide stronger visual grouping

Next steps