Yami

Separator

Visually or semantically separates content.

Yami UI

Docs
Registry
Source

Installation

Add the separator component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/separator.json

Usage

import { Separator } from "@/components/ui/separator"

<div className="w-64 text-sm">
  <p>Yami UI</p>
  <Separator className="my-3" />
  <div className="flex h-5 items-center gap-3">
    <span>Docs</span>
    <Separator orientation="vertical" />
    <span>Registry</span>
  </div>
</div>

Examples

Default

Yami UI

Docs
Registry
Source

Code

import { Separator } from "@/components/ui/separator"

<div className="w-64 text-sm">
  <p>Yami UI</p>
  <Separator className="my-3" />
  <div className="flex h-5 items-center gap-3">
    <span>Docs</span>
    <Separator orientation="vertical" />
    <span>Registry</span>
  </div>
</div>