Prisma /eclipse

Separator

A visual divider component for separating content horizontally or vertically, built on Radix UI.

Usage

Horizontal Separator

The default separator is horizontal:

import { Separator } from "@prisma-docs/eclipse";

export function HorizontalSeparator() {
  return (
    <div className="space-y-4">
      <div>Content above</div>
      <Separator />
      <div>Content below</div>
    </div>
  );
}

Live Example:

Content above separator
Content below separator

Vertical Separator

Use vertical orientation to separate content side-by-side:

import { Separator } from "@prisma-docs/eclipse";

export function VerticalSeparator() {
  return (
    <div className="flex items-center gap-4 h-12">
      <span>Left</span>
      <Separator orientation="vertical" />
      <span>Right</span>
    </div>
  );
}

Live Example:

Left
Right

In Navigation

Use separators to divide navigation items:

import { Separator } from "@prisma-docs/eclipse";

export function NavSeparator() {
  return (
    <nav className="flex items-center gap-4">
      <a href="#" className="text-sm hover:underline">Home</a>
      <Separator orientation="vertical" className="h-4" />
      <a href="#" className="text-sm hover:underline">About</a>
      <Separator orientation="vertical" className="h-4" />
      <a href="#" className="text-sm hover:underline">Contact</a>
    </nav>
  );
}

Live Example:

Section Divider

Use horizontal separators to divide page sections:

import { Separator } from "@prisma-docs/eclipse";

export function SectionDivider() {
  return (
    <div className="space-y-6 max-w-2xl">
      <div>
        <h3 className="text-lg font-semibold mb-2">Section 1</h3>
        <div className="text-sm text-muted-foreground">
          This is the first section of content with some description text.
        </div>
      </div>
      
      <Separator />
      
      <div>
        <h3 className="text-lg font-semibold mb-2">Section 2</h3>
        <div className="text-sm text-muted-foreground">
          This is the second section of content with some description text.
        </div>
      </div>
    </div>
  );
}

Live Example:

Section 1

This is the first section of content with some description text.

Section 2

This is the second section of content with some description text.

Custom Styling

Customize the separator appearance:

import { Separator } from "@prisma-docs/eclipse";

export function CustomSeparator() {
  return (
    <div className="space-y-6 max-w-md">
      <div>
        <div className="text-sm mb-4">Default separator</div>
        <Separator />
      </div>
    
      <div>
        <div className="text-sm mb-4">Thicker separator</div>
        <Separator className="h-[2px]" />
      </div>
    
      <div>
        <div className="text-sm mb-4">Colored separator</div>
        <Separator className="bg-blue-500" />
      </div>
    
      <div>
        <div className="text-sm mb-4">Dashed separator</div>
        <Separator className="border-t border-dashed border-border bg-transparent" />
      </div>
    </div>
  );
}

Live Example:

Default separator
Thicker separator
Colored separator
Dashed separator

In Cards

Use separators within card components:

import { Separator } from "@prisma-docs/eclipse";

export function CardSeparator() {
  return (
    <div className="border rounded-lg p-6 max-w-md">
      <div>
        <h3 className="text-lg font-semibold">Card Title</h3>
        <div className="text-sm text-muted-foreground mt-1">
          Subtitle or description text
        </div>
      </div>
      
      <Separator className="my-4 w-[calc(100%_+_48px)] -mx-6" />
      
      <div className="space-y-2">
        <div className="flex justify-between text-sm">
          <span>Item 1</span>
          <span className="font-medium">$10.00</span>
        </div>
        <div className="flex justify-between text-sm">
          <span>Item 2</span>
          <span className="font-medium">$15.00</span>
        </div>
      </div>
      
      <Separator className="my-4 w-[calc(100%_+_48px)] -mx-6" />
      
      <div className="flex justify-between font-semibold">
        <span>Total</span>
        <span>$25.00</span>
      </div>
    </div>
  );
}

Live Example:

Card Title

Subtitle or description text

Item 1$10.00
Item 2$15.00
Total$25.00

Toolbar Separator

Use vertical separators in toolbars:

import { Separator } from "@prisma-docs/eclipse";
import { Button } from "@prisma-docs/eclipse";

export function ToolbarSeparator() {
  return (
    <div className="flex items-center gap-2 p-2 border rounded-lg w-fit">
      <Button size="lg" variant="default-weaker">Bold</Button>
      <Button size="lg" variant="default-weaker">Italic</Button>
      
      <Separator orientation="vertical" className="h-6" />
      
      <Button size="lg" variant="default-weaker">Link</Button>
      <Button size="lg" variant="default-weaker">Image</Button>
      
      <Separator orientation="vertical" className="h-6" />
      
      <Button size="lg" variant="default-weaker">Undo</Button>
      <Button size="lg" variant="default-weaker">Redo</Button>
    </div>
  );
}

Live Example:

List Separator

Separate list items:

import { Separator } from "@prisma-docs/eclipse";

export function ListSeparator() {
  return (
    <div className="max-w-md">
      <div className="py-3">
        <h4 className="font-medium">Item 1</h4>
        <div className="text-sm text-muted-foreground">Description for item 1</div>
      </div>
  
      <Separator />
  
      <div className="py-3">
        <h4 className="font-medium">Item 2</h4>
        <div className="text-sm text-muted-foreground">Description for item 2</div>
      </div>
  
      <Separator />
  
      <div className="py-3">
        <h4 className="font-medium">Item 3</h4>
        <div className="text-sm text-muted-foreground">Description for item 3</div>
      </div>
    </div>
  );
}

Live Example:

Item 1

Description for item 1

Item 2

Description for item 2

Item 3

Description for item 3

Component Props

Separator

  • orientation - Separator direction ("horizontal" | "vertical", default: "horizontal")
  • decorative - Whether separator is decorative or semantic (boolean, default: true)
  • className - Additional CSS classes (string, optional)
  • All standard Radix UI Separator props

Features

  • ✅ Horizontal and vertical orientations
  • ✅ Built on Radix UI for accessibility
  • ✅ Semantic or decorative modes
  • ✅ Customizable appearance with className
  • ✅ Proper ARIA attributes
  • ✅ Minimal and clean design
  • ✅ Works in any layout
  • ✅ Fully typed with TypeScript

Best Practices

  • Use horizontal separators for content sections
  • Use vertical separators in toolbars and navigation
  • Set appropriate height for vertical separators
  • Use sparingly to avoid visual clutter
  • Consider using spacing alone instead of separators when possible
  • Use decorative={false} for semantic separators that convey meaning
  • Keep separator styling subtle and minimal
  • Match separator color to your design system

Common Use Cases

The Separator component is perfect for:

  • Navigation - Dividing menu items
  • Toolbars - Grouping related actions
  • Cards - Separating card sections
  • Lists - Dividing list items
  • Forms - Separating form sections
  • Sidebars - Organizing sidebar content
  • Dashboards - Dividing dashboard widgets
  • Content sections - Breaking up long content

Accessibility

The Separator component follows accessibility best practices:

  • Uses Radix UI's accessible separator primitive
  • Proper ARIA role (separator or none if decorative)
  • Semantic meaning when decorative={false}
  • Properly oriented for horizontal/vertical layouts
  • Works with screen readers
  • Respects user preferences
  • Provides visual structure for all users

Styling

The Separator component uses design tokens:

  • Background: bg-border
  • Horizontal height: h-[1px]
  • Vertical width: w-[1px]
  • Shrink behavior: shrink-0

Customize by passing className:

<Separator className="bg-blue-500 h-[2px]" />
<Separator orientation="vertical" className="bg-red-500 w-[2px] h-8" />

Integration with Other Components

Separator works well with:

  • Navigation - Menu and nav bars
  • Cards - Dividing card content
  • Buttons - Button groups and toolbars
  • Lists - Item dividers
  • Dropdowns - Menu section dividers
  • Sidebars - Content organization
  • Forms - Section separators
  • Dialogs - Modal content sections

Radio Group

A radio group component built on Radix UI for mutually exclusive selections with keyboard navigation.

Slider

An interactive slider component for selecting values within a range.

On this page

UsageComponent PropsFeaturesBest PracticesCommon Use CasesAccessibilityStylingIntegration with Other Components