Separator

Visually or semantically separates content.

Swiss UI

Docs

Registry

Source

Installation

Add the separator component with the shadcn CLI.

bash

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

Usage

tsx

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

Examples

Default

Swiss UI

Docs

Registry

Source

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

<div className="w-64 text-sm">
  <p>Swiss 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>