Skip to main content

​
Overview

The Separator component provides a visual divider between sections of content. Built on Base UI’s Separator primitive, it supports both horizontal and vertical orientations.

​
Usage

import { Separator } from "@kuzenbo/core";

export default function Example() {
  return (
    <div className="flex w-full flex-col gap-4">
      <div className="space-y-1">
        <p className="text-sm font-medium">Billing summary</p>
        <p className="text-muted-foreground text-sm">
          24 active seats across 3 product teams
        </p>
      </div>
      <Separator />
      <div className="space-y-1">
        <p className="text-sm font-medium">Next invoice</p>
        <p className="text-muted-foreground text-sm">
          July 1, 2026 at 09:00 UTC
        </p>
      </div>
    </div>
  );
}

​
Vertical Separator

For inline content, use the vertical orientation: 
import { Separator } from "@kuzenbo/core";

export default function VerticalExample() {
  return (
    <div className="flex h-8 items-center gap-2">
      <span className="text-sm">Overview</span>
      <Separator orientation="vertical" />
      <span className="text-sm">Deployments</span>
    </div>
  );
}

​
Props

​
orientation
'horizontal' | 'vertical'
default:"horizontal"
The orientation of the separator.
​
className
string
Additional CSS classes to apply to the separator.
The Separator component extends all Base UI Separator props.

​
Styling

The separator automatically adjusts its dimensions based on orientation:
  • Horizontal: Full width, 1px height
  • Vertical: 1px width, stretches to parent height

​
Accessibility

The component includes:
  • data-slot="separator" attribute for styling and testing
  • data-orientation attribute set to horizontal or vertical
  • Built on Base UI’s accessible Separator primitive

Build docs developers (and LLMs) love

Get started for freeTalk to us