Divider

It's a line.

import { Divider } from '@/components/divider'

function Example() {
  return <Divider />
}

import { Divider } from '@/components/divider'

function Example() {
  return <Divider />
}

Component API

Prop	Default	Description
Divider extends the JSX `<hr>` element
`soft`	`false`	Whether the divider should use a softer color.

Use the Divider component to add a horizontal rule between items:

import { Divider } from '@/components/divider'

function Example() {
  return <Divider />
}

import { Divider } from '@/components/divider'

function Example() {
  return <Divider />
}

Use the soft prop for secondary dividers:

import { Divider } from '@/components/divider'

function Example() {
  return <Divider soft />
}

import { Divider } from '@/components/divider'

function Example() {
  return <Divider soft />
}

Use utility classes like my-* to control the vertical spacing around a divider:

import { Divider } from '@/components/divider'

function Example() {
  return <Divider className="my-6" />
}

import { Divider } from '@/components/divider'

function Example() {
  return <Divider className="my-6" />
}