Command Palette

Search for a command to run...

Separator

shadcn/ui

Visually or semantically separates content.

Separator

Horizontal

Item 1
Item 2
Item 3

With Decorations

import { Separator } from "@/components/optics/separator";<>  <div className="w-full">    <h4 className="text-sm font-medium">      Horizontal    </h4>    <Separator className="my-4" />    <div className="flex h-5 items-center space-x-4 text-sm">      <div>        Item 1      </div>      <Separator orientation="vertical" />      <div>        Item 2      </div>      <Separator orientation="vertical" />      <div>        Item 3      </div>    </div>  </div>  <Separator    className="my-4"    decoration  />  <div className="w-full">    <h4 className="text-sm font-medium">      With Decorations    </h4>    <Separator      className="my-4"      decoration    />  </div></>

Installation

pnpm dlx shadcn@latest add @optics/separator

Props

<Separator />
Name
Type
orientation
string(default: horizontal)
decoration
boolean(default: false)
decorationLeft
boolean(default: false)
decorationRight
boolean(default: false)
decorationTop
boolean(default: false)
decorationBottom
boolean(default: false)
render
React.ReactElement