Separator

Horizontal Separator

Divides sections horizontally

End of content

Column 1

Column 2

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

<div class="w-full max-w-sm space-y-4">
  <div>
    <h4 class="text-sm font-medium">Horizontal Separator</h4>
    <p class="text-muted-foreground text-sm">Divides sections horizontally</p>
  </div>
  <Separator />
  <div>
    <h4 class="text-sm font-medium">End of content</h4>
  </div>
  <div class="flex h-20 gap-4">
    <div>
      <p class="text-sm">Column 1</p>
    </div>
    <Separator orientation="vertical" />
    <div>
      <p class="text-sm">Column 2</p>
    </div>
  </div>
</div>

Installation

To install the separator component, run the following command:

pnpm dlx shadcn@latest add @fulldev-ui/separator

Usage

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

<Separator />