Divider

Horizontal or vertical separator for dividing content.

import { Divider } from "ui-lab-components";
 
export function Example() {
  return <Divider />;
}

Basic Divider

A simple horizontal divider separating content sections. Use this to create visual separation between different areas of your interface.

Content above
Content below
import React from 'react';
import { Divider } from 'ui-lab-components';
 
export default function Example() {
  return (
    <div className="space-y-4">
      <div className="text-foreground-300">Content above</div>
      <Divider />
      <div className="text-foreground-300">Content below</div>
    </div>
  );
}

Pattern Variants

Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.

Solid
Dashed
Dotted
import { Divider } from 'ui-lab-components';
 
export default function Example() {
  return (
    <div className="space-y-6 w-full">
      <div className="space-y-2">
        <span className="text-sm text-foreground-400">Solid</span>
        <Divider variant="solid" />
      </div>
      <div className="space-y-2">
        <span className="text-sm text-foreground-400">Dashed</span>
        <Divider variant="dashed" />
      </div>
      <div className="space-y-2">
        <span className="text-sm text-foreground-400">Dotted</span>
        <Divider variant="dotted" />
      </div>
    </div>
  );
}

Vertical Orientation

Vertical dividers separate side-by-side content. All pattern variants work in both horizontal and vertical orientations.

FirstSecondThirdFourth
import React from 'react';
import { Divider } from 'ui-lab-components';
 
export default function Example() {
  return (
    <div className="flex items-center gap-4 h-16">
      <span className="text-foreground-300">First</span>
      <Divider orientation="vertical" variant="solid" spacing="none" />
      <span className="text-foreground-300">Second</span>
      <Divider orientation="vertical" variant="dashed" spacing="none" />
      <span className="text-foreground-300">Third</span>
      <Divider orientation="vertical" variant="dotted" spacing="none" />
      <span className="text-foreground-300">Fourth</span>
    </div>
  );
}
UI Lab