Content

Divider

Use Semji dividers with Tailwind CSS to separate content vertically or horizontally for clean, organized web layouts.

Variants

Vertical divider

Utilize the component class `divider` to create vertical content divisions. Apply the modifier class `divider-{semantic-color}` to specify different colors for the dividers.

Horizontal divider

Use the responsive class `divider-horizontal` with the component class `divider` to create horizontal content divisions.

With content (horizontal)

Add text or icon within the divider markup to show it within the horizontal divider line.

Text

With content (vertical)

Insert icons or text into the divider markup following the examples below to display them within the divider line.

Text

Styles

Default

The following example represents the default style for the divider line.

Default

Dotted

Apply the modifier class `divider-dotted` to display the divider line in a dotted pattern.

Dotted

Dashed

Apply the modifier class `divider-dashed` to display the divider line in a dashed pattern.

Dashed

Custom thickness

Utilize the TailwindCSS <a href="https://tailwindcss.com/docs/hover-focus-and-other-states#before-and-after" target="_blank" class="link link-primary">state</a> classes `after:` and `before:` along with the border classes `border-e-*` for vertical dividers and `border-t-*` for horizontal dividers to customize their thickness.

Default

Dotted

Dashed

Content positions

Vertical divider content

Use the responsive classes `divider-start` and `divider-end` to position content at the start and end positions, respectively. By default, the content is centered.

Start

Center

End

Horizontal divider content

Use the responsive classes `divider-start` and `divider-end` to position content at the start and end positions in horizontal divider, respectively. By default, the content is centered.

Start

Center

End

Illustrations

Responsive — Horizontally

The responsive dividers adapt according to breakpoints.

Responsive — Vertically

Utilize responsive breakpoint classes alongside the responsive class `divider-vertical` to adjust the divider alignment to vertical at specific breakpoints.

Buttons with divider

Use the example below to implement buttons with a responsive horizontal divider.

Buttons with vertical divider

Use the example below to implement buttons with a vertical divider.

Class referenceThe component, style, color, state, size and modifier classes available for this component.

Class	Type	Description
`divider`	component	Base class for divider components.
`divider-dashed`	style	Renders the divider line with a dashed pattern.
`divider-dotted`	style	Renders the divider line with a dotted pattern.
`divider-neutral`	color	Renders the divider line with a 'neutral' color.
`divider-primary`	color	Renders the divider line with a 'primary' color.
`divider-secondary`	color	Renders the divider line with a 'secondary' color.
`divider-accent`	color	Renders the divider line with an 'accent' color.
`divider-success`	color	Renders the divider line with a 'success' color.
`divider-warning`	color	Renders the divider line with a 'warning' color.
`divider-info`	color	Renders the divider line with an 'info' color.
`divider-error`	color	Renders the divider line with an 'error' color.
`divider-end`	placement	Aligns the divider text to the end.
`divider-start`	placement	Aligns the divider text to the start.
`divider-vertical`	direction	Positions elements vertically (default).
`divider-horizontal`	direction	Positions elements horizontally.