Separator

<ComponentPreview styleName="radix-nova" name="separator-demo" />

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> </TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

<Step>Install the following dependencies:</Step>

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

<ComponentSource name="separator" title="components/ui/separator.tsx" styleName="radix-nova" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </CodeTabs>

Usage

Examples

Vertical

Use orientation="vertical" for a vertical separator.

<ComponentPreview styleName="radix-nova" name="separator-vertical" />

Menu

Vertical separators between menu items with descriptions.

<ComponentPreview styleName="radix-nova" name="separator-menu" />

List

Horizontal separators between list items.

<ComponentPreview styleName="radix-nova" name="separator-list" />

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

<ComponentPreview styleName="radix-nova" name="separator-rtl" direction="rtl" />

API Reference

See the Radix UI Separator documentation.