Divider

Horizontal or vertical separator between content

Basic

Basic Divider

Preview Code Auto

Content

Div('Content', cls='card bg-base-300 rounded-box grid h-20 place-items-center'),
Div('OR', cls='divider'),
Div('Content', cls='card bg-base-300 rounded-box grid h-20 place-items-center'),

Horizontal Divider

Preview Code Auto

Content

Div(
    Div('Content', cls='card bg-base-200 rounded-box grid h-20 flex-grow place-items-center'),
    Div('OR', cls='divider divider-horizontal'),
    Div('Content', cls='card bg-base-200 rounded-box grid h-20 flex-grow place-items-center'),
    cls='flex w-full'
)

No text Divider

Preview Code Auto

Content

Div(
    Div('Content', cls='card bg-base-200 rounded-box grid h-20 flex-grow place-items-center'),
    Div(cls='divider'),
    Div('Content', cls='card bg-base-200 rounded-box grid h-20 flex-grow place-items-center'),
    cls='flex w-full flex-col'
)

Responsive Divider

Changes orientation based on screen size

Preview Code Auto

Content

Div(
    Div('Content', cls='card bg-base-300 rounded-box grid h-32 flex-grow place-items-center'),
    Div('OR', cls='divider lg:divider-horizontal'),
    Div('Content', cls='card bg-base-300 rounded-box grid h-32 flex-grow place-items-center'),
    cls='flex w-full flex-col lg:flex-row'
)

Variants

Color Variants

Preview Code Auto

Default

Primary

Secondary

Neutral

Accent

Info

Success

Warning

Error

Div(
    Div('Default', cls='divider'),
    Div('Primary', cls='divider divider-primary'),
    Div('Secondary', cls='divider divider-secondary'),
    Div('Neutral', cls='divider divider-neutral'),
    Div('Accent', cls='divider divider-accent'),
    Div('Info', cls='divider divider-info'),
    Div('Success', cls='divider divider-success'),
    Div('Warning', cls='divider divider-warning'),
    Div('Error', cls='divider divider-error'),
    cls='flex w-full flex-col'
)

Vertical Positioning

Preview Code Auto

Start

Default

End

Div(
    Div('Start', cls='divider divider-start'),
    Div('Default', cls='divider'),
    Div('End', cls='divider divider-end'),
    cls='flex w-full flex-col'
)

Horizontal Positioning

Preview Code Auto

Start

Default

End

Div(
    Div('Start', cls='divider divider-horizontal divider-start'),
    Div('Default', cls='divider divider-horizontal'),
    Div('End', cls='divider divider-horizontal divider-end'),
    cls='flex w-full justify-center h-52'
)

Class Reference

Class	Type	Description
divider	Component	Base class
divider-primary	Color	Primary color variant
divider-secondary	Color	Secondary color variant
divider-accent	Color	Accent color variant
divider-neutral	Color	Neutral color variant
divider-info	Color	Info color variant
divider-success	Color	Success color variant
divider-warning	Color	Warning color variant
divider-error	Color	Error color variant
divider-horizontal	Direction	Horizontal divider
divider-vertical	Direction	Vertical divider
divider-start	Placement	Aligns divider to start
divider-end	Placement	Aligns divider to end

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo