Components
Separator
a horizontal or vertical divider built on Base UI
Loading...
Installation
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/separator.jsonnpx shadcn@latest add https://prototyper-ui.com/r/separator.jsonyarn dlx shadcn@latest add https://prototyper-ui.com/r/separator.jsonbunx --bun shadcn@latest add https://prototyper-ui.com/r/separator.jsonThis will add the following files to your project:
components/ui/separator.tsx
Usage
import { Separator } from "@/components/ui/separator"<Separator />Styling
Data Slots
Use data-slot attributes to target the separator in CSS:
| Slot name | Element |
|---|---|
separator | The separator <div> root |
Customization Examples
/* Custom separator color */
[data-slot="separator"] {
@apply bg-primary/20;
}
/* Thicker horizontal separator */
[data-slot="separator"][data-horizontal] {
@apply h-0.5;
}<Separator className="bg-primary/20" />API Reference
Separator
A visual divider between content sections.
Prop
Type
All Base UI Separator props are forwarded via ...props.
Accessibility
Keyboard Interactions
Separator is a non-interactive display element and does not have keyboard interactions.
ARIA Attributes
- Renders with
role="separator"via Base UI. aria-orientationis set to"horizontal"or"vertical"based on theorientationprop.
Stream UI
This component is available in @prototyperai/stream-ui.
Catalog Definition
import { z } from "zod"
import { defineComponent } from "@prototyperai/stream-ui/catalog"
export default defineComponent({
description: "A visual divider between sections of content",
props: z.object({
orientation: z
.enum(["horizontal", "vertical"])
.optional()
.describe("Direction of the separator line, defaults to horizontal"),
decorative: z
.boolean()
.optional()
.describe("If true, the separator is purely decorative and hidden from assistive technology"),
}),
events: [],
example: { orientation: "horizontal" },
})Example Spec
{
"root": "sep",
"elements": {
"sep": {
"type": "Separator",
"props": {
"orientation": "horizontal"
}
}
}
}Learn more in the Stream UI documentation.