Separator

Visually or semantically separates content.

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsxEditable — live

render(
  <div className="text-sm">
    <p className="font-semibold text-fg">StacklyUI</p>
    <p className="text-muted">An animated component library.</p>
    <Separator className="my-4" />
    <div className="flex h-5 items-center gap-4 text-muted">
      <span>Docs</span>
      <Separator orientation="vertical" />
      <span>Guides</span>
      <Separator orientation="vertical" />
      <span>API</span>
    </div>
  </div>
)

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/separator

Or install the package and import it:

$pnpm add @stacklyui/ui motion

Usage

Import Separator from "@stacklyui/ui" and compose it as shown in the playground above. Every interactive primitive is built on Radix, so keyboard navigation, focus management, and ARIA are handled for you.