Separator
The React Separator component is used to divide content into sections. It helps visually and semantically separate items in layouts such as menus, lists, or pages.
It improves readability by adding clear boundaries between content. For example, you can use it between sidebar items, page sections, or menu groups.
Built with React and styled using Tailwind CSS. It supports both horizontal and vertical divider and works well in accessible UI layouts.
Tailgrids Primitives
An open-source UI component library.
Blog
Docs
Source
Installation
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add separatorAnatomy
Import the component and pass the required props.
import { Separator } from "@/registry/core/separator";
export const SeparatorExample = () => <Separator />;Examples
Orientation
The Separator component supports both horizontal and vertical orientations.
Horizontal:
Content above separator
Content below separator
Vertical:
Left content
Middle content
Right content
API Reference
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the separator. |
className | string | - | Additional CSS classes to apply to the separator. |
Accessibility
- Semantic role: The separator visually divides content. Use it to separate sections in layouts, menus, or lists clearly.
- Orientation: Set the correct orientation (horizontal or vertical) so the separator matches the layout structure.
- Non-interactive element: The separator does not handle focus or keyboard interaction, so it should not be used as an interactive element.
