Nusa UINusa UI

Separator

Previous: SelectNext: Sheet

Visually separates content.

Docs API Reference
registry/examples/separator-demo.tsx
import { Separator } from "@/registry/ui/separator"

export default function SeparatorDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/separator.json

Usage

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

Examples

Horizontal

Content above
Content below
registry/examples/separator-horizontal.tsx
import { Separator } from "@/registry/ui/separator"

export default function SeparatorHorizontal() {

Vertical

registry/examples/separator-vertical.tsx
import { Separator } from "@/registry/ui/separator"

export default function SeparatorVertical() {

API Reference

Separator

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"The orientation of the separator
decorativebooleantrueWhether the separator is decorative
SelectSheet

On this page

InstallationUsageExamplesHorizontalVerticalAPI ReferenceSeparator