Divider

Divider is a component that separates content in a page.

Storybook@nextui-org/dividerReact AriaServer componentSourceStyles source
Zigma by NextUI (YC S24) - Connect your design files to production code in minutes | Product Hunt

We're live on Product Hunt! Join the conversation and help us get to #1 Product of the day 🚀


Installation

npx nextui-cli@latest add divider
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.

Import

Usage

Data Attributes

Divider has the following attributes on the base element:

  • data-orientation: The orientation of the divider. Based on orientation prop.

Accessibility

  • Separator role is added to the divider.
  • Support for horizontal and vertical orientation.
  • Support for HTML <hr> element or a custom element type.

API

Divider Props

AttributeTypeDescriptionDefault
orientationhorizontal | verticalThe orientation of the divider.horizontal