Seperator Pro

Separates layout sections with customizable styles and orientations.

ScrollX UI

An open-source UI component library.

Blog
Docs
Source

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/seperatorpro.json 

Usage

import { SeparatorPro } from "@/components/ui/seperatorpro";
<SeparatorPro variant="wave" className="my-4" />
<SeparatorPro variant="wave" orientation="vertical" className="h-4" />

Examples


Dotted Seperator

ScrollX UI

An open-source UI component library.

Blog
Docs
Source

Wavy Seperator

ScrollX UI

An open-source UI component library.

Blog
Docs
Source

API Reference

SeparatorPro

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

Props

PropertyTypeDefaultDescription
variant"default" | "dots" | "wave""default"
Visual style of the separator.
orientation"horizontal" | "vertical""horizontal"
Direction of the separator.
classNamestring
Optional class for custom styling.
...propsHTMLDivElement attributes
All standard div element props.

Built withby Ahdeetai.