║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Seperator Pro description: Separates layout sections with customizable styles and orientations.

<ComponentPreview name="seperatorpro-demo" className="" description="Default horizontal and vertical line separator" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="seperatorpro" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="@radix-ui/react-separator" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>seperatorpro.tsx</code> </p> <ComponentSource name="seperatorpro" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p> ```jsx import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); }

</Steps>
  </TabsContent>
</Tabs>

## Usage

```tsx
import { SeparatorPro } from "@/components/ui/seperatorpro";

<SeparatorPro variant="wave" className="my-4" />
<SeparatorPro variant="wave" orientation="vertical" className="h-4" />

Examples

---

<Step>Dotted Seperator</Step>

<ComponentPreview name="seperatorprodotted" className="" description="A dotted style separator with vertical support" />

---

<Step>Wavy Seperator</Step>

<ComponentPreview name="seperatorprowavy" className="" description="A wavy styled separator for creative layouts" />

---

API Reference

SeparatorPro

The SeparatorPro component renders a visual divider with support for multiple stylistic variants and orientations.

Props

<PropsTable rows={[ { prop: "variant", type: "default" | "dots" | "wave", default: "default", description: "Visual style of the separator." }, { prop: "orientation", type: "horizontal" | "vertical", default: "horizontal", description: "Direction of the separator." }, { prop: "className", type: "string", default: "—", description: "Optional class for custom styling." }, { prop: "...props", type: "HTMLDivElement attributes", default: "—", description: "All standard div element props." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║