How do I install the Vibe UI Separator component?

You can install Separator into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add separator" in your terminal.

Does Vibe UI Separator support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Separator component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Separator

A custom, uniform styled separator line layout divider.

Separator

A custom, uniform styled separator line layout divider.

Preview

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

Installation

pnpm dlx vibe-ui-kit@latest add separator

Preset Variations

Explore the visual design presets for both horizontal and vertical orientations, including Default, Glassmorphic, Retro Neobrutalist, Neon Glow, and Cyberpunk divider styles.

Horizontal Presets

Default

Glassmorphic

Retro Neobrutalist

Neon Glow

Cyberpunk Terminal

Vertical Presets

DEF

GLS

RTR

GLW

CYB

Props

Separator

Prop	Type	Default	Description
orientation	'horizontal' \| 'vertical'	'horizontal'	The layout direction orientation of the divider line.
variant	'default' \| 'retro' \| 'glass' \| 'glow' \| 'cyberpunk'	'default'	The visual preset style variant of the separator line.
asChild	boolean	false	Change the default rendering element to the element passed in children (via Radix Slot).