Divider

A visual separator used to create clear boundaries between different sections of content.

Divider

Divider is a visual separator that can be used to create clear boundaries between different sections of content. It can be horizontal or vertical, with various style options.

Basic Divider Example

import { Divider } from "@akitectio/aki-ui";

export default function DividerExample() {
  return (
    <Divider />
  );
}

Orientations

Dividers can be horizontal (default) or vertical to match your layout needs.

Horizontal

Vertical

import { Divider } from "@akitectio/aki-ui";

export default function DividerOrientations() {
  return (
    <div className="flex flex-col gap-4">
      <div className="w-full">
        <p className="mb-2">Horizontal (Default)</p>
        <Divider />
      </div>
      
      <div className="h-32">
        <p className="mb-2">Vertical</p>
        <Divider orientation="vertical" className="h-full" />
      </div>
    </div>
  );
}

Variants

Dividers come in different style variants to match your design.

Solid (Default)

Dashed

Dotted

import { Divider } from "@akitectio/aki-ui";

export default function DividerVariants() {
  return (
    <div className="space-y-6">
      <div>
        <p className="mb-2">Solid</p>
        <Divider variant="solid" />
      </div>
      
      <div>
        <p className="mb-2">Dashed</p>
        <Divider variant="dashed" />
      </div>
      
      <div>
        <p className="mb-2">Dotted</p>
        <Divider variant="dotted" />
      </div>
    </div>
  );
}

Colors and Thickness

Customize the appearance of dividers with different colors and thicknesses.

Custom Color

Custom Thickness

Color & Thickness

import { Divider } from "@akitectio/aki-ui";

export default function CustomDividers() {
  return (
    <div className="space-y-6">
      <div>
        <p className="mb-2">Custom Color</p>
        <Divider color="#3B82F6" />
      </div>
      
      <div>
        <p className="mb-2">Custom Thickness</p>
        <Divider thickness={3} />
      </div>
      
      <div>
        <p className="mb-2">Custom Color and Thickness</p>
        <Divider color="#10B981" thickness={2} />
      </div>
    </div>
  );
}

Divider with Label

Add text labels to dividers to provide additional context.

CENTER

RIGHT

import { Divider } from "@akitectio/aki-ui";

export default function DividerWithLabel() {
  return (
    <div className="space-y-6">
      <Divider label="OR" />
      
      <Divider 
        label="CENTER" 
        labelAlignment="center" 
      />
      
      <Divider 
        label="LEFT" 
        labelAlignment="left" 
      />
      
      <Divider 
        label="RIGHT" 
        labelAlignment="right" 
      />
      
      <Divider 
        label={<span className="px-2 py-1 bg-blue-100 text-blue-800 rounded">CUSTOM</span>} 
        color="#3B82F6" 
      />
    </div>
  );
}

Divider in a Card

Use dividers to separate different sections within a card or container.

Card Header

This is the card header content

This is the card body content

Card Footer

import { Divider, Card } from "@akitectio/aki-ui";

export default function DividerInCard() {
  return (
    <Card className="w-80 overflow-hidden">
      <div className="p-4">
        <h3 className="text-lg font-medium">Card Header</h3>
        <p className="text-sm text-gray-600">This is the card header content</p>
      </div>
      
      <Divider />
      
      <div className="p-4">
        <p className="text-sm text-gray-600">This is the card body content</p>
      </div>
      
      <Divider />
      
      <div className="p-4 bg-gray-50">
        <p className="text-sm text-gray-600">Card Footer</p>
      </div>
    </Card>
  );
}

Props Reference

Prop	Type	Default	Description
orientation	horizontal, vertical	horizontal	The orientation of the divider
variant	solid, dashed, dotted	solid	The style variant of the divider
thickness	number	1	The thickness of the divider in pixels
color	string	-	The color of the divider
light	boolean	false	Whether the divider should have a lighter color
margin	number	0	The margin around the divider in pixels
label	ReactNode	-	Label to display in the middle of the divider
labelAlignment	center, left, right	center	Alignment of the label within the divider
className	string	-	Additional CSS classes