Separator - Prisma — ContextQMD

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

Usage

Horizontal Separator

The default separator is horizontal:

tsx

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

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

Live Example:

<div className="max-w-md my-4"> <div className="space-y-4"> <div className="text-sm">Content above separator</div> <Separator /> <div className="text-sm">Content below separator</div> </div> </div>

Vertical Separator

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

tsx

import { Separator } from "@prisma/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:

<div className="max-w-md my-4"> <div className="flex items-center gap-4 h-12"> <span className="text-sm">Left</span> <Separator orientation="vertical" /> <span className="text-sm">Right</span> </div> </div>

In Navigation

Use separators to divide navigation items:

tsx

import { Separator } from "@prisma/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:

<div className="max-w-md my-4"> <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> </div>

Section Divider

Use horizontal separators to divide page sections:

tsx

import { Separator } from "@prisma/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:

<div className="max-w-2xl my-4"> <div className="space-y-6"> <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> </div>

Custom Styling

Customize the separator appearance:

tsx

import { Separator } from "@prisma/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:

<div className="max-w-md my-4"> <div className="space-y-6"> <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> </div>

In Cards

Use separators within card components:

tsx

import { Separator } from "@prisma/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:

<div className="max-w-md my-4"> <div className="border rounded-lg p-6"> <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> </div>

Toolbar Separator

Use vertical separators in toolbars:

tsx

import { Separator } from "@prisma/eclipse";
import { Button } from "@prisma/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:

<div className="my-4"> <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> </div>

List Separator

Separate list items:

tsx

import { Separator } from "@prisma/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:

<div className="max-w-md my-4 border rounded-lg p-4"> <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>

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:

tsx

<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