Divider

Horizontal or vertical separator for dividing content.

import { Divider } from 'ui-lab-components/divider';
 
export function Example() {
  return <Divider variant="solid" orientation="horizontal" />;
}

divider/01-divider-basic-divider

A simple horizontal divider separating content sections.

Loading interactive preview
import { Divider } from 'ui-lab-components/divider';
 
export const metadata = {
  title: 'Basic Divider',
  description: 'A simple horizontal divider separating content sections. Use this to create visual separation between different areas of your interface.'
};
 
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>
  );
}

divider/02-divider-pattern-variants

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

Loading interactive preview
import { Divider } from 'ui-lab-components/divider';
 
export const metadata = {
  title: 'Pattern Variants',
  description: 'Dividers support three distinct pattern styles: solid for continuous lines, dashed for rectangular segments, and dotted for circular dots.'
};
 
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>
  );
}

divider/03-divider-vertical-divider

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

Loading interactive preview
import { Divider } from 'ui-lab-components/divider';
 
export const metadata = {
  title: 'Vertical Orientation',
  description: 'Vertical dividers separate side-by-side content. All pattern variants work in both horizontal and vertical orientations.'
};
 
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