Candor UI

Separator

Pro

shadcn's separator (Radix) in Candor's theme.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/separator

Brings in: utils · npm: radix-ui@^1.8.1

Usage

TSX · The example above
"use client"

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

export default function Example() {
  return (
    <div className="w-full max-w-sm text-sm">
      <p className="font-medium">acme-api</p>
      <p className="text-muted-foreground">86 tables · 142 migrations</p>
      <Separator className="my-3" />
      <div className="flex h-5 items-center gap-3 text-muted-foreground">
        <span>Staging</span>
        <Separator orientation="vertical" />
        <span>main</span>
        <Separator orientation="vertical" />
        <span>Read 4 minutes ago</span>
      </div>
    </div>
  )
}

<Separator>

No props.

Also takes the props of React.ComponentProps<typeof SeparatorPrimitive.Root>.