Divider

free

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

First section

Content before the divider.

Second section

Content after the divider.

import Divider from '@/components/ui/divider';

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Divider

pnpm dlx nateui@latest add Divider

yarn dlx nateui@latest add Divider

Dashboard

Settings

Profile

Billing

import Divider from '@/components/ui/divider';

export default function VerticalDemo() {
  return (

Active plan

Your current subscription details.

Upgrade options

Available plan changes and add-ons.

import Divider from '@/components/ui/divider';

export default function DashedDemo() {
  return (

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`	`''`