Separator

Separator is a visual divider that creates clear boundaries between content sections.

Separators help organize content by providing visual breaks between different sections, groups, or elements in an interface. They can be horizontal or vertical and are particularly useful in dense layouts where clear visual separation improves scannability and comprehension. Separators are purely presentational and don't affect the semantic structure of the content, making them ideal for subtle visual organization without impacting accessibility or document outline.

Use separators to create visual hierarchy and group related content without adding excessive spacing. They work well in menus, lists, toolbars, and forms to delineate different sections or groups of controls. Separators should be used thoughtfully as overuse can create visual clutter rather than clarity.

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

All components accept standard HTML attributes and React props.

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.

Classes

CSS classes used by this component:

separator

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Select Sheet

On This Page

Example Installation Props Example Styling Classes Accessibility

Contribute

Separator

Separator is a visual divider that creates clear boundaries between content sections.

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

All components accept standard HTML attributes and React props.

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.

Classes

CSS classes used by this component:

separator

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Select Sheet

On This Page

Example Installation Props Example Styling Classes Accessibility

Contribute