Design System Builder

Separator

Separator is a component component that provides separator functionality.

Active

Examples

orientation

Different orientation options for the Separator component.

horizontal

vertical

Installation

npm install @your-design-system/separator
import { Separator } from "@/components/ui/separator"

export function SeparatorDemo() {
  return (
    <Separator orientation="horizontal">
      {/* Content */}
    </Separator>
  )
}

API Reference

This component does not accept any props.

Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.

Base Classes

shrink-0bg-border

orientation Variants

horizontal

h-pxw-full

vertical

w-pxh-full

Design System Compliance

This component is validated against atomic design principles and foundation token usage.