Prologue

Contribution Guide
Release Notes
Upgrade Guide

Getting Started

Introduction
Installation
Client Side Routing
Working with AI
llms.txt

Dark Mode

Inertia.js
Next.js
Vite

Buttons

Button
Button Group
Toggle
Toggle Group
File Trigger

Collections

Menu
Table
Grid List
List Box
Tag Group
Tree
Choice Box
Dropdown
Autocomplete
Virtualizer

Colors

Color Field
Color Picker
Color Area
Color Slider
Color Swatch
Color Swatch Picker
Color Thumb
Color Wheel

Controls

Toolbar
Switch
Command Menu
Context Menu
Keyboard
Slider
Scroll Area

Date And Time

Calendar
Range Calendar
Date Field
Date Picker
Date Range Picker
Time Field

Drag And Drop

Drop Zone

Forms

Checkbox
Checkbox Group
Field
Input
Input Otp
Number Field
Search Field
Tag Field
Text Field
Textarea
Radio Group

Layouts

Container
Navbar
Sidebar

Media

Avatar
Carousel

Navigation

Disclosure
Disclosure Group
Breadcrumbs
Tabs
Link
Pagination
Snippet

Overlays

Dialog
Sheet
Popover
Preview
Tooltip

Pickers

Select
Multiple Select
Native Select
Combo Box

Statuses

Badge
Loader
Meter
Note
Progress Bar
Progress Circle
Skeleton
Toast

Surfaces

Heading
Card
Description List
Separator
Show More
Text

Visualizations

Chart
Area Chart
Line Chart
Bar Chart
Pie Chart
Radar Chart
Radial Bar Chart
Leaderboard
Tracker

Separator

useSeparator

Installation

Add the component with the CLI.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/separator

Manual installation

Install the dependencies, then copy the component source into your project.

npm

pnpm

yarn

bun

npm install react-aria-components cn

Anatomy

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

<Separator orientation='vertical | horizontal' />

Examples

Orientation

Separator has two orientations: horizontal and vertical. The default is horizontal.

Component API

Separator extends the React Aria Components <Separator> component.

classNamestring

See the React Aria useSeparator reference for the full API reference.

Heading