🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Separator

A visual divider that separates content into distinct sections.

Separators (also called dividers) create visual boundaries between groups of content, helping organize information and improve scannability. They can be horizontal or vertical lines and optionally include text labels. Separators are commonly used in menus, lists, forms, and layouts to create clear visual separation without adding significant spacing.

Built on top of Radix UI's Separator primitive with proper accessibility support including ARIA attributes that identify it as a separator for screen readers.

Example

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

"use client"

import { Separator } from "@strongtie/design-system/separator"

export function SeparatorDefault() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Installation


npm install @strongtie/design-system

import { Separator } from "@strongtie/design-system/separator"

Props

`<Separator>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`text`	`string`	-	Optional text to display within the separator. When provided, renders as a line with text in the middle.

Example

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

"use client"

import { Separator } from "@strongtie/design-system/separator"

export function SeparatorDefault() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

separator

Additional Classes

Other CSS classes used by this component:

-horizontal
-text
-vertical
horizontal
separator

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI separator Documentation

Select Sheet

On This Page

Example Installation Props <Separator>Example Styling Component Slots Additional Classes Accessibility Resources

Contribute

Separator

A visual divider that separates content into distinct sections.

Built on top of Radix UI's Separator primitive with proper accessibility support including ARIA attributes that identify it as a separator for screen readers.

Example

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

"use client"

import { Separator } from "@strongtie/design-system/separator"

export function SeparatorDefault() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}

Installation


npm install @strongtie/design-system

import { Separator } from "@strongtie/design-system/separator"

Props

`<Separator>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default	Description
`text`	`string`	-	Optional text to display within the separator. When provided, renders as a line with text in the middle.

Example

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

"use client"

import { Separator } from "@strongtie/design-system/separator"

export function SeparatorDefault() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
        <p className="text-muted-foreground text-sm">
          An open-source UI component library.
        </p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Blog</div>
        <Separator orientation="vertical" />
        <div>Docs</div>
        <Separator orientation="vertical" />
        <div>Source</div>
      </div>
    </div>
  )
}