Components
Separator
A thin line used to visually separate content or group related items.
Section Top
Section Bottom
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add separator to your project.
watermelon add separator2
Install manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install @rn-primitives/separator3
Import the component
Import Separator from your local UI registry output.
Import
import { Separator } from "@/components/ui/separator";Import
Import
import { Separator } from "@/components/ui/separator";Usage
The Separator is a simple horizontal or vertical line divider.
Horizontal
The default orientation is horizontal.
Section Top
Section Bottom
API Reference
| prop | type | default | description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator. |