JGuang / JGuang UI
Components组件Radix UIRadix UI 组件

Separator

Visually or semantically separates content.

Partially translated: Chinese navigation, titles, descriptions, and common headings. The technical body is currently in English.
Loading JGuang UI example…

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install radix-ui

Copy and paste the following code into your project.

View complete source: components/ui/separator.tsx

Update the import paths to match your project setup.

Usage

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

Vertical

Use orientation="vertical" for a vertical separator.

Loading JGuang UI example…

Vertical separators between menu items with descriptions.

Loading JGuang UI example…

List

Horizontal separators between list items.

Loading JGuang UI example…

RTL

To enable RTL support in JGuang UI, see the RTL configuration guide.

Loading JGuang UI example…

API Reference

See the Radix UI Separator documentation.

Source: components/radix/separator.mdx

Technical documentation for JGuang UI.

On this page