Separator
A 1px rule that turns with its orientation and is announced as a separator.
01Preview
01aiellie/uiBase UI parts, wrapped one to one.
02Installation
npx shadcn@latest add https://aiellie.app/r/separator.json03API reference
01From the Base UI documentation
A separator element accessible to screen readers. Renders a <div> element.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | Orientation | 'horizontal' | The orientation of the separator. |
| className | string | ((state: Separator.State) => string | undefined) | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
| style | React.CSSProperties | ((state: Separator.State) => React.CSSProperties | undefined) | - | Style applied to the element, or a function that returns a style object based on the component's state. |
| render | ReactElement | ((props: HTMLProps, state: Separator.State) => ReactElement) | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Data Attributes
| Attribute | Type | Description |
|---|---|---|
| data-orientation | 'horizontal' | 'vertical' | Indicates the orientation of the separator. |