Radix Docs

Separator

Visually or semantically separates content.

Usage


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

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The separator orientation.
`decorative`	`boolean`	`true`	If true, hides the separator from assistive technologies. When `false`, ARIA accessibility props are applied.
`asChild`	`boolean`	`false`	Clone the first child and apply all separator props to it.
`baseClassName`	`string`	-	Custom tailwind classes applied to the base separator. Takes precedence over `className`.
`className`	`string`	-	Additional classes merged when `baseClassName` is not provided.

Backbone hook that returns platform-appropriate accessibility props for the separator. On web, integrates with React Aria.

Parameters:

Parameter	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The separator orientation.
`decorative`	`boolean`	`true`	If true, hides the separator from assistive technologies.

Returns:


{
  componentProps: React.ComponentProps<typeof View> | HTMLDivElement;
}

Property	Type	Description
`componentProps`	`React.ComponentProps<typeof View> \| HTMLDivElement`	Props to spread on the separator root element.

When decorative is true (default), the separator is visually rendered but not exposed to assistive technologies.
When decorative is false, the component sets role="separator", accessibilityRole="separator", and aria-orientation.
Web uses useSeparator to ensure correct semantics.

The separator uses Tailwind Variants:

Use baseClassName to override the base classes entirely, or className to merge additional classes.