Skip to main content
ninna-ui

Divider

Visual separator for content sections with horizontal, vertical, and text variants.

import { Divider } from "@ninna-ui/primitives"
pnpm add @ninna-ui/primitives

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Divider component in your application.

import { Divider , Code } from "@ninna-ui/primitives";


export default function Example() {
  return (
    <div> 
      <Divider variant="horizontal" />
       
      <Divider variant="vertical" className="h-20" />
       
      <Divider variant="with-text" text="OR" color="primary" />
    </div>
  );
}

Horizontal

Horizontal dividers for separating content vertically

Soft (default)

Solid

Vertical

Vertical dividers for separating content horizontally

Soft
Solid

With Text

Dividers with centered text for labeled sections

Colors

All color variants for with-text dividers

Use Cases

Real-world divider usage examples

Content Sections

Section 1

This is the first section of content with some descriptive text.

Section 2

This is the second section separated by a horizontal divider.

Login Form

Sidebar Layout

Main Content

This is the main content area.

Sidebar

This is the sidebar content.

List Items

Item 1

Description for item 1

Item 2

Description for item 2

Item 3

Description for item 3

Section Headers

Content related to personal information goes here.

Content related to account settings goes here.

API Reference

Complete list of props for the Divider component.

Props

PropTypeDefaultDescription
variant'horizontal' | 'vertical' | 'with-text''horizontal'Orientation and style variant of the divider
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''primary'Color theme for the text (with-text variant only)
weight'soft' | 'solid''soft'Line weight/opacity - soft for subtle, solid for prominent
textstringundefinedText to display (only for with-text variant)
classNamestringundefinedAdditional CSS classes

Accessibility

  • Uses semantic role="separator" for screen readers
  • Includes aria-orientation attribute for horizontal and vertical variants
  • For with-text variant, uses aria-label to announce the text content
  • Dividers are non-interactive and purely presentational
  • Color contrast meets WCAG AA standards for all weight variants
  • Works correctly in both light and dark modes