Separator
Visual divider using semantic hr element. Horizontal or vertical.
Usage
tsx
1import { Separator } from '@storm-ds/ui'23<Separator />Horizontal
Content above
Content below
Vertical
Left
Right
Right
tsx
1<Separator orientation="vertical" />With Label
Content above
OR
Content below
tsx
1<Separator label="OR" />In List
Item 1$10
Item 2$20
Total$30
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Divider direction |
| label | string | undefined | Text displayed in the center of horizontal separator |
| className | string | - | Custom classes |
Use with AI
Create a Next.js component using Storm UI's Separator. Import: `import { Separator } from '@storm-ds/ui'`. Semantic hr with border storm-border. Default horizontal (w-full), set orientation="vertical" for vertical (h-full). Use label prop to display centered text on horizontal separators. Example: `<Separator />`, `<Separator orientation="vertical" />`, or `<Separator label="OR" />`