Mordecai
Getting Started
Forms
Layout
Cards
Navigation
Data Display
Feedback
Overlays
Utilities
Blocks
CMS Integration
GitHub

Separator

Visually or semantically separates content.

Basic Usage

Loading...
SeparatorHorizontal and vertical separators

Installation

pnpm add @corew500/ui

Usage

import { Separator } from "@mordecai-design-system/ui"
<Separator />

Examples

Horizontal (Default)

<div>
  <h4>Section 1</h4>
  <Separator className="my-4" />
  <h4>Section 2</h4>
</div>

Vertical

<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>

In Navigation

<nav className="flex items-center space-x-2">
  <Button variant="ghost">Home</Button>
  <Separator orientation="vertical" className="h-6" />
  <Button variant="ghost">Products</Button>
  <Separator orientation="vertical" className="h-6" />
  <Button variant="ghost">About</Button>
</nav>

In Cards

<Card>
  <CardHeader>
    <CardTitle>Account</CardTitle>
  </CardHeader>
  <Separator />
  <CardContent>
    <p>Manage your account settings.</p>
  </CardContent>
  <Separator />
  <CardFooter>
    <Button>Save</Button>
  </CardFooter>
</Card>

With Label

<div className="flex items-center gap-4">
  <Separator className="flex-1" />
  <span className="text-xs text-muted-foreground">OR</span>
  <Separator className="flex-1" />
</div>

Props

PropTypeDefaultDescription
orientationenumhorizontalThe orientation of the separator.
styleenum—Style applied to the element, or a function that returns a style object based on the component’s state.
classNameenum—CSS class applied to the element, or a function that returns a class based on the component’s state.
renderenum—Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.