Divider

free

Divider separates content with a thin horizontal or vertical line, with an optional dashed style.

Preview

Dark

First section

Content before the divider.

Second section

Content after the divider.

import Divider from '@/components/composites/Divider';

export default function UsageDemo() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div>
        <div className="font-medium">First section</div>
        <p className="text-sm text-muted-foreground">
          Content before the divider.
        </p>
      </div>
      <Divider />
      <div>
        <div className="font-medium">Second section</div>
        <p className="text-sm text-muted-foreground">
          Content after the divider.
        </p>
      </div>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Divider

Examples

Vertical

Preview

Dark

Dashboard

Settings

Profile

Billing

import Divider from '@/components/composites/Divider';

export default function VerticalDemo() {
  return (
    <div className="flex items-center gap-4">
      <span className="text-sm font-medium">Dashboard</span>
      <Divider orientation="vertical" className="h-5" />
      <span className="text-sm font-medium">Settings</span>
      <Divider orientation="vertical" className="h-5" />
      <span className="text-sm font-medium">Profile</span>
      <Divider orientation="vertical" className="h-5" />
      <span className="text-sm font-medium">Billing</span>
    </div>
  );
}

Dashed

Preview

Dark

Active plan

Your current subscription details.

Upgrade options

Available plan changes and add-ons.

import Divider from '@/components/composites/Divider';

export default function DashedDemo() {
  return (
    <div className="w-full max-w-md space-y-4">
      <div>
        <div className="font-medium">Active plan</div>
        <p className="text-sm text-muted-foreground">
          Your current subscription details.
        </p>
      </div>
      <Divider dashed />
      <div>
        <div className="font-medium">Upgrade options</div>
        <p className="text-sm text-muted-foreground">
          Available plan changes and add-ons.
        </p>
      </div>
    </div>
  );
}

API

Prop	Description	Type	Default
`orientation`	Direction of the separator line.	`'horizontal' \| 'vertical'`	`'horizontal'`
`dashed`	Renders a dashed line instead of solid.	`boolean`	`false`
`className`	Additional classes on the separator element.	`string`	`''`