Separator

A flexible, customizable, and accessible separator component for dividing content.

Introduction

The Separator component is a versatile utility for dividing content. It supports horizontal and vertical orientations, optional labels, dashed styles, and accessibility features.

Separator Example

Radix Primitives

An open-source UI component library.

Blog

Docs

Source

Installation

Install the separator component:

npx axionjs-ui add separator

Horizontal Separator Example

Section Divider

Aligned Start

Aligned End

Vertical Separator Example

Divider

Dashed

Custom Separator Example

Custom Styled Separator

Vertical Example

File Structure

separator.tsx

Prop Types

Prop	Type	Default
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative`	`boolean`	`true`
`dashed`	`boolean`	`false`
`label`	`ReactNode`	-
`labelPosition`	`"start" \| "center" \| "end"`	`"center"`

Features

Customizable Orientation:
- Supports both horizontal and vertical dividers.
Optional Labels:
- Add labels to horizontal and vertical separators for clarity.
Dashed Style:
- Apply dashed styling to the separator line.
Accessibility:
- Mark decorative separators for assistive technologies.

Accessibility

Keyboard and Assistive Tech:
- Decorative separators are marked with aria-hidden="true" by default.
- Labeled separators are semantically meaningful for screen readers.
Semantic Markup:
- Uses appropriate ARIA roles for vertical and horizontal lines.

Conclusion

The Separator component is a simple yet versatile utility for visually and semantically dividing content in your application. It’s customizable and supports various use cases.