ComponentsCore

Separator

A simple line element that visually breaks up content, helping users quickly scan and differentiate sections.

Example

Installation

Install following dependencies:

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

Add cn helper using clsx and twMerge for conditional class merging in Tailwind components.

lib/utils.ts

Copy and paste the following code into your project.

components/ui/core/separator.tsx
npx @libravelui@latest add separator

Anatomy

import { Separator } from "@/components/ui/core/separator";
<Separator orientation="horizontal" />
<Separator orientation="vertical" />

Another Example

With Text

A separator with text placed in the middle, visually dividing content while keeping the label visible and centered within the separator.

Props

Loading types…

Edit on GitHub

Pagination

A UI component that divides content into pages and provides navigation between them.

Tabs

Tabs organize content into multiple sections and allow users to navigate between them.