Separator

React Separator component is used to visually or semantically separates content.

Tailgrids Primitives

An open-source UI component library.

Blog
Docs
Source

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add separator

Anatomy

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

PropTypeDefaultDescription
orientation'horizontal', 'vertical''horizontal'The orientation of the separator.
classNamestring-Additional CSS classes to apply to the separator.