Components
Separator
A hairline between groups of content.
shadcn/uiLayout and utility
shadcn/ui docs (opens in a new tab)Radix API (opens in a new tab)components/ui/separator.tsxPreview
BrandDesign system
Installation
It's already in this Base. In another project, add it with the shadcn CLI, then switch its cn import to @/lib/utils, its icons to @/components/icons, and its text-sm and text-xs to text-ui-s and text-ui-xs.
npx shadcn@latest add separatorExamples
Vertical
DocsSourceFigma
Props
The ones that change how it looks or behaves. The rest are the Radix primitive's, in its API.
| Prop | Type | Default |
|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" |
| decorative | boolean | true |
Guidelines
Use it
- Between groups that space alone doesn't separate enough.
Don't
- Put one between every row: use spacing first.
Used in
The screens in this Base that show it, found in the code.
- The app shell, on every screen