Divider

A horizontal or vertical line that separates content, with an optional label.

Default

The default divider renders a native hr; border utilities adjust its color and thickness.

tsx

import { Divider } from "@hummingbirdui/react";

export default function DividerDefault() {
  return (
    <div className="mx-auto max-w-sm">
      <Divider />
      <Divider className="border-primary" />
      <Divider className="border-t-2 border-danger" />
      <Divider className="border-t-4 border-success" />
    </div>
  );
}

Vertical

Setting orientation="vertical" renders a vertical rule, sized and colored through utility classes.

tsx

import { Divider } from "@hummingbirdui/react";

export default function DividerVertical() {
  return (
    <div className="mx-auto flex h-32 items-center justify-center gap-8">
      <Divider orientation="vertical" className="h-10" />
      <Divider
        orientation="vertical"
        className="h-20 border-s-2 border-warning"
      />
      <Divider orientation="vertical" className="h-30 border-s-4 border-info" />
    </div>
  );
}

With label

Passing children turns the divider into a labeled divider, and the align prop positions the label at start, center (default), or end.

START

CENTER

END

tsx

import { Divider } from "@hummingbirdui/react";

export default function DividerLabel() {
  return (
    <div className="mx-auto max-w-sm">
      <Divider align="start">START</Divider>
      <Divider>CENTER</Divider>
      <Divider align="end">END</Divider>
    </div>
  );
}

Vertical with label

Labeled dividers also work vertically.

START

CENTER

END

tsx

import { Divider } from "@hummingbirdui/react";

export default function DividerVerticalLabel() {
  return (
    <div className="flex w-full justify-around">
      <Divider orientation="vertical" align="start">
        START
      </Divider>
      <Divider orientation="vertical">CENTER</Divider>
      <Divider orientation="vertical" align="end">
        END
      </Divider>
    </div>
  );
}

Label colors

The line segments around a label are styled with before: and after: border utilities.

START

CENTER

END

tsx

import { Divider } from "@hummingbirdui/react";

export default function DividerLabelColors() {
  return (
    <div className="mx-auto max-w-sm">
      <Divider align="start" className="after:border-primary after:border-t-2">
        START
      </Divider>
      <Divider className="before:border-success before:border-t-4 after:border-success after:border-t-4">
        CENTER
      </Divider>
      <Divider align="end" className="before:border-warning before:border-t-6">
        END
      </Divider>
    </div>
  );
}

API Reference

Divider

Prop	Type	Default
`orientation`	`enum`	`"horizontal"`
`align`	`enum`	`"center"`
`className`	`string`	—

Styling

Hummingbird React divider is styled entirely through Hummingbird's utility classes and CSS variables.

See the full list of available divider classes in the Class overview.
Visit the CSS Variables documentation to explore all available variables.

PreviousDialog NextDrawer