Divider Component
React divider component for separating content. Horizontal and vertical orientation, optional centered label, dashed style and spacing scales — built with Tailwind CSS.
Import
1import { Divider } from "@neuctra/ui";Basic Usage
Above
Below
With Label
A centered label between two hairlines — great for auth forms.
Vertical
Use inside a flex row; it stretches to the row height.
Props
All available props for the Divider component.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the separator |
| label | ReactNode | — | Centered label (horizontal only) |
| dashed | boolean | false | Dashed line style |
| spacing | "none" | "sm" | "md" | "lg" | "md" | Outer margin along the axis |
| lineClassName | string | — | Styles the hairline segments (labeled horizontal variant only). |
| labelClassName | string | — | Styles the centered label (labeled horizontal variant only). |
Accessibility
- Renders role="separator" with the correct aria-orientation.
- Decorative hairlines around the label are aria-hidden.
Frequently Asked Questions
How do I install and import the Divider component?
Install the @neuctra/ui package, then import it with: import { Divider } from "@neuctra/ui";
Can I customize the Divider component's appearance?
Yes. Divider accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.
Is the Divider component accessible?
Divider is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.