Separator

Visually or semantically separates content within a layout.

About

The Separator component is used to create a clear visual distinction between different sections of content. It supports both horizontal and vertical orientations and can be easily styled using Tailwind CSS.

Installation

Run the following command to install the separator component:

Usage

separator-usage.ts

Default

A basic separator used to divide text and navigation links.

Radix Primitives

An open-source UI component library for building high-quality design systems.

Blog
Docs
Source

Themed & Colored

Customizing the look of separators using semantic colors and varying heights/widths.

System AnalysisCore

Deep scanning of available resources and background processes.

Deployment ReadyStable

All pipelines passed. Production environment is synchronized.

Danger Zone Area
Wipe Data
Reset Keys
Purge Logs

API Reference

Brain API

The BrnSeparator component provides the core logic and accessibility for the separator.

DirectiveSelectorInputs
BrnSeparator[brnSeparator], brn-separator
orientation: 'horizontal' | 'vertical'
decorative: boolean

Helm API

The HlmSeparator component provides spartan/ui styling and supports accessibility attributes.

Class / ComponentSelectorDescription
HlmSeparatorhlm-separator The main component for rendering a separator line.