# Component Documentation

## Table of Contents

- **Actions**
  - [Accordion](#accordion)
  - [Button](#button)
  - [Dropdown](#dropdown)
  - [Modal](#modal)
  - [Swap](#swap)
  - [Theme Controller](#theme-controller)

- **Data Display**
  - [Avatar](#avatar)
  - [Badge](#badge)
  - [Card](#card)
  - [Carousel](#carousel)
  - [Chat Bubble](#chat-bubble)
  - [Collapse](#collapse)
  - [Countdown](#countdown)
  - [Diff](#diff)
  - [Kbd](#kbd)
  - [List](#list)
  - [Stat](#stat)
  - [Status](#status)
  - [Table](#table)
  - [Timeline](#timeline)

- **Navigation**
  - [Breadcrumbs](#breadcrumbs)
  - [Dock](#dock)
  - [Link](#link)
  - [Menu](#menu)
  - [Navbar](#navbar)
  - [Pagination](#pagination)
  - [Steps](#steps)
  - [Tabs](#tabs)

- **Feedback**
  - [Alert](#alert)
  - [Loading](#loading)
  - [Progress](#progress)
  - [Radial Progress](#radial-progress)
  - [Skeleton](#skeleton)
  - [Toast](#toast)
  - [Tooltip](#tooltip)

- **Data Input**
  - [Calendar](#calendar)
  - [Checkbox](#checkbox)
  - [Fieldset](#fieldset)
  - [File Input](#file-input)
  - [Filter](#filter)
  - [Label](#label)
  - [Radio](#radio)
  - [Range](#range)
  - [Rating](#rating)
  - [Select](#select)
  - [Text Input](#text-input)
  - [Textarea](#textarea)
  - [Toggle](#toggle)
  - [Validator](#validator)

- **Layout**
  - [Divider](#divider)
  - [Drawer](#drawer)
  - [Footer](#footer)
  - [Hero](#hero)
  - [Indicator](#indicator)
  - [Join](#join)
  - [Mask](#mask)
  - [Stack](#stack)

- **Mockup**
  - [Browser Mockup](#browser)
  - [Code Mockup](#code)
  - [Phone Mockup](#phone)
  - [Window Mockup](#window)

<a id="accordion"></a>

## Accordion  
**Category**: Actions
Expandable content panels with single-open-at-a-time behavior (radio input based)
### Examples

#### Radio Input Accordion  
```python
Div(
    Input(type='radio', name='my-accordion-1', checked=True),
    Div('How do I create an account?', cls='collapse-title font-semibold'),
    Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
    cls='collapse bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-1'),
    Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
    Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
    cls='collapse bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-1'),
    Div('How do I update my profile information?', cls='collapse-title font-semibold'),
    Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
    cls='collapse bg-base-100 border border-base-300'
)
```

#### Arrow Icons  
```python
Div(
    Input(type='radio', name='my-accordion-2', checked=True),
    Div('How do I create an account?', cls='collapse-title font-semibold'),
    Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
    cls='collapse collapse-arrow bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-2'),
    Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
    Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
    cls='collapse collapse-arrow bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-2'),
    Div('How do I update my profile information?', cls='collapse-title font-semibold'),
    Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
    cls='collapse collapse-arrow bg-base-100 border border-base-300'
)
```

#### Plus/Minus Icons  
```python
Div(
    Input(type='radio', name='my-accordion-3', checked=True),
    Div('How do I create an account?', cls='collapse-title font-semibold'),
    Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
    cls='collapse collapse-plus bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-3'),
    Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
    Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
    cls='collapse collapse-plus bg-base-100 border border-base-300'
),
Div(
    Input(type='radio', name='my-accordion-3'),
    Div('How do I update my profile information?', cls='collapse-title font-semibold'),
    Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
    cls='collapse collapse-plus bg-base-100 border border-base-300'
)
```

#### Joined Accordion  
```python
Div(
    Div(
        Input(type='radio', name='my-accordion-4', checked=True),
        Div('How do I create an account?', cls='collapse-title font-semibold'),
        Div('Click the "Sign Up" button in the top right corner and follow the registration process.', cls='collapse-content text-sm'),
        cls='collapse collapse-arrow join-item border-base-300 border'
    ),
    Div(
        Input(type='radio', name='my-accordion-4'),
        Div('I forgot my password. What should I do?', cls='collapse-title font-semibold'),
        Div('Click on "Forgot Password" on the login page and follow the instructions sent to your email.', cls='collapse-content text-sm'),
        cls='collapse collapse-arrow join-item border-base-300 border'
    ),
    Div(
        Input(type='radio', name='my-accordion-4'),
        Div('How do I update my profile information?', cls='collapse-title font-semibold'),
        Div('Go to "My Account" settings and select "Edit Profile" to make changes.', cls='collapse-content text-sm'),
        cls='collapse collapse-arrow join-item border-base-300 border'
    ),
    cls='join join-vertical bg-base-100 w-full'
    )
```

<a id="button"></a>

## Button  
**Category**: Actions
Clicky clicky
### Examples

#### Base Button  
```python
Button('Button', cls='btn')
```

#### Element Types  
```python
A('Link', role='button', cls='btn'),
Button('Button', type='submit', cls='btn'),
Input(type='button', value='Input', cls='btn'),
Input(type='submit', value='Submit', cls='btn'),
Input(type='radio', aria_label='Radio', cls='btn'),
Input(type='checkbox', aria_label='Checkbox', cls='btn'),
Input(type='reset', value='Reset', cls='btn')
```

#### Leading Icon  
```python
Button( SVG, 'Like', cls='btn')
```

#### Loading Spinner  
```python
Button(Span(cls='loading loading-spinner'), cls='btn btn-square')
Button(Span(cls='loading loading-spinner mr-2'),'Loading...', cls='btn' )
```

#### Size Variants  
```python
Button('XLarge', cls='btn btn-xl')
Button('Large', cls='btn btn-lg')
Button('Medium', cls='btn')
Button('Small', cls='btn btn-sm')
Button('Xsmall', cls='btn btn-xs')
```

#### Soft Buttons  
```python
Button('Default', cls='btn btn-soft')
Button('Primary', cls='btn btn-soft btn-primary')
Button('Secondary', cls='btn btn-soft btn-secondary')
Button('Accent', cls='btn btn-soft btn-accent')
Button('Info', cls='btn btn-soft btn-info')
Button('Success', cls='btn btn-soft btn-success')
Button('Warning', cls='btn btn-soft btn-warning')
Button('Error', cls='btn btn-soft btn-error')
```

#### Square Buttons  
```python
Button( SVG, cls='btn btn-square'),
Button( SVG, cls='btn btn-square btn-outline')
```

#### Outline Buttons  
```python
Button('Default', cls='btn btn-outline')
Button('Primary', cls='btn btn-outline btn-primary')
Button('Secondary', cls='btn btn-outline btn-secondary')
Button('Accent', cls='btn btn-outline btn-accent')
Button('Info', cls='btn btn-outline btn-info')
Button('Success', cls='btn btn-outline btn-success')
Button('Warning', cls='btn btn-outline btn-warning')
Button('Error', cls='btn btn-outline btn-error')
```

#### Brand Colors  
```python
Button('Neutral', cls='btn btn-neutral')
Button('Primary', cls='btn btn-primary')
Button('Secondary', cls='btn btn-secondary')
Button('Accent', cls='btn btn-accent')
Button('Info', cls='btn btn-info')
Button('Success', cls='btn btn-success')
Button('Warning', cls='btn btn-warning')
Button('Error', cls='btn btn-error')
```

#### Circle Buttons  
```python
Button( SVG, cls='btn btn-circle'),
Button( SVG, cls='btn btn-circle btn-outline')
```

#### Dash Buttons  
```python
Button('Default', cls='btn btn-dashed')
Button('Primary', cls='btn btn-dashed btn-primary')
Button('Secondary', cls='btn btn-dashed btn-secondary')
Button('Accent', cls='btn btn-dashed btn-accent')
Button('Info', cls='btn btn-dashed btn-info')
Button('Success', cls='btn btn-dashed btn-success')
Button('Warning', cls='btn btn-dashed btn-warning')
Button('Error', cls='btn btn-dashed btn-error')
```

#### Disabled States  
```python
Button('Attribute Disabled', disabled=True, cls='btn'),
Button('Class Disabled', tabindex='-1', role='button', aria_disabled='true', cls='btn btn-disabled')
```

#### Trailing Icon  
```python
Button('Like', SVG, cls='btn')
```

#### Responsive Sizing  
```python
Button('Responsive', cls='btn btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl')
```

#### Active States  
```python
Button('Default', cls='btn btn-active')
Button('Primary', cls='btn btn-active btn-primary')
Button('Secondary', cls='btn btn-active btn-secondary')
Button('Accent', cls='btn btn-active btn-accent')
Button('Info', cls='btn btn-active btn-info')
Button('Success', cls='btn btn-active btn-success')
Button('Warning', cls='btn btn-active btn-warning')
Button('Error', cls='btn btn-active btn-error')
```

#### Glass Button  
```python
Button('Glass', cls='btn glass')
```

#### Wide Button  
```python
Button('Wide', cls='btn btn-wide')
```

#### Block Button  
```python
Button('block', cls='btn btn-block')
```

#### Ghost and Link Buttons  
```python
Button('Ghost', cls='btn-ghost')
Button('Link', cls='btn-link')
```

<a id="dropdown"></a>

## Dropdown  
**Category**: Actions
A menu that 'drops down' when clicked/tapped, showing options to choose from or actions to take.
### Examples

#### Card Dropdown  
```python
Div(
    Div('Click', tabindex='0', role='button', cls='btn m-1'),
    Div(
        Div(
            H3('Card title!', cls='card-title'),
            P('you can use any element as a dropdown.'),
            cls='card-body'
        ),
        tabindex='0',
        cls='dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow'
    ),
    cls='dropdown'
)
```

#### Details Tag Dropdown  
```python
Details(
    Summary('open or close', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        cls='menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow-sm'
    ),
    cls='dropdown'
)
```

#### Hover Trigger  
```python
Div(
    Div('Hover', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown dropdown-hover'
)
```

#### Focus-based Dropdown  
```python
Div(
    Div('Click', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown'
)
```

#### Navbar Integration  
```python
Div(
    Div(A('daisyUI', cls='ps-4 text-lg font-bold')),
    Div(
        Div(
            A('Button', cls='btn btn-ghost rounded-field'),
            Div(
                Div('Dropdown', 
                    tabindex='0', 
                    role='button', 
                    cls='btn btn-ghost rounded-field'),                    
                Ul(
                    Li(A('Item 1')),
                    Li(A('Item 2')),
                    tabindex='0',
                    cls='menu dropdown-content bg-base-200 rounded-box z-[1] mt-4 w-52 p-2 shadow-sm'
                ),
                cls='dropdown dropdown-end'
            ),
            cls='flex items-stretch'
        ),
        cls='flex grow justify-end px-2'
    ),
    cls='navbar bg-base-200'
)
```

#### Always Open  
```python
Div(
    Div('Button', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown dropdown-open'
)
```

#### Position: Start  
```python
Div(
    Div("Start", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-start"  
)
```

#### Position: End  
```python
Div(
    Div("End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-end"  
)
```

#### Position: Center  
```python
Div(
    Div("Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-center"  
)
```

#### Position: Top  
```python
Div(
    Div("Top", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top"  
)
```

#### Position: Top Center  
```python
Div(
    Div("Top Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top dropdown-center"  
)
```

#### Position: Top End  
```python
Div(
    Div("Top End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top dropdown-end"  
)
```

#### Position: Bottom (default)  
```python
Div(
    Div("Bottom (default)", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-bottom"  
)
```

#### Position: Bottom (default) End  
```python
Div(
    Div("Bottom (default) End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-bottom dropdown-end"  
)
```

#### Position: Left  
```python
Div(
    Div("Left", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left"  
)
```

#### Position: Left Center  
```python
Div(
    Div("Left Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left dropdown-center"  
)
```

#### Helper Card Dropdown  
```python
Div(
    "A normal text and a helper dropdown",
    Div(
        Div(
            SVG,
            tabindex="0",
            role="button",
            cls="btn btn-circle btn-ghost btn-xs text-info"
        ),
        Div(
            Div(
                H2("Need more info?", cls="card-title"),
                P("Detailed description here"),
                tabindex="0",
                cls="card-body"
            ),
            tabindex="0",
            cls="dropdown-content card compact bg-base-100 rounded-box z-[1] w-64 shadow"
        ),
        cls="dropdown dropdown-end"
    )
)
```

#### Position: Left End  
```python
Div(
    Div("Left End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left dropdown-end"  
)
```

#### Position: Right  
```python
Div(
    Div("Right", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right"  
)
```

#### Position: Right End  
```python
Div(
    Div("Right End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right dropdown-end"  
)
```

#### Position: Right Center  
```python
Div(
    Div("Right Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right dropdown-center"  
)
```

<a id="modal"></a>

## Modal  
**Category**: Actions
Dialog/popup component for focused interactions
### Examples

#### Anchor link modal  
```python
# <!-- The button to open modal -->
A('open modal', href='#my_modal_8', cls='btn'),
# <!-- Put this part before </body> tag -->
Div(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('This modal works with anchor links', cls='py-4'),
        Div(
            A('Yay!', href='#', cls='btn'),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    role='dialog',
    id='my_modal_8',
    cls='modal'
)
```

#### Checkbox modal  
```python
# <!-- The button to open modal -->
Label('open modal', fr='my_modal_6', cls='btn'),

# <!-- Put this part before </body> tag -->
Input(type='checkbox', id='my_modal_6', cls='modal-toggle'),
Div(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('This modal works with a hidden checkbox!', cls='py-4'),
        Div(
            Label('Close!', fr='my_modal_6', cls='btn'),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    role='dialog',
    cls='modal z-999'
)
```

#### Backdrop Checkbox Modal  
```python
# <!-- The button to open modal -->                
Label('open modal', fr='my_modal_7', cls='btn'),
# <!-- Put this part before </body> tag -->
Input(type='checkbox', id='my_modal_7', cls='modal-toggle'),
Div(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('This modal works with a hidden checkbox!', cls='py-4'),
        cls='modal-box'
    ),
    Label('Close', fr='my_modal_7', cls='modal-backdrop'),
    role='dialog',
    cls='modal'
)
```

#### Basic dialog modal  
```python
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_1.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click the button below to close', cls='py-4'),
        Div(                            
            Form(
                # <!-- if there is a button in form, it will close the modal -->
                Button('Close', cls='btn'),
                method='dialog'
            ),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    id='my_modal_1',
    cls='modal'
)
```

#### Dialog with outside click  
```python
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_2.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click outside to close', cls='py-4'),
        cls='modal-box'
    ),
    Form(
        Button('close'),
        method='dialog',
        cls='modal-backdrop'
    ),
    id='my_modal_2',
    cls='modal'
)
```

#### Dialog with corner close  
```python
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_3.showModal()', cls='btn'),
Dialog(
    Div(
        Form(
            Button('✕', cls='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'),
            method='dialog'
        ),
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click on ✕ button to close', cls='py-4'),
        cls='modal-box'
    ),
    id='my_modal_3',
    cls='modal'
)
```

#### Custom width dialog  
```python
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_4.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Click the button below to close', cls='py-4'),
        Div(
            Form(
                # <!-- If there is a button, it will close the modal -->
                Button('Close', cls='btn'),
                method='dialog'
            ),
            cls='modal-action'
        ),
        cls='modal-box w-11/12 max-w-5xl'
    ),
    id='my_modal_4',
    cls='modal'
)
```

#### Responsive dialog  
```python
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_5.showModal()', cls='btn'),
Dialog(
    Div(
        H3('Hello!', cls='text-lg font-bold'),
        P('Press ESC key or click the button below to close', cls='py-4'),
        Div(
            Form(
                # <!-- A button in form will close the modal -->
                Button('Close', cls='btn'),
                method='dialog'
            ),
            cls='modal-action'
        ),
        cls='modal-box'
    ),
    id='my_modal_5',
    cls='modal modal-bottom sm:modal-middle'
)
```

<a id="swap"></a>

## Swap  
**Category**: Actions
Clicky clicky
### Examples

#### Hamburger menu toggle  
```python
Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox'),
    # <!-- hamburger icon -->
    Icon.hamburger(cls="swap-off"),
    # <!-- close icon -->
    Icon.close(cls="swap-on"),
    cls='btn btn-circle swap swap-rotate'
)
```

#### Swap text  
```python
Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox'),
    Div('ON', cls='swap-on'),
    Div('OFF', cls='swap-off'),
    cls='swap'
    )
```

#### Flip effect emojis  
```python
Label(
    Input(type='checkbox'),
    Div('😈', cls='swap-on'),
    Div('😇', cls='swap-off'),
    cls='swap swap-flip text-9xl'
)
```

#### Swap volume icons  
```python
Label(
# <!-- this hidden checkbox controls the state -->
Input(type='checkbox'),
# <!-- volume on icon -->
Icon.volume_on(cls="swap-on"),
# <!-- volume off icon -->
Icon.volume_off(cls="swap-off"),
cls='swap'
)
```

#### Class-based activation  
```python
Div(
    Label(
        Div('🥵', cls='swap-on'),
        Div('🥶', cls='swap-off'),
        cls='swap text-6xl js-swap-demo'
    ),
    Label(
        Div('🥳', cls='swap-on'),
        Div('😭', cls='swap-off'),
        cls='swap text-6xl js-swap-demo'
    ),
    Script("""
        // Auto toggle every second for all demo elements
        const elements = document.querySelectorAll('.js-swap-demo');
        setInterval(() => {
            elements.forEach(el => {
                el.classList.toggle('swap-active');
            });
        }, 1000);
    """)
)
```

#### Rotating icons  
```python
Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox'),
    # <!-- sun icon -->                    
    Icon.sun(cls="swap-on"), 
    # <!-- moon icon -->                    
    Icon.moon(cls="swap-off"),
    cls='swap swap-rotate'
)
```

<a id="theme-controller"></a>

## Theme Controller  
**Category**: Actions
Documentation for theme controller component.
### Examples

#### Basic Toggle  
```python
Input(
    type='checkbox', 
    value='synthwave', 
    cls='toggle theme-controller'
)
```

#### Custom Colors  
```python
Input(type='checkbox', value='synthwave',
    cls="toggle theme-controller bg-blue-600 text-blue-200 border-blue-700 checked:bg-yellow-100 checked:text-yellow-600 checked:border-yellow-400")
```

#### Radio Group  
```python
THEMES = ["default", "retro", "cyberpunk", "valentine", "aqua"]
radio_attrs = {  
        "type": "radio",
        "name": "theme-radios",
        "cls": "radio radio-smtheme-controller" 
    }
    
return Fieldset(
    *(Label(
        Input(
            value=theme,
            checked=(theme == "default"),
            **radio_attrs
        ),
        theme.capitalize(),  
        cls="flex gap-2 cursor-pointer items-center" 
    ) for theme in THEMES),
    cls="fieldset"
)
```

#### Toggle with Text  
```python
Label(
    "Default",
    Input(type="checkbox", cls="toggle mx-2 theme-controller", value="synthwave"),
    "Synthwave",
    cls="flex cursor-pointer gap-2 items-center"
)
```

#### Checkbox Input  
```python
Input(type='checkbox', value='synthwave', cls='checkbox theme-controller')
```

#### Button Group  
```python
Div(
    Input(type='radio', name='theme-buttons', aria_label='Default', value='default', checked=True, cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Retro', value='retro', cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Cyberpunk', value='cyberpunk', cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Valentine', value='valentine', cls='btn theme-controller join-item'),
    Input(type='radio', name='theme-buttons', aria_label='Aqua', value='aqua', cls='btn theme-controller join-item'),
    cls='join join-vertical'
)
```

#### Icon Toggle  
```python
Label(
    # <!-- sun icon -->
    Icon.smol_sun(),
    Input(type='checkbox', value='synthwave', cls='toggle theme-controller'),
    # <!-- moon icon -->
    Icon.smol_moon(),                        
    cls='flex cursor-pointer gap-2 items-center'
)
```

#### Swap Animation  
```python
Label(
    # <!-- this hidden checkbox controls the state -->
    Input(type='checkbox', value='synthwave', cls='theme-controller'),
    # <!-- sun icon -->
    Icon.sun(cls="swap-on"), 
    # <!-- moon icon -->
    Icon.moon(cls="swap-off"),
    cls='swap swap-rotate'
)
```

#### Dropdown Group  
```python
THEMES = ["default", "retro", "cyberpunk", "valentine", "aqua"] 
    input_attrs = { 
        "type": "radio",
        "name": "theme-dropdown",  
        "cls": "theme-controller btn btn-sm btn-block btn-ghost justify-start" 
    } 
        
    return Div(
        Div(
            "Theme", 
            Icon.down_caret(),
            tabindex="0", 
            role="button",
            cls="btn m-1"
        ),
        Ul(
            *(Li(Input(
                value=theme,
                aria_label=theme.capitalize(),
                checked=(theme == "default"),
                **input_attrs
            )) for theme in THEMES),
            tabindex="0",
            cls="dropdown-content bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl"
        ),
        cls="dropdown mb-72"
    )
```

#### Icon Toggle Inside  
```python
Label(
    Input(
        type="checkbox",
        cls="theme-controller",
        value="synthwave"
    ),
    Icon.smol_sun(cls="w-4 h-4 stroke-current"),
    Icon.smol_moon(cls="w-4 h-4 stroke-current"),
    cls="toggle text-base-content"
)
```

<a id="avatar"></a>

## Avatar  
**Category**: Data Display

### Examples

#### Basic Avatar  
```python
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded'
    ),
    cls='avatar'
)
```

#### Avatar Sizes  
```python
Div(
    Div(
        Img(src='...'),
        cls='w-32 rounded'
    ),
    cls='avatar'
)
# Repeat with w-20, w-16, w-8
```

#### Rounded Avatars  
```python
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded-xl'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='w-24 rounded-full'
    ),
    cls='avatar'
)
```

#### Masked Avatars  
```python
Div(
    Div(
        Img(src='...'),
        cls='mask mask-squircle w-24'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='mask mask-hexagon w-24'
    ),
    cls='avatar'
)
Div(
    Div(
        Img(src='...'),
        cls='mask mask-triangle w-24'
    ),
    cls='avatar'
)
```

#### Avatar Group  
```python
Div(
    *(Div(
        Div(Img(src='...'), cls='w-12'),
        cls='avatar'
    ) for _ in range(4)),
    cls='avatar-group -space-x-6 rtl:space-x-reverse'
)
```

#### Group with Counter  
```python
Div(
    Div(
        *(Div(
            Div(
                Img(src='...'),
                cls='w-12'
            ),
            cls='avatar'
        ) for _ in range(3)),
    Div(
        Div(
            Span('+99'),
            cls='bg-neutral text-neutral-content w-12'
        ),
        cls='avatar avatar-placeholder'
    ),
    cls='avatar-group -space-x-6 rtl:space-x-reverse'
)
```

#### Ring Indicator  
```python
Div(
    Div(
        Img(src='...'),
        cls='ring-primary ring-offset-base-100 w-24 rounded-full ring ring-offset-2'
    ),
    cls='avatar'
)
```

#### Presence Indicator  
```python
Div(
    Div(Img(src='...'), cls='w-24 rounded-full'),
    cls='avatar avatar-online'
)
Div(
    Div(Img(src='...'), cls='w-24 rounded-full'),
    cls='avatar avatar-offline'
)
```

#### Letter Placeholders  
```python
Div(
    Div(
        Span('D', cls='text-3xl'),
        cls='bg-neutral text-neutral-content w-24 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
Div(
    Div(
        Span('AI', cls='text-xl'),
        cls='bg-neutral text-neutral-content w-16 rounded-full'
    ),
    cls='avatar avatar-online avatar-placeholder'
)
Div(
    Div(
        Span('SY'),
        cls='bg-neutral text-neutral-content w-12 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
Div(
    Div(
        Span('UI', cls='text-xs'),
        cls='bg-neutral text-neutral-content w-8 rounded-full'
    ),
    cls='avatar avatar-placeholder'
)
```

<a id="badge"></a>

## Badge  
**Category**: Data Display
Small status indicators for UI elements
### Examples

#### Basic Badge  
```python
Span("Badge", cls="badge")
```

#### Empty State  
```python
Div(cls="badge badge-primary badge-lg")
Div(cls="badge badge-primary badge-md")
Div(cls="badge badge-primary badge-sm")
Div(cls="badge badge-primary badge-xs")
```

#### Outline Badges  
```python
Span("Primary", cls="badge badge-outline badge-primary")
Span("Secondary", cls="badge badge-outline badge-secondary")
Span("Accent", cls="badge badge-outline badge-accent")
Span("Neutral", cls="badge badge-outline badge-neutral")
Span("Info", cls="badge badge-outline badge-info")
Span("Success", cls="badge badge-outline badge-success")
Span("Warning", cls="badge badge-outline badge-warning")
Span("Error", cls="badge badge-outline badge-error")
```

#### Badge Sizes  
```python
Div("987,654", cls="badge badge-xl")        
Div("987,654", cls="badge badge-lg")
Div("987,654", cls="badge badge-md")
Div("987,654", cls="badge badge-sm")
Div("987,654", cls="badge badge-xs")
```

#### Brand Colors  
```python
Span("Primary", cls="badge badge-primary")
Span("Secondary", cls="badge badge-secondary")
Span("Accent", cls="badge badge-accent")
Span("Neutral", cls="badge badge-neutral")
Span("Info", cls="badge badge-info")
Span("Success", cls="badge badge-success")
Span("Warning", cls="badge badge-warning")
Span("Error", cls="badge badge-error")
```

#### Soft Badges  
```python
Span("Primary", cls="badge badge-soft badge-primary")
Span("Secondary", cls="badge badge-soft badge-secondary")
Span("Accent", cls="badge badge-soft badge-accent")
Span("Neutral", cls="badge badge-soft badge-neutral")
Span("Info", cls="badge badge-soft badge-info")
Span("Success", cls="badge badge-soft badge-success")
Span("Warning", cls="badge badge-soft badge-warning")
Span("Error", cls="badge badge-soft badge-error")
```

#### Dashed Badges  
```python
Span("Primary", cls="badge badge-dash badge-primary")
Span("Secondary", cls="badge badge-dash badge-secondary")
Span("Accent", cls="badge badge-dash badge-accent")
Span("Neutral", cls="badge badge-dash badge-neutral")
Span("Info", cls="badge badge-dash badge-info")
Span("Success", cls="badge badge-dash badge-success")
Span("Warning", cls="badge badge-dash badge-warning")
Span("Error", cls="badge badge-dash badge-error")
```

#### Ghost Badges  
```python
Span("Ghost", cls="badge badge-ghost")
```

#### Icon Badges  
```python
Span(Icon.info(cls="size-[1em]"), "Info", cls="badge badge-info"),
Span(Icon.success(cls="size-[1em]"), "Success", cls="badge badge-success"),
Span(Icon.warning(cls="size-[1em]"), "Warning", cls="badge badge-warning"),
Span(Icon.error(cls="size-[1em]"), "Error", cls="badge badge-error"),
```

#### Text Integration  
```python
H1('Heading 1', Span('New', cls='badge badge-accent badge-xl'), cls='text-xl font-semibold flex gap-1')
H2('Heading 2', Span('New', cls='badge badge-accent badge-lg'), cls='text-lg font-semibold flex gap-1')
H3('Heading 3', Span('New', cls='badge badge-accent badge-md'), cls='text-base font-semibold flex gap-1')
H4('Heading 4', Span('New', cls='badge badge-accent badge-sm'), cls='text-sm font-semibold flex gap-1')
H5('Heading 5', Span('New', cls='badge badge-accent badge-xs'), cls='text-xs font-semibold flex gap-1')
P('Paragraph', Span('New', cls='badge badge-accent badge-xs'), cls='text-xs flex gap-1')
```

#### Button Integration  
```python
Button('Inbox', Div('+99', cls='badge badge-sm'), cls='btn')
Button('Inbox', Div('+99', cls='badge badge-sm badge-secondary'), cls='btn')
```

<a id="card"></a>

## Card  
**Category**: Data Display
Flexible container for content grouping
### Examples

#### Basic Card  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### No Image Card  
```python
Div(
    Div(
        H2('Card title!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Badge Card  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2(
            'Shoes!',
            Div('NEW', cls='badge badge-secondary'),
            cls='card-title'
        ),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Div('Fashion', cls='badge badge-outline'),
            Div('Products', cls='badge badge-outline'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Bottom Image  
```python
Div(
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        cls='card-body'
    ),
    Figure(
        Img(src='...', alt='Shoes')
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Side Image  
```python
Div(
    Figure(
        Img(src='...', alt='Movie')
    ),
    Div(
        H2('New movie is released!', cls='card-title'),
        P('Click the button to watch on Jetflix app.'),
        Div(
            Button('Watch', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card card-side bg-base-100 shadow-xl'
)
```

#### Image Overlay  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-base-100 image-full w-96 shadow-xl'
)
```

#### Centered Content  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes', cls='rounded-xl'),
        cls='px-10 pt-10'
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions'
        ),
        cls='card-body items-center text-center'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Compact Card  
```python
Div(
    Figure(
        Img(src='...', alt='Shoes')
    ),
    Div(
        H2('Shoes!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card card-compact bg-base-100 w-96 shadow-xl'
)
```

#### Top Action  
```python
Div(
    Div(
        Div(
            Button(
                Icon.x(),
                cls='btn btn-square btn-sm'
            ),
            cls='card-actions justify-end'
        ),
        P('We are using cookies for no reason.'),
        cls='card-body'
    ),
    cls='card bg-base-100 w-96 shadow-xl'
)
```

#### Responsive Layout  
```python
Div(
    Figure(
        Img(src='...', alt='Album')
    ),
    Div(
        H2('New album is released!', cls='card-title'),
        P('Click the button to listen on Spotiwhy app.'),
        Div(
            Button('Listen', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card lg:card-side bg-base-100 shadow-xl'
)
```

#### Glass Effect  
```python
Div(
    Figure(
        Img(src='...', alt='car!')
    ),
    Div(
        H2('Life hack', cls='card-title'),
        P('How to park your car at your garage?'),
        Div(
            Button('Learn now!', cls='btn btn-primary'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card glass w-96'
)
```

#### Custom Color  
```python
Div(
    Div(
        H2('Card title!', cls='card-title'),
        P('If a dog chews shoes whose shoes does he choose?'),
        Div(
            Button('Buy Now', cls='btn'),
            cls='card-actions justify-end'
        ),
        cls='card-body'
    ),
    cls='card bg-primary text-primary-content w-96'
)
```

#### Neutral Theme  
```python
Div(
    Div(
        H2('Cookies!', cls='card-title'),
        P('We are using cookies for no reason.'),
        Div(
            Button('Accept', cls='btn btn-primary'),
            Button('Deny', cls='btn btn-ghost'),
            cls='card-actions justify-end'
        ),
        cls='card-body items-center text-center'
    ),
    cls='card bg-neutral text-neutral-content w-96'
)
```

<a id="carousel"></a>

## Carousel  
**Category**: Data Display
Interactive image/content slideshow
### Examples

#### Snap to Start  
```python
Div(
   *(Div(
        Img(src=f"https://picsum.photos/300/400?random={num}",
            alt=f"Demo image {num}"),
        cls="carousel-item"
        ) for num in range(5)),
    cls="carousel rounded-box"
)
```

#### Snap to Center  
```python
Div(
    *(Div(
        Img(src=f"https://picsum.photos/300/400?random={num}",
            alt=f"Demo image {num}"),
        cls="carousel-item"
        ) for num in range(5)),
    cls="carousel carousel-center rounded-box"
)
```

#### Snap to End  
```python
Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
    cls="carousel-item"
    ) for num in range(5)),
    cls="carousel carousel-end rounded-box"
)
```

#### Full Width Items  
```python
Div(
    *(Div(
        Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
        cls="carousel-item w-full"
        ) for num in range(5)),
        cls="carousel rounded-box w-64"
)
```

#### Half Width Items  
```python
Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
    cls="carousel-item w-1/2"
    ) for num in range(5)),
    cls="carousel rounded-box w-96"
)
```

#### Full Bleed  
```python
Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}",
        cls="rounded-box"),
    cls="carousel-item"
    ) for num in range(5)),
    cls="carousel carousel-center bg-neutral rounded-box max-w-md space-x-4 p-4"
)
```

#### Vertical  
```python
Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
    cls="carousel-item h-full"
    ) for num in range(5)),
    cls="carousel carousel-vertical rounded-box h-96"
)
```

#### With Indicators  
```python
Div(
    Div(
        *(Div(
            Img(
                src=f"https://picsum.photos/300/400?random={i+1}",
                alt=f"Item {i+1}",
                cls="w-full h-48 object-cover"
            ),
            id=f"item{i+1}",
            cls="carousel-item w-full"
          ) for i in range(4)),
        cls="carousel w-full"
    ),
    Div(
        *(A(
            str(i+1),
            href=f"#item{i+1}",
            cls="btn btn-xs",
            onclick="event.preventDefault(); document.getElementById('item' + this.innerText).scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'});"
          ) for i in range(4)),
        cls="flex justify-center gap-2 py-2"
    )
)
```

#### With Controls  
```python
Div(
    Script("""
        function smoothScroll(e) {
            e.preventDefault();
            document.getElementById(e.target.getAttribute('href').substring(1))
                .scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'});
        }
    """),
    *(Div(
        Img(
            src=f"https://picsum.photos/300/400?random={i+1}",
            alt=f"Slide {i+1}",
            cls="w-full h-48 object-cover"
        ),
        Div(
            A("❮", href=f"#slide{4 if i == 0 else i}", 
                cls="btn btn-circle",
                onclick="smoothScroll(event)"
            ),
            A("❯", href=f"#slide{1 if i == 3 else i+2}", 
                cls="btn btn-circle",
                onclick="smoothScroll(event)"
            ),
            cls="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between"
        ),
        id=f"slide{i+1}",
        cls="carousel-item relative w-full"
      ) for i in range(4)),
    cls="carousel w-full"
)
```

<a id="chat-bubble"></a>

## Chat Bubble  
**Category**: Data Display
Message containers for chat interfaces
### Examples

#### Start and End Alignment  
```python
Div(
    Div(
        "It's over Anakin,",
        Br(),
        "I have the high ground.",
        cls="chat-bubble"
    ),
    cls="chat chat-start"
),
Div(
    Div("You underestimate my power!", cls="chat-bubble"),
    cls="chat chat-end"
)
```

#### With Avatar  
```python
avatar = Div(
        Img( src="https://picsum.photos/40?random=1",
            cls="w-10 rounded-full"
        ),
        cls="chat-image avatar"
    )

Div(
    avatar,
    Div("Message content", cls="chat-bubble"),
    cls="chat chat-start"
)
```

#### Avatar with Header/Footer  
```python
avatar = Div(
    Div(
        Img(src="...", cls="w-10 rounded-full"),
        cls="chat-image avatar"
    )
)

# Chat message template
def create_message(msg):
    return Div(
        avatar,
        Div(
            msg['name'],
            Time(msg['time'], cls="text-xs opacity-50"),
            cls="chat-header"
        ),
        Div(msg['text'], cls="chat-bubble"),
        Div(msg['footer'], cls="chat-footer opacity-50"),
        cls=f"chat chat-{msg['align']}"
    )

# Usage
Div(
    *(create_message(msg) for msg in messages)    
)
```

#### Message Metadata  
```python
# Message data
messages = [
    {
        'name': 'System Alert',
        'time': '2 hours ago',
        'text': 'Server maintenance scheduled',
        'footer': 'Priority: High'
    },
    {
        'name': 'System Alert',
        'time': '1 hour ago', 
        'text': 'Maintenance starting now',
        'footer': 'Status: Ongoing'
    }
]

# Message template
def create_system_message(msg):
    return Div(
        Div(
            msg['name'],
            Time(msg['time'], cls="text-xs opacity-50"),
            cls="chat-header"
        ),
        Div(msg['text'], cls="chat-bubble"),
        Div(msg['footer'], cls="chat-footer opacity-50"),
        cls="chat chat-start"
    )

# Usage
Div(
    *(create_system_message(msg) for msg in messages)    
)
```

#### Color Variants  
```python
messages = [
    {'text': 'Message 1', 'color': 'primary', 'align': 'start'},
    {'text': 'Message 2', 'color': 'secondary', 'align': 'start'},
    {'text': 'Message 3', 'color': 'accent', 'align': 'start'},
    {'text': 'Response 1', 'color': 'info', 'align': 'end'},
    {'text': 'Response 2', 'color': 'success', 'align': 'end'},
    {'text': 'Response 3', 'color': 'warning', 'align': 'end'},
    {'text': 'Response 4', 'color': 'error', 'align': 'end'}
]

# Chat message template
def create_colored_message(msg):
    return Div(
        Div(
            msg['text'],
            cls=f"chat-bubble chat-bubble-{msg['color']}"
        ),
        cls=f"chat chat-{msg['align']}"
    )

# Usage
Div(
    *(create_colored_message(msg) for msg in messages)    
)
```

<a id="collapse"></a>

## Collapse  
**Category**: Data Display
Expandable/collapsible content sections
### Examples

#### Basic Collapse  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse bg-base-200'
)
```

#### Focus Colors  
```python
Div(
    Div('Focus me to see content', cls='collapse-title'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='bg-primary text-primary-content focus:bg-secondary focus:text-secondary-content collapse'
)
```

#### Force Open  
```python
Div(
    Div('I have collapse-open class', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-open border-base-300 bg-base-200 border'
)
```

#### Bordered Style  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse border-base-300 bg-base-200 border'
)
```

#### Arrow Collapse  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-arrow border-base-300 bg-base-200 border'
)
```

#### Checkbox Collapse  
```python
Div(
    Input(type='checkbox'),
    Div('Click me to show/hide content', cls='collapse-title text-xl font-medium'),
    Div(
        P('hello'),
        cls='collapse-content'
    ),
    cls='collapse bg-base-200'
)
```

#### Force Closed  
```python
Div(
    Div('I have collapse-close class', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-close border-base-300 bg-base-200 border'
)
```

#### Details Collapse  
```python
Details(
    Summary('Click to open/close', cls='collapse-title text-xl font-medium'),
    Div(
        P('content'),
        cls='collapse-content'
    ),
    cls='collapse bg-base-200'
)
```

#### Plus/Minus Collapse  
```python
Div(
    Div('Focus me to see content', cls='collapse-title text-xl font-medium'),
    Div(
        P('tabindex="0" attribute is necessary to make the div focusable'),
        cls='collapse-content'
    ),
    tabindex='0',
    cls='collapse collapse-plus border-base-300 bg-base-200 border'
)
```

#### Checkbox Colors  
```python
Div(
    Input(type='checkbox', cls='peer'),
    Div(
        'Click me to show/hide content', 
        cls='collapse-title peer-checked:bg-secondary peer-checked:text-secondary-content'
    ),
    Div(
        P('hello'),
        cls='collapse-content peer-checked:bg-secondary peer-checked:text-secondary-content'
    ),
    cls='collapse bg-primary text-primary-content'
)
```

<a id="countdown"></a>

## Countdown  
**Category**: Data Display
Display time remaining with various styles and animations
### Examples

#### Clock Style  
```python
Span(
    Span(style="--value:10;"), "h",
    Span(style="--value:24;"), "m",
    Span(style="--value:59;", **{"data-countdown": "true"}), "s",
    cls='countdown font-mono text-2xl'
)
```

#### Labeled inline  
```python
units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")] 
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-4xl'
        ),
        unit
    ) for value, unit in units),
    cls='flex gap-5'
)
```

#### Basic Countdown  
```python
Span(
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown'
)
```

#### Clock with colons  
```python
Span(
    Span(style="--value:10;"), ":",
    Span(style="--value:24;"), ":",
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown font-mono text-2xl'
)
```

#### Labeled under  
```python
units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]  
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-5xl'
        ),
        unit,
        cls='flex flex-col'
    ) for value, unit in units),
    cls='grid auto-cols-max grid-flow-col gap-5 text-center'
)
```

#### Large text  
```python
Span(
    Span(style="--value:59;", **{"data-countdown": "true"}),
    cls='countdown font-mono text-6xl'
)
```

#### In boxes  
```python
units = [(15, "days"), (10, "hours"), (24, "min"), (59, "sec")]  
Div(
    *(Div(
        Span(
            Span(
                style=f"--value:{value};",
                **{"data-countdown": "true"} if unit == "sec" else {}
            ),
            cls='countdown font-mono text-5xl'
        ),
        unit,
        cls='bg-neutral rounded-box text-neutral-content flex flex-col p-2'
    ) for value, unit in units),
    cls='grid auto-cols-max grid-flow-col gap-5 text-center'
)
```

<a id="diff"></a>

## Diff  
**Category**: Data Display
Visual comparison component for highlighting differences
### Examples

#### Basic Diff  
```python
Div(
    Div(
        Img(
            alt="daisy",
            src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a.webp"
        ),
        cls="diff-item-1"
    ),
    Div(
        Img(
            alt="daisy",
            src="https://img.daisyui.com/images/stock/photo-1560717789-0ac7c58ac90a-blur.webp"
        ),
        cls="diff-item-2"
    ),
    Div(cls="diff-resizer"),
    cls="diff aspect-[16/9]"
)
```

#### Text Diff  
```python
Div(
    Div(
        Div('DAISY', cls='bg-primary text-primary-content grid place-content-center text-9xl font-black'),
        cls='diff-item-1'
    ),
    Div(
        Div('DAISY', cls='bg-base-200 grid place-content-center text-9xl font-black'),
        cls='diff-item-2'
    ),
    Div(cls='diff-resizer'),
    cls='diff aspect-[16/9]'
)
```

<a id="kbd"></a>

## Kbd  
**Category**: Data Display
Keyboard key component using DaisyUI classes
### Examples

#### Basic Kbd  
```python
Kbd('A', cls='kbd')
)
```

#### Special Keys  
```python
Div(
    Kbd('⌘', cls='kbd'),
    Kbd('⌥', cls='kbd'),
    Kbd('⇧', cls='kbd'),
    Kbd('⌃', cls='kbd'),    
)
```

#### In Text Usage  
```python
Div(
    'Press ',
    Kbd('F', cls='kbd kbd-sm'),
    ' to pay respects.'
)
```

#### Full Keyboard Layout  
```python
Div(
    Div(
        *[Kbd(key, cls="kbd") for key in "q w e r t y u i o p".split()],
        cls="my-1 flex w-full justify-center gap-1"
    ),
    Div(
        *[Kbd(key, cls="kbd") for key in "a s d f g h j k l".split()],
        cls="my-1 flex w-full justify-center gap-1"
    ),
    Div(
        *[Kbd(key, cls="kbd") for key in "z x c v b n m /".split()],
        cls="my-1 flex w-full justify-center gap-1"
    )    
)
```

#### Arrow Keys  
```python
Div(
    Div(Kbd('▲', cls='kbd'), cls='flex w-full justify-center'),
    Div(
        Kbd('◀︎', cls='kbd'),
        Kbd('▶︎', cls='kbd'),
        cls='flex w-full justify-center gap-12'
    ),
    Div(Kbd('▼', cls='kbd'), cls='flex w-full justify-center'),    
)
```

#### Key Combinations  
```python
Div(
    Kbd('ctrl', cls='kbd'),
    '+',
    Kbd('shift', cls='kbd'),
    '+',
    Kbd('del', cls='kbd')    
)
```

#### Kbd Sizes  
```python
Kbd('Shift', cls='kbd kbd-lg'),
Kbd('Shift', cls='kbd kbd-md'),
Kbd('Shift', cls='kbd kbd-sm'),
Kbd('Shift', cls='kbd kbd-xs')
)
```

<a id="list"></a>

## List  
**Category**: Data Display
Vertical layout for structured data rows
### Examples

#### Basic List  
```python

```

#### Wrapping Column  
```python
Ul(
    Li('Most played songs this week', cls='p-4 pb-2 text-xs opacity-60 tracking-wide'),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/1@94.webp', cls='size-10 rounded-box')
        ),
        Div(
            Div('Dio Lupa'),
            Div('Remaining Reason', cls='text-xs uppercase font-semibold opacity-60')
        ),
        P('"Remaining Reason" became an instant hit, praised for its haunting sound and emotional depth. A viral performance brought it widespread recognition, making it one of Dio Lupa’s most iconic tracks.', cls='list-col-wrap text-xs'),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/4@94.webp', cls='size-10 rounded-box')
        ),
        Div(
            Div('Ellie Beilish'),
            Div('Bears of a fever', cls='text-xs uppercase font-semibold opacity-60')
        ),
        P('"Bears of a Fever" captivated audiences with its intense energy and mysterious lyrics. Its popularity skyrocketed after fans shared it widely online, earning Ellie critical acclaim.', cls='list-col-wrap text-xs'),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    Li(
        Div(
            Img(src='https://img.daisyui.com/images/profile/demo/3@94.webp', cls='size-10 rounded-box')
        ),
        Div(
            Div('Sabrino Gardener'),
            Div('Cappuccino', cls='text-xs uppercase font-semibold opacity-60')
        ),
        P('"Cappuccino" quickly gained attention for its smooth melody and relatable themes. The song’s success propelled Sabrino into the spotlight, solidifying their status as a rising star.', cls='list-col-wrap text-xs'),
        Button(
            Icon.play(),
            cls='btn btn-square btn-ghost'
        ),
        Button(
            Icon.heart(),
            cls='btn btn-square btn-ghost'
        ),
        cls='list-row'
    ),
    cls='list bg-base-100 rounded-box shadow-md'
)
```

<a id="stat"></a>

## Stat  
**Category**: Data Display
Statistical data display component
### Examples

#### Basic Stat  
```python
Div(
    Div(
        Div('Total Page Views', cls='stat-title'),
        Div('89,400', cls='stat-value'),
        Div('21% more than last month', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats shadow'
)
```

#### Custom Styled  
```python
Div(
    Div(
        Div('Account balance', cls='stat-title'),
        Div('$89,400', cls='stat-value'),
        Div(
            Button('Add funds', cls='btn btn-sm btn-success'),
            cls='stat-actions'
        ),
        cls='stat'
    ),
    Div(
        Div('Current balance', cls='stat-title'),
        Div('$89,400', cls='stat-value'),
        Div(
            Button('Withdrawal', cls='btn btn-sm'),
            Button('Deposit', cls='btn btn-sm'),
            cls='stat-actions'
        ),
        cls='stat'
    ),
    cls='stats bg-primary text-primary-content'
)
```

#### With Icons and Images  
```python
Div(
    Div(
        Div(Icon.heart(), cls='stat-figure text-primary'),
        Div('Total Likes', cls='stat-title'),
        Div('25.6K', cls='stat-value text-primary'),
        Div('21% more than last month', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(Icon.lightning(), cls='stat-figure text-secondary'),
        Div('Page Views', cls='stat-title'),
        Div('2.6M', cls='stat-value text-secondary'),
        Div('21% more than last month', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(
            Div(
                Img(src='https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'),
                cls='w-16 rounded-full'
            ),
            cls='avatar'
        ),
        Div('Tasks done', cls='stat-title'),
        Div('86%', cls='stat-value'),
        Div('31 tasks remaining', cls='stat-desc text-secondary'),
        cls='stat'
    ),
    cls='stats shadow'
)
```

#### Multiple Stats  
```python
Div(
    Div(
        Div(Icon.info(), cls='stat-figure text-secondary'),
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('Jan 1st - Feb 1st', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(Icon.settings(), cls='stat-figure text-secondary'),
        Div('New Users', cls='stat-title'),
        Div('4,200', cls='stat-value'),
        Div('↗︎ 400 (22%)', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(Icon.archive(), cls='stat-figure text-secondary'),
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats shadow'
)
```

#### Centered Layout  
```python
Div(
    Div(
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('From January 1st to February 1st', cls='stat-desc'),
        cls='stat place-items-center'
    ),
    Div(
        Div('Users', cls='stat-title'),
        Div('4,200', cls='stat-value text-secondary'),
        Div('↗︎ 40 (2%)', cls='stat-desc text-secondary'),
        cls='stat place-items-center'
    ),
    Div(
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat place-items-center'
    ),
    cls='stats shadow'
)
```

#### Vertical Layout  
```python
Div(
    Div(
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('Jan 1st - Feb 1st', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Users', cls='stat-title'),
        Div('4,200', cls='stat-value'),
        Div('↗︎ 400 (22%)', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats stats-vertical shadow'
)
```

#### Responsive Layout  
```python
Div(
    Div(
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('Jan 1st - Feb 1st', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Users', cls='stat-title'),
        Div('4,200', cls='stat-value'),
        Div('↗︎ 400 (22%)', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats stats-vertical lg:stats-horizontal shadow'
)
```

<a id="status"></a>

## Status  
**Category**: Data Display
Visual indicator for element states
### Examples

#### Basic Status  
```python
Span(cls="status")
```

#### Status Sizes  
```python
Div(aria_label='status', cls='status status-xs'),
Div(aria_label='status', cls='status status-sm'),
Div(aria_label='status', cls='status status-md'),
Div(aria_label='status', cls='status status-lg'),
Div(aria_label='status', cls='status status-xl')
```

#### Status Colors  
```python
Div(aria_label='status', cls='status status-primary'),
Div(aria_label='status', cls='status status-secondary'),
Div(aria_label='status', cls='status status-neutral'),
Div(aria_label='status', cls='status status-accent'),
Div(aria_label='info', cls='status status-info'),
Div(aria_label='success', cls='status status-success'),
Div(aria_label='warning', cls='status status-warning'),
Div(aria_label='error', cls='status status-error')
```

#### Ping Animation  
```python
Div(
    Div(cls='status status-error animate-ping'),
    Div(cls='status status-error'),
    cls='inline-grid *:[grid-area:1/1]'
),
'Server is down'
```

#### Bounce Animation  
```python
Div(cls='status status-info animate-bounce'),
'Unread messages'
```

<a id="table"></a>

## Table  
**Category**: Data Display
Data table component with DaisyUI styling
### Examples

#### Active Row  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue'), cls='bg-base-200'),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

#### Basic Table  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

#### Complex Layout  
```python
table_data = [ 
    {"id": "1", "name": "Cy Ganderton", "job": "Quality Control Specialist", "company": "Littel, Schaden and Vandervort", "location": "Canada", "login": "12/16/2020", "color": "Blue"}, 
    {"id": "2", "name": "Hart Hagerty", "job": "Desktop Support Technician", "company": "Zemlak, Daniel and Leannon", "location": "United States", "login": "12/5/2020", "color": "Purple"}, 
    {"id": "2", "name": "Hart Hagerty", "job": "Desktop Support Technician", "company": "Zemlak, Daniel and Leannon", "location": "United States", "login": "12/5/2020", "color": "Purple"},  
    {"id": "3", "name": "Brice Swyre", "job": "Tax Accountant", "company": "Carroll Group", "location": "China", "login": "8/15/2020", "color": "Red"}, 
    {"id": "4", "name": "Marjy Ferencz", "job": "Office Assistant I", "company": "Rowe-Schoen", "location": "Russia", "login": "3/25/2021", "color": "Crimson"}, 
    {"id": "5", "name": "Yancy Tear", "job": "Community Outreach Specialist", "company": "Wyman-Ledner", "location": "Brazil", "login": "5/22/2020", "color": "Indigo"}, 
    {"id": "6", "name": "Irma Vasilik", "job": "Editor", "company": "Wiza, Bins and Emard", "location": "Venezuela", "login": "12/8/2020", "color": "Purple"}, 
    {"id": "7", "name": "Meghann Durtnal", "job": "Staff Accountant IV", "company": "Schuster-Schimmel", "location": "Philippines", "login": "2/17/2021", "color": "Yellow"}, 
    {"id": "8", "name": "Sammy Seston", "job": "Accountant I", "company": "O'Hara, Welch and Keebler", "location": "Indonesia", "login": "5/23/2020", "color": "Crimson"}, 
    {"id": "9", "name": "Lesya Tinham", "job": "Safety Technician IV", "company": "Turner-Kuhlman", "location": "Philippines", "login": "2/21/2021", "color": "Maroon"}, 
    {"id": "10", "name": "Zaneta Tewkesbury", "job": "VP Marketing", "company": "Sauer LLC", "location": "Chad", "login": "6/23/2020", "color": "Green"}, 
    {"id": "11", "name": "Andy Tipple", "job": "Librarian", "company": "Hilpert Group", "location": "Poland", "login": "7/9/2020", "color": "Indigo"}, 
    {"id": "12", "name": "Sophi Biles", "job": "Recruiting Manager", "company": "Gutmann Inc", "location": "Indonesia", "login": "2/12/2021", "color": "Maroon"}, 
    {"id": "13", "name": "Florida Garces", "job": "Web Developer IV", "company": "Gaylord, Pacocha and Baumbach", "location": "Poland", "login": "5/31/2020", "color": "Purple"}, 
    {"id": "14", "name": "Maribeth Popping", "job": "Analyst Programmer", "company": "Deckow-Pouros", "location": "Portugal", "login": "4/27/2021", "color": "Aquamarine"}, 
    {"id": "15", "name": "Moritz Dryburgh", "job": "Dental Hygienist", "company": "Schiller, Cole and Hackett", "location": "Sri Lanka", "login": "8/8/2020", "color": "Crimson"}, 
    {"id": "16", "name": "Reid Semiras", "job": "Teacher", "company": "Sporer, Sipes and Rogahn", "location": "Poland", "login": "7/30/2020", "color": "Green"}, 
    {"id": "17", "name": "Alec Lethby", "job": "Teacher", "company": "Reichel, Glover and Hamill", "location": "China", "login": "2/28/2021", "color": "Khaki"}, 
    {"id": "18", "name": "Aland Wilber", "job": "Quality Control Specialist", "company": "Kshlerin, Rogahn and Swaniawski", "location": "Czech Republic", "login": "9/29/2020", "color": "Purple"}, 
    {"id": "19", "name": "Teddie Duerden", "job": "Staff Accountant III", "company": "Pouros, Ullrich and Windler", "location": "France", "login": "10/27/2020", "color": "Aquamarine"},
    {"id": "20", "name": "Lorelei Blackstone", "job": "Data Coordiator", "company": "Witting, Kutch and Greenfelder", "location": "Kazakhstan", "login": "6/3/2020", "color": "Red"} 
] 

header_row = Tr(Th(), Th('Name'), Th('Job'), Th('company'), Th('location'), Th('Last Login'), Th('Favorite Color'))

Div(
    Table(
        Thead(header_row),
        Tbody(*[Tr(
            Th(row["id"]),
            Td(row["name"]),
            Td(row["job"]),
            Td(row["company"]),
            Td(row["location"]),
            Td(row["login"]),
            Td(row["color"])
        ) for row in table_data]),
        Tfoot(header_row),
        cls='table table-xs'
    ),
    cls='overflow-x-auto'
)
```

#### Rows highlight on hover  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple'), 
               cls='hover:bg-base-300'),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

#### Pinned Rows  
```python
heroes_by_letter = {
    "A": ["Ant-Man", "Aquaman", "Asterix", "The Atom", "The Avengers"],
    "B": ["Batgirl", "Batman", "Batwoman", "Black Canary", "Black Panther"],
    "C": ["Captain America", "Captain Marvel", "Catwoman", "Conan the Barbarian"],
    "D": ["Daredevil", "The Defenders", "Doc Savage", "Doctor Strange"],
    "E": ["Elektra"],
    "F": ["Fantastic Four"],
    "G": ["Ghost Rider", "Green Arrow", "Green Lantern", "Guardians of the Galaxy"],
    "H": ["Hawkeye", "Hellboy", "Incredible Hulk"],
    "I": ["Iron Fist", "Iron Man"],
    "M": ["Marvelman"],
    "R": ["Robin", "The Rocketeer"],
    "S": ["The Shadow", "Spider-Man", "Sub-Mariner", "Supergirl", "Superman"],
    "T": ["Teenage Mutant Ninja Turtles", "Thor"],
    "W": ["The Wasp", "Watchmen", "Wolverine", "Wonder Woman"],
    "X": ["X-Men"],
    "Z": ["Zatanna", "Zatara"]
}

table_content = []
for letter, heroes in heroes_by_letter.items():
    table_content.extend([
        Thead(Tr(Th(letter))),
        Tbody(*[Tr(Td(hero)) for hero in heroes])
    ])

Div(
    Table(
        *table_content,
        cls='table table-pin-rows'
    ),
    cls='h-96 overflow-x-auto'
)
```

#### Alternate Zebra Rows  
```python
Div(
    Table(
        Thead(Tr(Th(), Th('Name'), Th('Job'), Th('Favorite Color'))),
        Tbody(
            Tr(Th('1'), Td('Cy Ganderton'), Td('Quality Control Specialist'), Td('Blue')),
            Tr(Th('2'), Td('Hart Hagerty'), Td('Desktop Support Technician'), Td('Purple')),
            Tr(Th('3'), Td('Brice Swyre'), Td('Tax Accountant'), Td('Red'))
        ),
        cls='table table-zebra'
    ),
    cls='overflow-x-auto'
)
```

#### Visual Elements  
```python
table_data = [ 
    {"img": "2@94.webp", "name": "Hart Hagerty", "location": "United States", "company": "Zemlak, Daniel and Leannon", "job": "Desktop Support Technician", "color": "Purple"},  
    {"img": "3@94.webp", "name": "Brice Swyre", "location": "China", "company": "Carroll Group", "job": "Tax Accountant", "color": "Red"}, 
    {"img": "4@94.webp", "name": "Marjy Ferencz", "location": "Russia", "company": "Rowe-Schoen", "job": "Office Assistant I", "color": "Crimson"}, 
    {"img": "5@94.webp", "name": "Yancy Tear", "location": "Brazil", "company": "Wyman-Ledner", "job": "Community Outreach Specialist", "color": "Indigo"} 
] 
Div(
    Table(
        Thead(Tr(
            Th(Label(Input(type='checkbox', cls='checkbox'))),
            Th('Name'), Th('Job'), Th('Favorite Color'), Th()
        )),
        Tbody(*[Tr(
            Th(Label(Input(type='checkbox', cls='checkbox'))),
            Td(Div(
                Div(
                    Div(
                        Img(
                            src=f'https://img.daisyui.com/images/profile/demo/{row["img"]}',
                            alt='Avatar'
                        ),
                        cls='mask mask-squircle h-12 w-12'
                    ),
                    cls='avatar'
                ),
                Div(
                    Div(row["name"], cls='font-bold'),
                    Div(row["location"], cls='text-sm opacity-50')
                ),
                cls='flex items-center gap-3'
            )),
            Td(
                row["company"],
                Br(),
                Span(row["job"], cls='badge badge-ghost badge-sm')
            ),
            Td(row["color"]),
            Th(Button('details', cls='btn btn-ghost btn-xs'))
        ) for row in table_data]),
        Tfoot(Tr(
            Th(), Th('Name'), Th('Job'), Th('Favorite Color'), Th()
        )),
        cls='table'
    ),
    cls='overflow-x-auto'
)
```

#### Pinned Rows & Columns  
```python
table_data = [ 
    {"id": "1", "name": "Cy Ganderton", "job": "Quality Control Specialist", "company": "Littel, Schaden and Vandervort", "location": "Canada", "login": "12/16/2020", "color": "Blue"},  
    {"id": "2", "name": "Hart Hagerty", "job": "Desktop Support Technician", "company": "Zemlak, Daniel and Leannon", "location": "United States", "login": "12/5/2020", "color": "Purple"}, 
    {"id": "3", "name": "Brice Swyre", "job": "Tax Accountant", "company": "Carroll Group", "location": "China", "login": "8/15/2020", "color": "Red"}, 
    {"id": "4", "name": "Marjy Ferencz", "job": "Office Assistant I", "company": "Rowe-Schoen", "location": "Russia", "login": "3/25/2021", "color": "Crimson"}, 
    {"id": "5", "name": "Yancy Tear", "job": "Community Outreach Specialist", "company": "Wyman-Ledner", "location": "Brazil", "login": "5/22/2020", "color": "Indigo"}, 
    {"id": "6", "name": "Irma Vasilik", "job": "Editor", "company": "Wiza, Bins and Emard", "location": "Venezuela", "login": "12/8/2020", "color": "Purple"}, 
    {"id": "7", "name": "Meghann Durtnal", "job": "Staff Accountant IV", "company": "Schuster-Schimmel", "location": "Philippines", "login": "2/17/2021", "color": "Yellow"}, 
    {"id": "8", "name": "Sammy Seston", "job": "Accountant I", "company": "O'Hara, Welch and Keebler", "location": "Indonesia", "login": "5/23/2020", "color": "Crimson"}, 
    {"id": "9", "name": "Lesya Tinham", "job": "Safety Technician IV", "company": "Turner-Kuhlman", "location": "Philippines", "login": "2/21/2021", "color": "Maroon"}, 
    {"id": "10", "name": "Zaneta Tewkesbury", "job": "VP Marketing", "company": "Sauer LLC", "location": "Chad", "login": "6/23/2020", "color": "Green"}, 
    {"id": "11", "name": "Andy Tipple", "job": "Librarian", "company": "Hilpert Group", "location": "Poland", "login": "7/9/2020", "color": "Indigo"}, 
    {"id": "12", "name": "Sophi Biles", "job": "Recruiting Manager", "company": "Gutmann Inc", "location": "Indonesia", "login": "2/12/2021", "color": "Maroon"}, 
    {"id": "13", "name": "Florida Garces", "job": "Web Developer IV", "company": "Gaylord, Pacocha and Baumbach", "location": "Poland", "login": "5/31/2020", "color": "Purple"}, 
    {"id": "14", "name": "Maribeth Popping", "job": "Analyst Programmer", "company": "Deckow-Pouros", "location": "Portugal", "login": "4/27/2021", "color": "Aquamarine"}, 
    {"id": "15", "name": "Moritz Dryburgh", "job": "Dental Hygienist", "company": "Schiller, Cole and Hackett", "location": "Sri Lanka", "login": "8/8/2020", "color": "Crimson"}, 
    {"id": "16", "name": "Reid Semiras", "job": "Teacher", "company": "Sporer, Sipes and Rogahn", "location": "Poland", "login": "7/30/2020", "color": "Green"}, 
    {"id": "17", "name": "Alec Lethby", "job": "Teacher", "company": "Reichel, Glover and Hamill", "location": "China", "login": "2/28/2021", "color": "Khaki"}, 
    {"id": "18", "name": "Aland Wilber", "job": "Quality Control Specialist", "company": "Kshlerin, Rogahn and Swaniawski", "location": "Czech Republic", "login": "9/29/2020", "color": "Purple"}, 
    {"id": "19", "name": "Teddie Duerden", "job": "Staff Accountant III", "company": "Pouros, Ullrich and Windler", "location": "France", "login": "10/27/2020", "color": "Aquamarine"}, 
    {"id": "20", "name": "Lorelei Blackstone", "job": "Data Coordinator", "company": "Witting, Kutch and Greenfelder", "location": "Kazakhstan", "login": "6/3/2020", "color": "Red"} 
] 

header_row = Tr(
    Th(), 
    *[Td(label) for label in ['Name', 'Job', 'company', 'location', 'Last Login', 'Favorite Color']], 
    Th()
)

Div(
    Table(
        Thead(header_row),
        Tbody(*[
            Tr(
                Th(row["id"]),
                Td(row["name"]),
                Td(row["job"]),
                Td(row["company"]),
                Td(row["location"]),
                Td(row["login"]),
                Td(row["color"]),
                Th(row["id"])
            ) for row in table_data
        ]),
        Tfoot(header_row),
        cls='table table-xs table-pin-rows table-pin-cols'
    ),
    cls='h-96 w-96 overflow-x-auto'
    )
```

<a id="timeline"></a>

## Timeline  
**Category**: Data Display
Timeline visualization component
### Examples

#### Basic Timeline  
```python
events = [   
    ("1984", "First Macintosh computer"),  
    ("1998", "iMac"),  
    ("2001", "iPod"),  
    ("2007", "iPhone"),  
    ("2015", "Apple Watch")  
] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),  # Only add Hr before if not first item
        Div(year, cls='timeline-start'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])  # Only add Hr after if not last item
    ) for i, (year, event) in enumerate(events)],
    cls='timeline'
)
```

#### Responsive Timeline  
```python
events = [("1984", "First Macintosh computer"), ("1998", "iMac"), ("2001", "iPod"),  
          ("2007", "iPhone"), ("2015", "Apple Watch") ] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(year, cls='timeline-start'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, (year, event) in enumerate(events)],
    cls='timeline timeline-vertical lg:timeline-horizontal'
)
```

#### Colored Line Timeline  
```python
events = [("First Macintosh computer", True), ("iMac", True), ("iPod", True), ("iPhone", False), ("Apple Watch", False) ] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr(cls='bg-primary' if events[i-1][1] else '')]),
        *(([Div(event, cls='timeline-start timeline-box'), 
            Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}'), 
            Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr(cls='bg-primary' if is_primary else '')])
    ) for i, (event, is_primary) in enumerate(events)],
    cls='timeline'
)
```

#### Text-only Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls=f'timeline-{"start" if i % 2 == 0 else "end"} timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Vertical Bottom  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Bottom Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(event, cls='timeline-end timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Styled Detailed Timeline  
```python
events = [   
        ("1984", "First Macintosh computer", "The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function..."),  
        ("1998", "iMac", "iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998..."), 
        ("2001", "iPod", "The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001..."), 
        ("2007", "iPhone", "iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs..."), 
        ("2015", "Apple Watch", "The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness tracking, health-oriented capabilities, and wireless telecommunication...") 
    ] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(Icon.circled_check(), cls='timeline-middle'),
        Div(
            Time(year, cls='font-mono italic'),
            Div(title, cls='text-lg font-black'),
            description,
            cls=f'timeline-{"start" if i % 2 == 0 else "end"} mb-10 {"md:text-end" if i % 2 == 0 else ""}'
        ),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, (year, title, description) in enumerate(events)],
    cls='timeline timeline-snap-icon max-md:timeline-compact timeline-vertical'
)
```

#### Vertical Top  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls='timeline-start timeline-box'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Top Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls='timeline-start timeline-box'),
        Div(Icon.circled_check(), cls='timeline-middle'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Vertical Alternating  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

 Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        *(([Div(event, cls='timeline-start timeline-box'), Div(Icon.circled_check(), cls='timeline-middle')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls='timeline-middle'), Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Alternating Timeline  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"]

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        *(([Div(event, cls='timeline-start timeline-box'), Div(Icon.circled_check(), cls='timeline-middle')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls='timeline-middle'), Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline'
)
```

#### Vertical Colored  
```python
events = [("First Macintosh computer", True), ("iMac", True), 
          ("iPod", True), ("iPhone", False), 
          ("Apple Watch", False) ] 

 Ul(
    *[Li(
        *([] if i == 0 else [Hr(cls='bg-primary' if events[i-1][1] else '')]),
        *(([Div(event, cls='timeline-start timeline-box'), 
            Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}')] if i % 2 == 0 else 
        [Div(Icon.circled_check(), cls=f'timeline-middle {"text-primary" if is_primary else ""}'), 
            Div(event, cls='timeline-end timeline-box')])),
        *([] if i == len(events)-1 else [Hr(cls='bg-primary' if is_primary else '')])
    ) for i, (event, is_primary) in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

#### Vertical Text Only  
```python
events = ["First Macintosh computer", "iMac", "iPod", "iPhone", "Apple Watch"] 

Ul(
    *[Li(
        *([] if i == 0 else [Hr()]),
        Div(event, cls=f'timeline-{"start" if i % 2 == 0 else "end"} timeline-box'),
        *([] if i == len(events)-1 else [Hr()])
    ) for i, event in enumerate(events)],
    cls='timeline timeline-vertical'
)
```

<a id="breadcrumbs"></a>

## Breadcrumbs  
**Category**: Navigation
Navigation hierarchy component with responsive trail support
### Examples

#### Basic Breadcrumbs  
```python
Div(
    Ul(
        Li(A("Home")),
        Li(A("Documents")),
        Li("Add Document"),
        cls="flex"
    ),
    cls="breadcrumbs text-sm"
)
```

#### Breadcrumbs with Icons  
```python
items = [
    ("Home", Icon.folder(), True),
    ("Documents", Icon.folder(), True),
    ("Add Document", Icon.add_doc(), False)
]

Div(
    Ul(*[Li(
        A(icon, f"{text}", cls='gap-2') if is_link else
        Span(icon, f"{text}", cls='inline-flex items-center gap-2')
    ) for text, icon, is_link in items]),
    cls='breadcrumbs text-sm'
)
```

#### Scrolling Breadcrumbs  
```python
Div(
    Ul(
        Li('Long text 1'),
        Li('Long text 2'),
        Li('Long text 3'),
        Li('Long text 4'),
        Li('Long text 5')
    ),
    cls='breadcrumbs max-w-xs text-sm'
)
```

<a id="dock"></a>

## Dock  
**Category**: Navigation
Bottom navigation bar with iOS-style dock behavior
### Examples

#### Basic Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock"
)
```

#### Custom Colors  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock bg-neutral text-neutral-content"
)
```

#### Extra Small Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),                                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
    ),
    cls="dock dock-xs"
)
```

#### Small Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),                                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
    ),
    cls="dock dock-sm"
)
```

#### Medium Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),                                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
    ),
    cls="dock dock-md"
)
```

#### Large Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock dock-lg"
)
```

#### Extra Large Dock  
```python
Div(
    Button(
        Icon.home(cls="size-[1.2em]"),
        Span("Home", cls="dock-label"),                    
    ),
    Button(
        Icon.email(cls="size-[1.2em]"),
        Span("Inbox", cls="dock-label"),
        cls="dock-active"
    ),
    Button(
        Icon.settings(cls="size-[1.2em]"),
        Span("Settings", cls="dock-label"),
    ),
    cls="dock dock-xl border border-base-300 relative"
)
```

<a id="link"></a>

## Link  
**Category**: Navigation
Stylized anchor elements with color variants and hover states
### Examples

#### Basic Link  
```python
A("I'm a simple link", cls='link')
```

#### Tailwind Reset  
```python
P('Tailwind CSS resets the style of links by default.',
Br(),
'Add "link" class to make it look like a ',
A('normal link', cls='link'),
' again.')
```

#### Brand Colors  
```python
A("Primary link", cls='link link-primary'),
A("Secondary link", cls='link link-secondary'), 
A("Accent link", cls='link link-accent'),
A("Neutral link", cls='link link-neutral'),
A("Success link", cls='link link-success'),
A("Info link", cls='link link-info'),
A("Warning link", cls='link link-warning'),
A("Error link", cls='link link-error')
```

#### Hover Effect  
```python
A("Hover-only underline", cls='link link-hover')
```

<a id="menu"></a>

## Menu  
**Category**: Navigation
Vertical and horizontal navigation lists with nested submenus
### Examples

#### Basic Menu  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Basic Submenus  
```python
Ul(
    Li(A('Item 1')),
    Li(
        A('Parent'),
        Ul(
            Li(A('Submenu 1')),
            Li(A('Submenu 2')),
            Li(
                A('Parent'),
                Ul(
                    Li(A('Submenu 1')),
                    Li(A('Submenu 2'))
                )
            )
        )
    ),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Disabled Interactive State  
```python
Ul(
    Li(A('Enabled item')),
    Li(A('disabled item'), cls='disabled'),
    Li(A('disabled item'), cls='disabled'),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Horizontal Layout  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu menu-horizontal bg-base-200'
)
```

#### Menu with Icons  
```python
Ul(
    Li(A(Icon.home(), 'Item 1')),
    Li(A(Icon.info(), 'Item 2')),
    Li(A(Icon.stats(), 'Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Active Interactive State  
```python
Ul(
    Li(Button('Item 1')),
    Li(Button('Item 2', cls='active')),
    Li(Button('Item 3')),
    cls='menu bg-base-200 w-56 rounded-box'
)
```

#### Horizontal Submenus  
```python
Ul(
    Li(A('Item 1')),
    Li(
        A('Parent'),
        Ul(
            Li(A('Submenu 1')),
            Li(A('Submenu 2'))
        )
    ),
    Li(A('Item 3')),
    cls='menu menu-horizontal bg-base-200 rounded-box'
)
```

#### Menu with Icons and Badges  
```python
Ul(
    Li(A(
        Icon.home(),
        'Inbox',
        Span('99+', cls='badge badge-sm')
    )),
    Li(A(
        Icon.info(),
        'Updates',
        Span('NEW', cls='badge badge-sm badge-warning')
    )),
    Li(A(
        'Stats',
        Span(cls='badge badge-xs badge-info')
    )),
    cls='menu bg-base-200 lg:menu-horizontal rounded-box'
)
```

#### Responsive Menu  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu menu-vertical lg:menu-horizontal bg-base-200 rounded-box'
)
```

#### Menu with Title  
```python
Ul(
    Li('Title', cls='menu-title'),
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Collapsible Submenus  
```python
Ul(
    Li(A('Item 1')),
    Li(
        Details(
            Summary('Parent'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                Li(
                    Details(
                        Summary('Parent'),
                        Ul(
                            Li(A('Submenu 1')),
                            Li(A('Submenu 2'))
                        ),
                        open=''
                    )
                )
            ),
            open=''
        )
    ),
    Li(A('Item 3')),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### File tree  
```python
Ul(
    Li(A(Icon.file(), 'resume.pdf')),
    Li(
        Details(
            Summary(
                Button( Icon.folder(), 'My Files')
            ),
            Ul(
                Li(A(Icon.file(), 'Project-final.psd')),
                Li(A(Icon.file(), 'Project-final-2.psd')),
                Li(
                    Details(
                        Summary(
                            Button(Icon.folder(), 'Images')
                        ),
                        Ul(
                            Li(A(Icon.image(), 'Screenshot1.png')),
                            Li(A(Icon.image(), 'Screenshot2.png')),
                            Li(
                                Details(
                                    Summary(
                                        Button(Icon.folder(), 'Others')
                                    ),
                                    Ul(
                                        Li(A(Icon.image(), 'Screenshot3.png'))
                                    ),
                                    open=''
                                )
                            )
                        ),
                        open=''
                    )
                )
            ),
            open=''
        )
    ),
    Li(A(Icon.file(), 'reports-final-2.pdf')),
    cls='menu menu-xs bg-base-200 rounded-lg max-w-xs w-full'
)
```

#### Icon only  
```python
Ul(
    Li(A(Icon.home())),
    Li(A(Icon.info())),
    Li(A(Icon.stats())),
    cls='menu bg-base-200 rounded-box'
)
```

#### No padding  
```python
Ul(
    Li(A('Item 1')),
    Li(A('Item 2')),
    Li(A('Item 3')),
    cls='menu bg-base-200 w-56 p-0 [&_li>*]:rounded-none'
)
```

#### Menu with Title Parent  
```python
Ul(
    Li(
        H2('Title', cls='menu-title'),
        Ul(
            Li(A('Item 1')),
            Li(A('Item 2')),
            Li(A('Item 3'))
        )
    ),
    cls='menu bg-base-200 rounded-box w-56'
)
```

#### Collapsible Class  
```python
Div(
    # Closed dropdown
    Ul(
        Li(A('Item 1')),
        Li(
            Span('Parent', cls='menu-dropdown-toggle'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                cls='menu-dropdown'
            )
        ),
        cls='menu bg-base-200 rounded-box w-56'
    ),
    # Open dropdown
    Ul(
        Li(A('Item 1')),
        Li(
            Span('Parent', cls='menu-dropdown-toggle menu-dropdown-show'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                cls='menu-dropdown menu-dropdown-show'
            )
        ),
        cls='menu bg-base-200 rounded-box w-56'
    ),
    Script("""
    document.querySelectorAll('.menu-dropdown-toggle').forEach(toggle => {
        toggle.addEventListener('click', () => {
            toggle.classList.toggle('menu-dropdown-show');
            toggle.nextElementSibling.classList.toggle('menu-dropdown-show');
        });
    });
    """)
)
```

#### Horizontal Icon Only  
```python
Ul(
    Li(A(Icon.home())),
    Li(A(Icon.info())),
    Li(A(Icon.stats())),
    cls='menu menu-horizontal bg-base-200 rounded-box'
)
```

#### Sizes  
```python
Ul(
    Li(A('xs item 1')),
    Li(A('xs item 2')),
    cls='menu menu-xs bg-base-200 rounded-box w-56'
),
Ul(
    Li(A('sm item 1')),
    Li(A('sm item 2')),
    cls='menu menu-sm bg-base-200 rounded-box w-56'
),
Ul(
    Li(A('md item 1')),
    Li(A('md item 2')),
    cls='menu menu-md bg-base-200 rounded-box w-56'
),
Ul(
    Li(A('lg item 1')),
    Li(A('lg item 2')),
    cls='menu menu-lg bg-base-200 rounded-box w-56'
),
```

#### Icon tooltip  
```python
Ul(
    Li(A(
        Icon.home(),
        data_tip='Home',
        cls='tooltip tooltip-right'
    )),
    Li(A(
        Icon.info(),
        data_tip='Details',
        cls='tooltip tooltip-right'
    )),
    Li(A(
        Icon.stats(),
        data_tip='Stats',
        cls='tooltip tooltip-right'
    )),
    cls='menu bg-base-200 rounded-box'
)
```

#### Mega Menu  
```python
Ul(
    Li(
        Button('Solutions'),
        Ul(
            Li(Button('Design')),
            Li(Button('Development')),
            Li(Button('Hosting')),
            Li(Button('Domain register'))
        )
    ),
    Li(
        Button('Enterprise'),
        Ul(
            Li(Button('CRM software')),
            Li(Button('Marketing management')),
            Li(Button('Security')),
            Li(Button('Consulting'))
        )
    ),
    Li(
        Button('Products'),
        Ul(
            Li(Button('UI Kit')),
            Li(Button('Wordpress themes')),
            Li(Button('Wordpress plugins')),
            Li(
                Button('Open source'),
                Ul(
                    Li(Button('Auth management system')),
                    Li(Button('VScode theme')),
                    Li(Button('Color picker app'))
                )
            )
        )
    ),
    Li(
        Button('Company'),
        Ul(
            Li(Button('About us')),
            Li(Button('Contact us')),
            Li(Button('Privacy policy')),
            Li(Button('Press kit'))
        )
    ),
    cls='menu xl:menu-horizontal lg:min-w-max bg-base-200 rounded-box'
)
```

#### Collapsible Responsive  
```python
Ul(
    Li(A('Item 1')),
    Li(
        Details(
            Summary('Parent item'),
            Ul(
                Li(A('Submenu 1')),
                Li(A('Submenu 2')),
                Li(
                    Details(
                        Summary('Parent'),
                        Ul(
                            Li(A('item 1')),
                            Li(A('item 2'))
                        ),
                        open=''
                    )
                )
            ),
            open=''
        )
    ),
    Li(A('Item 3')),
    cls='menu lg:menu-horizontal bg-base-200 rounded-box lg:mb-64'
)
```

#### Horizontal Icon Tooltip  
```python
Ul(
    Li(A(
        Icon.home(),
        data_tip='Home',
        cls='tooltip'
    )),
    Li(A(
        Icon.info(),
        data_tip='Details',
        cls='tooltip'
    )),
    Li(A(
        Icon.stats(),
        data_tip='Stats',
        cls='tooltip'
    )),
    cls='menu menu-horizontal bg-base-200 rounded-box mt-6'
)
```

<a id="navbar"></a>

## Navbar  
**Category**: Navigation
Navigation container with responsive dropdown menus and branding
### Examples

#### Basic Navbar  
```python
Div(
    Button(
        "daisyUI",
        cls="btn btn-ghost text-xl"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box"
)
```

#### Color Variations  
```python
Div(
    Button("daisyUI", cls="btn btn-ghost text-xl"),
    cls="navbar bg-neutral text-neutral-content shadow-xl rounded-box"
),
Div(
    Button("daisyUI", cls="btn btn-ghost text-xl"),
    cls="navbar bg-base-300 shadow-xl rounded-box mt-4"
),
Div(
    Button("daisyUI", cls="btn btn-ghost text-xl"),
    cls="navbar bg-primary text-primary-content shadow-xl rounded-box mt-4"
)
```

#### Dropdown Menus  
```python
Div(
    Div(
        Button(
            "daisyUI",
            cls="btn btn-ghost text-xl"
        ),
        cls="flex-1"
    ),
    Div(
        Ul(
            Li(
                Button("Link")
            ),
            Li(
                Details(
                    Summary("Parent"),
                    Ul(
                        Li(Button("Link 1")),
                        Li(Button("Link 2")),
                        cls="p-2 bg-base-100 rounded-t-none"
                    ),
                    open=""
                )
            ),
            cls="menu menu-horizontal px-1 bg-base-100"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-32"
)
```

#### Responsive Menu  
```python
Div(
    Div(
        Div(
            Div(
                Icon.menu_bars_uneven(cls="h-5 w-5"),
                tabindex="0",
                role="button",
                cls="btn btn-ghost lg:hidden"
            ),
            Ul(
                Li(Button("Item 1")),
                Li(
                    Button("Parent"),
                    Ul(
                        Li(Button("Submenu 1")),
                        Li(Button("Submenu 2")),
                        cls="p-2 bg-base-100 w-40"
                    )
                ),
                Li(Button("Item 3")),
                tabindex="0",
                cls="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
            ),
            cls="dropdown"
        ),
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="navbar-start"
    ),
    Div(
        Ul(
            Li(Button("Item 1")),
            Li(
                Details(
                    Summary("Parent"),
                    Ul(
                        Li(Button("Submenu 1")),
                        Li(Button("Submenu 2")),
                        cls="p-2 bg-base-100 w-40"
                    )
                )
            ),
            Li(Button("Item 3")),
            cls="menu menu-horizontal px-1"
        ),
        cls="navbar-center hidden lg:flex"
    ),
    Div(
        Button("Button", cls="btn"),
        cls="navbar-end"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-48"
)
```

#### Navbar with Icon  
```python
Div(
    Div(
        A("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Button(
            Icon.three_dots(),
            cls="btn btn-square btn-ghost"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box"
)
```

#### Search Dropdown  
```python
Div(
    Div(
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Input(
                type="text",
                placeholder="Search",
                cls="input input-bordered w-24 md:w-auto"
        ),                
        Div(
            Div(
                Div(
                    Img(
                        alt="Tailwind CSS Navbar component",
                        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                    ),
                    cls="w-10 rounded-full"
                ),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle avatar"
            ),
            Ul(
                Li(
                    Button(
                        "Profile",
                        Span("New", cls="badge"),
                        cls="justify-between"
                    )
                ),
                Li(Button("Settings")),
                Li(Button("Logout")),
                tabindex="0",
                cls="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
            ),
            cls="dropdown dropdown-end"
        ),
        cls="flex gap-2"
    ),
    cls="navbar bg-base-100 shadow-sm mb-32"
)
```

#### Icon Dropdown  
```python
Div(
    Div(
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Div(
            Div(
                Div(
                    Icon.shopping_cart(cls="h-5 w-5"),
                    Span("8", cls="badge badge-sm indicator-item"),
                    cls="indicator"
                ),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle"
            ),
            Div(
                Div(
                    Span("8 Items", cls="text-lg font-bold"),
                    Span("Subtotal: $999", cls="text-info"),
                    Div(
                        Button("View cart", cls="btn btn-primary btn-block"),
                        cls="card-actions"
                    ),
                    cls="card-body"
                ),
                tabindex="0",
                cls="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow"
            ),
            cls="dropdown dropdown-end"
        ),
        Div(
            Div(
                Div(
                    Img(
                        alt="Tailwind CSS Navbar component",
                        src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                    ),
                    cls="w-10 rounded-full"
                ),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle avatar"
            ),
            Ul(
                Li(
                    Button(
                        "Profile",
                        Span("New", cls="badge"),
                        cls="justify-between"
                    )
                ),
                Li(Button("Settings")),
                Li(Button("Logout")),
                tabindex="0",
                cls="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
            ),
            cls="dropdown dropdown-end"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-32"
)
```

#### Icons start/end  
```python
Div(
    Div(
        Button(
            Icon.menu_bars(),
            cls="btn btn-square btn-ghost"
        ),
        cls="flex-none"
    ),
    Div(
        A("daisyUI", cls="btn btn-ghost text-xl"),
        cls="flex-1"
    ),
    Div(
        Button(
            Icon.three_dots(),
            cls="btn btn-square btn-ghost"
        ),
        cls="flex-none"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box"
)
```

#### Center Logo Dropdown  
```python
Div(
    Div(
        Div(
            Div(
                Icon.menu_bars_short(cls="h-5 w-5"),
                tabindex="0",
                role="button",
                cls="btn btn-ghost btn-circle"
            ),
            Ul(
                Li(Button("Homepage")),
                Li(Button("Portfolio")),
                Li(Button("About")),
                tabindex="0",
                cls="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
            ),
            cls="dropdown"
        ),
        cls="navbar-start"
    ),
    Div(
        Button("daisyUI", cls="btn btn-ghost text-xl"),
        cls="navbar-center"
    ),
    Div(
        Button(
            Icon.search_circle(cls="h-5 w-5"),
            cls="btn btn-ghost btn-circle"
        ),
        Button(
            Div(
                Icon.notification_bell(cls="h-5 w-5"),
                Span(cls="badge badge-xs badge-primary indicator-item"),
                cls="indicator"
            ),
            cls="btn btn-ghost btn-circle"
        ),
        cls="navbar-end"
    ),
    cls="navbar bg-base-100 shadow-xl rounded-box mb-32"
)
```

<a id="pagination"></a>

## Pagination  
**Category**: Navigation
Navigation controls for splitting content across multiple pages
### Examples

#### Basic Pagination  
```python
Div(
    Button('1', cls='join-item btn'),
    Button('2', cls='join-item btn btn-active'),
    Button('3', cls='join-item btn'),
    Button('4', cls='join-item btn'),
    cls='join'
)
```

#### Size Variations  
```python
Div(
    Button("1", cls="join-item btn btn-xs"),
    Button("2", cls="join-item btn btn-xs btn-active"),
    Button("3", cls="join-item btn btn-xs"),
    Button("4", cls="join-item btn btn-xs"),
    cls="join"
),
Div(
    Button("1", cls="join-item btn btn-sm"),
    Button("2", cls="join-item btn btn-sm btn-active"),
    Button("3", cls="join-item btn btn-sm"),
    Button("4", cls="join-item btn btn-sm"),
    cls="join mt-4"
),
Div(
    Button("1", cls="join-item btn btn-md"),
    Button("2", cls="join-item btn btn-md btn-active"),
    Button("3", cls="join-item btn btn-md"),
    Button("4", cls="join-item btn btn-md"),
    cls="join mt-4"
),
Div(
    Button("1", cls="join-item btn btn-lg"),
    Button("2", cls="join-item btn btn-lg btn-active"),
    Button("3", cls="join-item btn btn-lg"),
    Button("4", cls="join-item btn btn-lg"),
    cls="join mt-4"
)
```

#### Styled Variations  
```python
Div(
    Button('«', cls='join-item btn'),
    Button('Page 22', cls='join-item btn'),
    Button('»', cls='join-item btn'),
    cls='join'
)
```

#### Disabled Pagination  
```python
Div(
    Button('1', cls='join-item btn'),
    Button('2', cls='join-item btn'),
    Button('...', cls='join-item btn btn-disabled'),
    Button('99', cls='join-item btn'),
    Button('100', cls='join-item btn'),
    cls='join'
)
```

#### Next/Prev Outline  
```python
Div(
    Button('Previous page', cls='join-item btn btn-outline'),
    Button('Next', cls='join-item btn btn-outline'),
    cls='join grid grid-cols-2'
)
```

#### Radio inputs  
```python
Div(
    Input(type='radio', name='options', aria_label='1', checked='checked', cls='join-item btn btn-square'),
    Input(type='radio', name='options', aria_label='2', cls='join-item btn btn-square'),
    Input(type='radio', name='options', aria_label='3', cls='join-item btn btn-square'),
    Input(type='radio', name='options', aria_label='4', cls='join-item btn btn-square'),
    cls='join'
)
```

<a id="steps"></a>

## Steps  
**Category**: Navigation
Progress indicators for multi-step workflows
### Examples

#### Custom Markers  
```python
Ul(
    Li('Step 1', data_content='?', cls='step step-neutral'),
    Li('Step 2', data_content='!', cls='step step-neutral'),
    Li('Step 3', data_content='✓', cls='step step-neutral'),
    Li('Step 4', data_content='✕', cls='step step-neutral'),
    Li('Step 5', data_content='★', cls='step step-neutral'),
    Li('Step 6', data_content='', cls='step step-neutral'),
    Li('Step 7', data_content='●', cls='step step-neutral'),
    cls='steps'
)
```

#### Horizontal Layout  
```python
Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps'
)
```

#### Scrollable Steps  
```python
Div(
    Ul(
        Li("start", cls="step"),
        Li("2", cls="step step-secondary"),
        Li("3", cls="step step-secondary"),
        Li("4", cls="step step-secondary"),
        Li("5", cls="step"),
        Li("6", cls="step step-accent"),
        Li("7", cls="step step-accent"),
        Li("8", cls="step"),
        Li("9", cls="step step-error"),
        Li("10", cls="step step-error"),
        Li("11", cls="step"),
        Li("12", cls="step"),
        Li("13", cls="step step-warning"),
        Li("14", cls="step step-warning"),
        Li("15", cls="step"),
        Li("16", cls="step step-neutral"),
        Li("17", cls="step step-neutral"),
        Li("18", cls="step step-neutral"),
        Li("19", cls="step step-neutral"),
        Li("20", cls="step step-neutral"),
        Li("21", cls="step step-neutral"),
        Li("22", cls="step step-neutral"),
        Li("23", cls="step step-neutral"),
        Li("end", cls="step step-neutral"),
        cls="steps"
    ),
    cls="overflow-x-auto"
)
```

#### Custom Colors  
```python
Ul(
    Li('Fly to moon', cls='step step-info'),
    Li('Shrink the moon', cls='step step-info'),
    Li('Grab the moon', cls='step step-info'),
    Li('Sit on toilet', data_content='?', cls='step step-error'),
    cls='steps'
)
```

#### Vertical Layout  
```python
Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps steps-vertical'
)
```

#### Responsive Layout  
```python
Ul(
    Li('Register', cls='step step-primary'),
    Li('Choose plan', cls='step step-primary'),
    Li('Purchase', cls='step'),
    Li('Receive Product', cls='step'),
    cls='steps steps-vertical lg:steps-horizontal'
)
```

<a id="tabs"></a>

## Tabs  
**Category**: Navigation
Interactive tabbed interface components
### Examples

#### Basic Tabs  
```python
Div(
    Button("Tab 1", role="tab", cls="tab"),
    Button("Tab 2", role="tab", cls="tab tab-active"),
    Button("Tab 3", role="tab", cls="tab"),
    role="tablist",
    cls="tabs"
)
```

#### Boxed with Radio Inputs  
```python
Div(
    Input(type='radio', name='my_tabs_radio_1', aria_label='Tab 1', cls='tab'),
    Input(type='radio', name='my_tabs_radio_1', aria_label='Tab 2', cls='tab', checked='checked'),
    Input(type='radio', name='my_tabs_radio_1', aria_label='Tab 3', cls='tab'),            
    cls="tabs tabs-box"
)
```

#### Sizing Options  
```python
Div(
    A('Tiny', role='tab', cls='tab'),
    A('Tiny', role='tab', cls='tab tab-active'),
    A('Tiny', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift tabs-xs'
),
Div(
    A('Small', role='tab', cls='tab'),
    A('Small', role='tab', cls='tab tab-active'),
    A('Small', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift tabs-sm'
),
Div(
    A('Normal', role='tab', cls='tab'),
    A('Normal', role='tab', cls='tab tab-active'),
    A('Normal', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift'
),
Div(
    A('Large', role='tab', cls='tab'),
    A('Large', role='tab', cls='tab tab-active'),
    A('Large', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift tabs-lg'
)
```

#### Bordered Tabs  
```python
Div(
    Button('Tab 1', role='tab', cls='tab'),
    Button('Tab 2', role='tab', cls='tab tab-active'),
    Button('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-border'
)
```

#### Custom colors  
```python
Div(
    A('Tab 1', role='tab', cls='tab'),
    A('Tab 2', role='tab', cls='tab tab-active text-primary [--tab-bg:orange] [--tab-border-color:red]'),
    A('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift'
)
```

#### Radio Border with Content  
```python
Div(
    Input(type='radio', name='my_tabs_radio_2', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-10'),
    Input(type='radio', name='my_tabs_radio_2', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-10'),
    Input(type='radio', name='my_tabs_radio_2', aria_label='Tab 3', cls='tab'),            
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-10'),
    cls="tabs tabs-border"
)
```

#### Lifted Tabs  
```python
Div(
    A('Tab 1', role='tab', cls='tab'),
    A('Tab 2', role='tab', cls='tab tab-active'),
    A('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-lift'
)
```

#### Radio Lift with Content  
```python
Div(
    Input(type='radio', name='my_tabs_radio_3', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_3', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_3', aria_label='Tab 3', cls='tab'),            
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-6'),
    cls="tabs tabs-lift"
)
```

#### Boxed Tabs  
```python
Div(
    A('Tab 1', role='tab', cls='tab'),
    A('Tab 2', role='tab', cls='tab tab-active'),
    A('Tab 3', role='tab', cls='tab'),
    role='tablist',
    cls='tabs tabs-box'
)
```

#### Radio Bottom Lift with Content  
```python
Div(
    Input(type='radio', name='my_tabs_radio_4', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_4', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_4', aria_label='Tab 3', cls='tab'),            
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-6'),
    cls="tabs tabs-lift tabs-bottom"
)
```

#### Radio Box with Content  
```python
Div(
    Input(type='radio', name='my_tabs_radio_5', aria_label='Tab 1', cls='tab'),
    Div('Tab content 1', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_5', aria_label='Tab 2', cls='tab', checked='checked'),
    Div('Tab content 2', cls='tab-content border-base-200 bg-base-100 p-6'),
    Input(type='radio', name='my_tabs_radio_5', aria_label='Tab 3', cls='tab'),            
    Div('Tab content 3', cls='tab-content border-base-200 bg-base-100 p-6'),
    cls="tabs tabs-box"
)
```

<a id="alert"></a>

## Alert  
**Category**: Feedback
Visual feedback for important messages
### Examples

#### Basic Alert  
```python
Div(
    Icon.info(cls="text-info h-6 w-6 shrink-0"),
    Span('12 unread messages'),
    role='alert',
    cls='alert w-full'
)
```

#### Color Variants  
```python
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-info'
),
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-success'
),
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-warning'
),
Div(
    Icon.info(cls="h-6 w-6 shrink-0"),
    Span('New software update available.'),
    role='alert',
    cls='alert alert-error'
)
```

#### Responsive Alert with buttons  
```python
Div(
    Icon.info(cls="text-info h-6 w-6 shrink-0"),
    Span('we use cookies for no reason.'),
    Div(
        Button('Deny', cls='btn btn-sm'),
        Button('Accept', cls='btn btn-sm btn-primary')
    ),
    role='alert',
    cls='alert alert-vertical sm:alert-horizontal w-full'
)
```

#### Soft Style  
```python
Div(
    Span("12 unread messages. Tap to see."),
    role="alert",
    cls="alert alert-info alert-soft"
),
Div(
    Span("Your purchase has been confirmed!"),
    role="alert",
    cls="alert alert-success alert-soft"
),
Div(
    Span("Warning: Invalid email address!"),
    role="alert",
    cls="alert alert-warning alert-soft"
),
Div(
    Span("Error: Invalid email address!"),
    role="alert",
    cls="alert alert-error alert-soft"
)
```

#### Outline Style  
```python
Div(
    Span("12 unread messages. Tap to see."),
    role="alert",
    cls="alert alert-info alert-outline"
),
Div(
    Span("Your purchase has been confirmed!"),
    role="alert",
    cls="alert alert-success alert-outline"
),
Div(
    Span("Warning: Invalid email address!"),
    role="alert",
    cls="alert alert-warning alert-outline"
),
Div(
    Span("Error: Invalid email address!"),
    role="alert",
    cls="alert alert-error alert-outline"
)
```

#### With Title and Description  
```python
Div(
    Icon.info(cls="text-info h-6 w-6 shrink-0"),
    Div(
        H3('New message!', cls='font-bold'),
        Div('You have 1 unread message', cls='text-xs')
    ),
    Button('See', cls='btn btn-sm'),
    role='alert',
    cls='alert alert-vertical sm:alert-horizontal w-full '
)
```

#### Dash Style  
```python
Div(
    Span("12 unread messages. Tap to see."),
    role="alert",
    cls="alert alert-info alert-dash"
),
Div(
    Span("Your purchase has been confirmed!"),
    role="alert",
    cls="alert alert-success alert-dash"
),
Div(
    Span("Warning: Invalid email address!"),
    role="alert",
    cls="alert alert-warning alert-dash"
),
Div(
    Span("Error: Invalid email address!"),
    role="alert",
    cls="alert alert-error alert-dash"
)
```

<a id="loading"></a>

## Loading  
**Category**: Feedback
Indicators for loading states and progress
### Examples

#### Color Customization  
```python
Span(cls='loading loading-spinner text-primary'),
Span(cls='loading loading-spinner text-secondary'),
Span(cls='loading loading-spinner text-accent'),
Span(cls='loading loading-spinner text-neutral'),
Span(cls='loading loading-spinner text-info'),
Span(cls='loading loading-spinner text-success'),
Span(cls='loading loading-spinner text-warning'),
Span(cls='loading loading-spinner text-error')
```

#### Basic Spinners  
```python
Span(cls='loading loading-spinner loading-xs'),
Span(cls='loading loading-spinner loading-sm'), 
Span(cls='loading loading-spinner loading-md'),
Span(cls='loading loading-spinner loading-lg')
```

#### Dots Animation  
```python
Span(cls='loading loading-dots loading-xs'),
Span(cls='loading loading-dots loading-sm'),
Span(cls='loading loading-dots loading-md'),
Span(cls='loading loading-dots loading-lg')
```

#### Circular Ring  
```python
Span(cls='loading loading-ring loading-xs'),
Span(cls='loading loading-ring loading-sm'),
Span(cls='loading loading-ring loading-md'),
Span(cls='loading loading-ring loading-lg')
```

#### Ball Animation  
```python
Span(cls='loading loading-ball loading-xs'),
Span(cls='loading loading-ball loading-sm'),
Span(cls='loading loading-ball loading-md'),
Span(cls='loading loading-ball loading-lg')
```

#### Bars Animation  
```python
Span(cls='loading loading-bars loading-xs'),
Span(cls='loading loading-bars loading-sm'),
Span(cls='loading loading-bars loading-md'),
Span(cls='loading loading-bars loading-lg')
```

#### Infinity Animation  
```python
Span(cls='loading loading-infinity loading-xs'),
Span(cls='loading loading-infinity loading-sm'),
Span(cls='loading loading-infinity loading-md'),
Span(cls='loading loading-infinity loading-lg')
```

<a id="progress"></a>

## Progress  
**Category**: Feedback
Visual indicators for task progress and completion
### Examples

#### Basic Progress  
```python
Progress(value="0", max="100", cls="progress w-56"),
Progress(value="10", max="100", cls="progress w-56"),
Progress(value="40", max="100", cls="progress w-56"),
Progress(value="70", max="100", cls="progress w-56"),
Progress(value="100", max="100", cls="progress w-56"),
```

#### Primary Colors  
```python
Progress(value='0', max='100', cls='progress progress-primary w-56'),
Progress(value='10', max='100', cls='progress progress-primary w-56'),                
Progress(value='40', max='100', cls='progress progress-primary w-56'),
Progress(value='70', max='100', cls='progress progress-primary w-56'),
Progress(value='100', max='100', cls='progress progress-primary w-56')
```

#### Indeterminate  
```python
Progress(cls='progress w-56')
```

#### Secondary Colors  
```python
Progress(value='0', max='100', cls='progress progress-secondary w-56'),
Progress(value='10', max='100', cls='progress progress-secondary w-56'),                
Progress(value='40', max='100', cls='progress progress-secondary w-56'),
Progress(value='70', max='100', cls='progress progress-secondary w-56'),
Progress(value='100', max='100', cls='progress progress-secondary w-56')
```

#### Accent Colors  
```python
Progress(value='0', max='100', cls='progress progress-accent w-56'),
Progress(value='10', max='100', cls='progress progress-accent w-56'),                
Progress(value='40', max='100', cls='progress progress-accent w-56'),
Progress(value='70', max='100', cls='progress progress-accent w-56'),
Progress(value='100', max='100', cls='progress progress-accent w-56')
```

#### Success Colors  
```python
Progress(value='0', max='100', cls='progress progress-success w-56'),
Progress(value='10', max='100', cls='progress progress-success w-56'),                
Progress(value='40', max='100', cls='progress progress-success w-56'),
Progress(value='70', max='100', cls='progress progress-success w-56'),
Progress(value='100', max='100', cls='progress progress-success w-56')
```

#### Info Colors  
```python
Progress(value='0', max='100', cls='progress progress-info w-56'),
Progress(value='10', max='100', cls='progress progress-info w-56'),                
Progress(value='40', max='100', cls='progress progress-info w-56'),
Progress(value='70', max='100', cls='progress progress-info w-56'),
Progress(value='100', max='100', cls='progress progress-info w-56')
```

#### Warning Colors  
```python
Progress(value='0', max='100', cls='progress progress-warning w-56'),
Progress(value='10', max='100', cls='progress progress-warning w-56'),                
Progress(value='40', max='100', cls='progress progress-warning w-56'),
Progress(value='70', max='100', cls='progress progress-warning w-56'),
Progress(value='100', max='100', cls='progress progress-warning w-56')
```

#### Error Colors  
```python
Progress(value='0', max='100', cls='progress progress-error w-56'),
Progress(value='10', max='100', cls='progress progress-error w-56'),                
Progress(value='40', max='100', cls='progress progress-error w-56'),
Progress(value='70', max='100', cls='progress progress-error w-56'),
Progress(value='100', max='100', cls='progress progress-error w-56')
```

<a id="radial-progress"></a>

## Radial Progress  
**Category**: Feedback
Circular progress indicators showing completion percentage
### Examples

#### Basic Usage  
```python
Div('70%', 
    style='--value:70;', 
    role='progressbar', 
    cls='radial-progress'
)
```

#### Color Customization  
```python
Div('70%', style='--value:70;', role='progressbar', cls='radial-progress text-primary')
```

#### Background Customization  
```python
Div('70%', style='--value:70;', role='progressbar', cls='radial-progress bg-primary text-primary-content border-primary border-4')
```

#### Values  
```python
Div('0%', style='--value:0;', role='progressbar', cls='radial-progress'),
Div('20%', style='--value:20;', role='progressbar', cls='radial-progress'),
Div('60%', style='--value:60;', role='progressbar', cls='radial-progress'),
Div('80%', style='--value:80;', role='progressbar', cls='radial-progress'),
Div('100%', style='--value:100;', role='progressbar', cls='radial-progress')
```

#### Size and Thickness  
```python
Div('70%', style='--value:70; --size:12rem; --thickness: 2px;', role='progressbar', cls='radial-progress'),
Div('70%', style='--value:70; --size:12rem; --thickness: 2rem;', role='progressbar', cls='radial-progress')
```

<a id="skeleton"></a>

## Skeleton  
**Category**: Feedback
Loading placeholders for content while it's being loaded
### Examples

#### Basic Skeleton  
```python
Div(cls='skeleton h-32 w-32')
```

#### Circle with Content  
```python
Div(
    Div(
        Div(cls="skeleton h-16 w-16 shrink-0 rounded-full"),
        Div(
            Div(cls="skeleton h-4 w-20"),
            Div(cls="skeleton h-4 w-28"),
            cls="flex flex-col gap-4"
        ),
        cls="flex items-center gap-4"
    ),
    Div(cls="skeleton h-32 w-full"),
    cls="flex w-52 flex-col gap-4"
)
```

#### Rectangle with Content  
```python
Div(
    Div(cls='skeleton h-32 w-full'),
    Div(cls='skeleton h-4 w-28'),
    Div(cls='skeleton h-4 w-full'),
    Div(cls='skeleton h-4 w-full'),
    cls='flex w-52 flex-col gap-4'
)
```

<a id="toast"></a>

## Toast  
**Category**: Feedback
Temporary notifications for displaying system messages
### Examples

#### Basic Toast  
```python
Div(
    Div(
        Span('New message arrived.'),
        cls='alert alert-info'
    ),
    cls='toast'
)
```

#### Position: Top Start  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-top toast-start"
)
```

#### Position: Top Center  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-top toast-center"
)
```

#### Position: Top End  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-top toast-end"
)
```

#### Position: Middle Start  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-start toast-middle"
)
```

#### Position: Middle Center  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-center toast-middle"
)
```

#### Position: Middle End  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-end toast-middle"
)
```

#### Position: Bottom Start  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-start"
)
```

#### Position: Bottom Center  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-center"
)
```

#### Position: Bottom End  
```python
Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-end"
)
```

<a id="tooltip"></a>

## Tooltip  
**Category**: Feedback
Informative text that appears when hovering over an element
### Examples

#### Basic Tooltip  
```python
Div(
    Button('Hover me', cls='btn'),
    data_tip='hello',
    cls='tooltip'
)
```

#### Primary Color  
```python
Div(
    Button('Primary', cls='btn btn-primary'),
    data_tip='Primary',
    cls='tooltip tooltip-open tooltip-primary'
)
```

#### Secondary Color  
```python
Div(
    Button('Secondary', cls='btn btn-secondary'),
    data_tip='Secondary',
    cls='tooltip tooltip-open tooltip-secondary'
)
```

#### Accent Color  
```python
Div(
    Button('Accent', cls='btn btn-accent'),
    data_tip='Accent',
    cls='tooltip tooltip-open tooltip-accent'
)
```

#### Info Color  
```python
Div(
    Button('Info', cls='btn btn-info'),
    data_tip='Info',
    cls='tooltip tooltip-open tooltip-info'
)
```

#### Success Color  
```python
Div(
    Button('Success', cls='btn btn-success'),
    data_tip='Success',
    cls='tooltip tooltip-open tooltip-success'
)
```

#### Warning Color  
```python
Div(
    Button('Warning', cls='btn btn-warning'),
    data_tip='Warning',
    cls='tooltip tooltip-open tooltip-warning'
)
```

#### Error Color  
```python
Div(
    Button('Error', cls='btn btn-error'),
    data_tip='Error',
    cls='tooltip tooltip-open tooltip-error'
)
```

#### Force Open  
```python
Div(
    Button('Force open', cls='btn'),
    data_tip='hello',
    cls='tooltip tooltip-open'
)
```

#### Responsive  
```python
Div(
    Button('Hover me', cls='btn'),
    data_tip='hello',
    cls='lg:tooltip'
)
```

<a id="calendar"></a>

## Calendar  
**Category**: Data Input
Styled calendar components
### Examples

#### Cally Calendar  
```python
Div(
    NotStr("""
            <calendar-date class="cally bg-base-100 border border-base-300 shadow-lg rounded-box">
            <svg aria-label="Previous" class="size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
            <svg aria-label="Next" class="size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
            <calendar-month></calendar-month>
            </calendar-date>
            """),
    Script(src="https://unpkg.com/cally", type="module"),                              
)
```

#### Cally Date Picker  
```python
Div(
    NotStr("""
            <input popovertarget="cally-popover1" class="input input-border" id="cally1" style="anchor-name:--cally1">
            Pick a date
            </input>
            <div popover id="cally-popover1" class="dropdown bg-base-100 rounded-box shadow-lg" style="position-anchor:--cally1">
            <calendar-date class="cally" onchange={document.getElementById('cally1').innerText = this.value}>
                <svg aria-label="Previous" class="size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
                <svg aria-label="Next" class="size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
                <calendar-month></calendar-month>
            </calendar-date>
            </div>
        """),
    Script(src="https://unpkg.com/cally", type="module"),                             
)
```

#### Pikaday Datepicker  
```python
Script(src='https://cdn.jsdelivr.net/npm/pikaday/pikaday.js'),
Input(type='text', autocomplete="off", placeholder='Pick a date', id='myDatepicker', cls='input pika-single'),
Script("var picker = new Pikaday({ field: document.getElementById('myDatepicker') });"),
```

<a id="checkbox"></a>

## Checkbox  
**Category**: Data Input
Allow users to select one or multiple options from a set
### Examples

#### Basic Checkbox  
```python
Input(type='checkbox', checked='checked', cls='checkbox')
```

#### Color Variants  
```python
Input(type='checkbox', checked='checked', cls='checkbox checkbox-primary'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-secondary'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-neutral'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-accent'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-info'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-success'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-warning'),
Input(type='checkbox', checked='checked', cls='checkbox checkbox-error'),
```

#### With Fieldset and Label  
```python
Fieldset(
    Legend('Login options', cls='fieldset-legend'),
    Label(
        'Remember me',
        Input(type='checkbox', checked='checked', cls='checkbox'),
        cls='fieldset-label'
    ),
    cls='fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64'
)
```

#### Size Variants  
```python
Input(type='checkbox', cls='checkbox checkbox-xs'),
Input(type='checkbox', cls='checkbox checkbox-sm'),
Input(type='checkbox', cls='checkbox checkbox-md'),
Input(type='checkbox', cls='checkbox checkbox-lg'),
Input(type='checkbox', cls='checkbox checkbox-xl'),
```

#### Disabled State  
```python
Input(type='checkbox', disabled=true, cls='checkbox'),
Input(type='checkbox', disabled=true, checked='checked', cls='checkbox'),
```

#### Indeterminate State  
```python
Input(type='checkbox', id='my-checkbox', cls='checkbox', onclick="event.preventDefault()"),
Script('document.getElementById("my-checkbox").indeterminate = true')
```

#### Custom Colors  
```python
Input(
    type='checkbox',
    checked=True,
    cls='checkbox border-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500'
)
```

<a id="fieldset"></a>

## Fieldset  
**Category**: Data Input
Container for grouping related form elements
### Examples

#### Basic Fieldset  
```python
Fieldset(
    Legend('Page title', cls='fieldset-legend'),
    Input(type='text', placeholder='My awesome page', cls='input'),
    P('You can edit page title later on from settings', cls='fieldset-label'),
    cls='fieldset'
)
```

#### Styled Fieldset  
```python
Fieldset(
    Legend('Page title', cls='fieldset-legend'),
    Input(type='text', placeholder='My awesome page', cls='input'),
    P('You can edit page title later on from settings', cls='fieldset-label'),
    cls='fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box'
)
```

#### Multiple Inputs  
```python
Fieldset(
    Legend('Page details', cls='fieldset-legend'),
    Label('Title', cls='fieldset-label'),
    Input(type='text', placeholder='My awesome page', cls='input'),
    Label('Slug', cls='fieldset-label'),
    Input(type='text', placeholder='my-awesome-page', cls='input'),
    Label('Author', cls='fieldset-label'),
    Input(type='text', placeholder='Name', cls='input'),
    cls='fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box'
)
```

#### Fieldset with Joins  
```python
Fieldset(
    Legend('Page details', cls='fieldset-legend'),
    Div(
        Input(type='text', placeholder='My awesome page', cls='input join-item'),
        Button('save', cls='btn join-item'),
        cls='join'
    ),
    cls='fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box'
)
```

#### Login Form  
```python
Fieldset(
    Legend('Login', cls='fieldset-legend'),
    Label('Email', cls='fieldset-label'),
    Input(type='email', placeholder='Email', cls='input'),
    Label('Password', cls='fieldset-label'),
    Input(type='password', placeholder='Password', cls='input'),
    Button('Login', cls='btn btn-neutral mt-4'),
    cls='fieldset w-xs bg-base-200 border border-base-300 p-4 rounded-box'
)
```

<a id="file-input"></a>

## File Input  
**Category**: Data Input
Component for uploading files with various styling options
### Examples

#### Basic File Input  
```python
Input(type='file', cls='file-input')
```

#### Color Variants  
```python
Input(type='file', cls='file-input  file-input-primary'),
Input(type='file', cls='file-input file-input-secondary'),
Input(type='file', cls='file-input file-input-accent'),
Input(type='file', cls='file-input file-input-neutral'),
Input(type='file', cls='file-input file-input-info'),
Input(type='file', cls='file-input file-input-success'),
Input(type='file', cls='file-input file-input-warning'),
Input(type='file', cls='file-input file-input-error'),
```

#### With Labels  
```python
Fieldset(
    Legend('Pick a file', cls='fieldset-legend'),
    Input(type='file', cls='file-input'),
    Label('Max size 2MB', cls='fieldset-label'),
    cls='fieldset'
)
```

#### Size Variants  
```python
Input(type='file', cls='file-input file-input-xs'),
Input(type='file', cls='file-input file-input-sm'),
Input(type='file', cls='file-input file-input-md'),
Input(type='file', cls='file-input file-input-lg'),
Input(type='file', cls='file-input file-input-xl'),
```

#### Disabled State  
```python
Input(type='file', placeholder="Disabled", disabled=true, cls='file-input')
```

#### Ghost Variant  
```python
Input(type='file', cls='file-input file-input-ghost')
```

<a id="filter"></a>

## Filter  
**Category**: Data Input
Radio group with automatic filtering behavior
### Examples

#### Form-based Filter  
```python
Form(
    Input(type='reset', value='×', cls='btn btn-square'),
    Input(type='radio', name='frameworks', aria_label='Svelte', cls='btn'),
    Input(type='radio', name='frameworks', aria_label='Vue', cls='btn'),
    Input(type='radio', name='frameworks', aria_label='React', cls='btn'),
    cls='filter'
)
```

#### Non-form Filter  
```python
Div(
    Input(type='radio', name='metaframeworks', aria_label='All', cls='btn filter-reset'),
    Input(type='radio', name='metaframeworks', aria_label='Sveltekit', cls='btn'),
    Input(type='radio', name='metaframeworks', aria_label='Nuxt', cls='btn'),
    Input(type='radio', name='metaframeworks', aria_label='Next.js', cls='btn'),
    cls='filter'
)
```

<a id="label"></a>

## Label  
**Category**: Data Input
Input labels with positioning and floating variants
### Examples

#### Basic Input Label  
```python
Label(
    Span('https://', cls='label'),
    Input(type='text', placeholder='URL'),
    cls='input'
)
```

#### End Position Label  
```python
Label(
    Input(type='text', placeholder='domain name'),
    Span('.com', cls='label'),
    cls='input'
)
```

#### Label for Select  
```python
Label(
    Span('Type', cls='label'),
    Select(
        Option('Personal'),
        Option('Business')
    ),
    cls='select'
)
```

#### Label for Date Input  
```python
Label(
    Span('Publish date', cls='label'),
    Input(type='date'),
    cls='input'
)
```

#### Floating Label  
```python
Label(
    Span('Your name'),
    Input(type='text', placeholder='Your name', cls='input input-md'),
    cls='floating-label'
)
```

#### Different Size Floating Labels  
```python
Label(
    Input(type='text', placeholder='Extra Small', cls='input input-xs'),
    Span('Extra Small'),
    cls='floating-label'
)
Label(
    Input(type='text', placeholder='Small', cls='input input-sm'),
    Span('Small'),
    cls='floating-label'
)
Label(
    Input(type='text', placeholder='Medium', cls='input input-md'),
    Span('Medium'),
    cls='floating-label'
)
Label(
    Input(type='text', placeholder='Large', cls='input input-lg'),
    Span('Large'),
    cls='floating-label'
)
Label(
    Input(type='text', placeholder='Extra Large', cls='input input-xl'),
    Span('Extra Large'),
    cls='floating-label'
)
```

<a id="radio"></a>

## Radio  
**Category**: Data Input
Allows single selection from multiple options
### Examples

#### Basic Radio  
```python
Input(type='radio', name='radio-1', checked='checked', cls='radio'),
Input(type='radio', name='radio-1', cls='radio')
```

#### Primary Color  
```python
Input(type='radio', name='radio-color-0', checked='', cls='radio radio-primary'),
Input(type='radio', name='radio-color-0', checked='checked', cls='radio radio-primary')
```

#### Secondary Color  
```python
Input(type='radio', name='radio-color-1', checked='', cls='radio radio-secondary'),
Input(type='radio', name='radio-color-1', checked='checked', cls='radio radio-secondary')
```

#### Accent Color  
```python
Input(type='radio', name='radio-color-2', checked='', cls='radio radio-accent'),
Input(type='radio', name='radio-color-2', checked='checked', cls='radio radio-accent')
```

#### Neutral Color  
```python
Input(type='radio', name='radio-color-3', checked='', cls='radio radio-neutral'),
Input(type='radio', name='radio-color-3', checked='checked', cls='radio radio-neutral')
```

#### Info Color  
```python
Input(type='radio', name='radio-color-4', checked='', cls='radio radio-info'),
Input(type='radio', name='radio-color-4', checked='checked', cls='radio radio-info')
```

#### Success Color  
```python
Input(type='radio', name='radio-color-5', checked='', cls='radio radio-success'),
Input(type='radio', name='radio-color-5', checked='checked', cls='radio radio-success')
```

#### Warning Color  
```python
Input(type='radio', name='radio-color-6', checked='', cls='radio radio-warning'),
Input(type='radio', name='radio-color-6', checked='checked', cls='radio radio-warning')
```

#### Error Color  
```python
Input(type='radio', name='radio-color-7', checked='', cls='radio radio-error'),
Input(type='radio', name='radio-color-7', checked='checked', cls='radio radio-error')
```

#### Sizes  
```python
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-xs'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-sm'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-md'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-lg'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-xl')
```

#### Disabled State  
```python
Input(type='radio', name='disabled-radio', disabled=True, cls='radio'),
Input(type='radio', name='disabled-radio', disabled=True, checked=True, cls='radio'),
```

<a id="range"></a>

## Range  
**Category**: Data Input
Slider control for selecting values within a specified range
### Examples

#### Basic Range  
```python
Input(type='range', min='0', max='100', value='40', cls='range')
```

#### Color Variants  
```python
Iput(type='range', min='0', max='100', value='40', cls='range range-primary'),
Input(type='range', min='0', max='100', value='40', cls='range range-secondary'),
Input(type='range', min='0', max='100', value='40', cls='range range-accent'),
Input(type='range', min='0', max='100', value='40', cls='range range-neutral'),
Input(type='range', min='0', max='100', value='40', cls='range range-info'),
Input(type='range', min='0', max='100', value='40', cls='range range-success'),
Input(type='range', min='0', max='100', value='40', cls='range range-warning'),            
Input(type='range', min='0', max='100', value='40', cls='range range-error')
```

#### Size Variants  
```python
Input(type='range', min='0', max='100', value='40', cls='range range-xs'),
Input(type='range', min='0', max='100', value='50', cls='range range-sm'),
Input(type='range', min='0', max='100', value='60', cls='range range-md'),
Input(type='range', min='0', max='100', value='70', cls='range range-lg'),
Input(type='range', min='0', max='100', value='80', cls='range range-xl'),
```

#### With Steps  
```python
Input(type='range', min='0', max='100', value='25', step='25', cls='range'),
    Div(
        Span('|'),
        Span('|'),
        Span('|'),
        Span('|'),
        Span('|'),
        cls='flex w-full justify-between px-2 text-xs'
    )
    <div class="w-full max-w-xs">
  <input type="range" min="0" max="100" value="25" class="range" step="25" />
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
    <span>|</span>
  </div>
  <div class="flex justify-between px-2.5 mt-2 text-xs">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>
```

#### Custom Color  
```python
Input(
    type='range',
    min='0',
    max='100',
    value='40',
    cls='range text-blue-300 [--range-bg:orange] [--range-thumb:blue] [--range-fill:0]'
)
```

<a id="rating"></a>

## Rating  
**Category**: Data Input
Input component for collecting user ratings using visual symbols
### Examples

#### Basic Rating  
```python
Div(
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', checked=True, cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    Input(type='radio', name='rating-1', cls='mask mask-star'),
    cls='rating'
)
```

#### Star Variant  
```python
Div(
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', checked=True, cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    Input(type='radio', name='rating-3', cls='mask mask-star-2 bg-orange-400'),
    cls='rating'
)
```

#### Heart Multicolor Variant  
```python
Div(
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-red-400'),
    Input(type='radio', name='rating-4', checked=True, cls='mask mask-heart bg-orange-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-yellow-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-lime-400'),
    Input(type='radio', name='rating-4', cls='mask mask-heart bg-green-400'),
    cls='rating gap-1'
)
```

#### With Hidden Option  
```python
Div(
    Input(type='radio', name='rating-2', cls='rating-hidden'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', checked=True, cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    Input(type='radio', name='rating-2', cls='mask mask-star-2'),
    cls='rating rating-lg'
)
```

#### Read only rating  
```python
Div(
    Div(cls='mask mask-star', aria_label='1 star'),
    Div(cls='mask mask-star', aria_label='2 star'),
    Div(cls='mask mask-star', aria_label='3 star', aria_current='true'),
    Div(cls='mask mask-star', aria_label='4 star'),
    Div(cls='mask mask-star', aria_label='5 star'),
    cls='rating'
)
```

#### Star Custom Variant  
```python
Div(
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', checked=True, cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    Input(type='radio', name='rating-5', cls='mask mask-star-2 bg-green-500'),
    cls='rating'
)
```

#### Size Variants  
```python
Div(
    Div(
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-6', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-xs'
    ),
    Div(
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-7', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-sm'
    ),
    Div(
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-8', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-md'
    ),
    Div(
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', checked=True, cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        Input(type='radio', name='rating-9', cls='mask mask-star-2 bg-orange-400'),
        cls='rating rating-lg'
    ),
    cls='flex flex-col items-center gap-2'
)
```

#### Half Stars  
```python
Div(
    Input(type='radio', name='rating-10', cls='rating-hidden'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', checked='checked', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-1 bg-green-500'),
    Input(type='radio', name='rating-10', cls='mask mask-star-2 mask-half-2 bg-green-500'),
    cls='rating rating-lg rating-half'
)
```

<a id="select"></a>

## Select  
**Category**: Data Input
Dropdown input for selecting from multiple options
### Examples

#### Basic Select  
```python
Select(
    Option('Pick your favorite Simpson', disabled=True, selected=True),
    Option('Homer'),
    Option('Marge'),
    Option('Bart'),
    Option('Lisa'),
    Option('Maggie'),
    cls='select'
)
```

#### Color Variants  
```python
Select(
    Option('What is the best TV show?', disabled=True, selected=True),
    Option('Game of Thrones'),
    Option('Lost'),
    Option('Breaking Bad'),
    Option('Walking Dead'),
    cls='select select-primary'
)
```

#### Ghost Style  
```python
Select(
    Option('Pick the best JS framework', disabled=True, selected=True),
    Option('Svelte'),
    Option('Vue'),
    Option('React'),
    cls='select select-ghost'
)
```

#### Size Variants  
```python
Select(
    Option('Extra Large', disabled=True, selected=True),
    Option('Extra Large Apple'),
    Option('Extra Large Orange'),
    Option('Extra Large Tomato'),
    cls='select select-xl'
),
Select(
    Option('Large', disabled=True, selected=True),
    Option('Large Apple'),
    Option('Large Orange'),
    Option('Large Tomato'),
    cls='select select-lg'
),
Select(
    Option('Normal', disabled=True, selected=True),
    Option('Normal Apple'),
    Option('Normal Orange'),
    Option('Normal Tomato'),
    cls='select'
),
Select(
    Option('Small', disabled=True, selected=True),
    Option('Small Apple'),
    Option('Small Orange'),
    Option('Small Tomato'),
    cls='select select-sm'
),
Select(
    Option('Tiny', disabled=True, selected=True),
    Option('Tiny Apple'),
    Option('Tiny Orange'),
    Option('Tiny Tomato'),
    cls='select select-xs'
)
```

#### With Fieldset and Labels  
```python
Fieldset(
        Legend('Browsers', cls='fieldset-legend'),
        Select(
            Option('Pick a browser', disabled=True, selected=True),
            Option('Chrome'),
            Option('FireFox'),
            Option('Safari'),
            cls='select'
        ),
        Span('Optional', cls='fieldset-label'),
        cls='fieldset w-xs'
    )
```

#### Disabled State  
```python
Select(
    Option("You can't touch this"),
    disabled=True,
    cls='select'
)
```

<a id="text-input"></a>

## Text Input  
**Category**: Data Input
Input field for text entry with various styling options
### Examples

#### Basic Input  
```python
Input(type='text', placeholder='Type here', cls='input')
```

#### Ghost Style  
```python
Input(type='text', placeholder='Type here', cls='input input-ghost')
```

#### Fieldset with Labels  
```python
Fieldset(
    Legend("What is your name?", cls='fieldset-legend'),
    Input(type='text', placeholder='Type here', cls='input'),
    P("Optional", cls='fieldset-label'),
    cls='fieldset'
)
```

#### With Icons  
```python
Div(
    Label(
        Input(type='text', placeholder='Search', cls='grow'),
        Icon.search(),
        cls='input input-bordered flex items-center gap-2'
    ),
    Label(
        Icon.email(),
        Input(type='text', placeholder='Email', cls='grow'),
        cls='input input-bordered flex items-center gap-2'
    ),
    Label(
        Icon.user(),
        Input(type='text', placeholder='Username', cls='grow'),
        cls='input input-bordered flex items-center gap-2'
    ),
    cls='flex flex-col gap-4 w-full items-center'
)
```

#### Color Variants  
```python
Input(
    type='text',
    placeholder='Type here',
    cls=f'input input-{color}'
)
```

#### Size Variants  
```python
Input(
    type='text',
    placeholder='Type here',
    cls=f'input input-{size}'
)
```

#### Disabled State  
```python
Input(
    type='text',
    placeholder="You can't touch this",
    disabled=True,
    cls='input input-bordered w-full max-w-xs'
)
```

<a id="textarea"></a>

## Textarea  
**Category**: Data Input
Multi-line text input field for longer text entries
### Examples

#### Basic Textarea  
```python
Textarea(placeholder='Bio', cls='textarea')
```

#### Color Variants  
```python
Textarea(placeholder='Primary', cls='textarea textarea-primary')
Textarea(placeholder='Secondary', cls='textarea textarea-secondary')
Textarea(placeholder='Accent', cls='textarea textarea-accent')
Textarea(placeholder='Neutral', cls='textarea textarea-neutral')
Textarea(placeholder='Info', cls='textarea textarea-info')
Textarea(placeholder='Success', cls='textarea textarea-success')
Textarea(placeholder='Warning', cls='textarea textarea-warning')
Textarea(placeholder='Error', cls='textarea textarea-error')
```

#### Ghost Style  
```python
Textarea(placeholder='Bio', cls='textarea textarea-ghost')
```

#### Size Variants  
```python
Textarea(placeholder='Xsmall', cls='textarea textarea-xs')
Textarea(placeholder='Small', cls='textarea textarea-sm')
Textarea(placeholder='Medium', cls='textarea textarea-md')
Textarea(placeholder='Large', cls='textarea textarea-lg')
Textarea(placeholder='Xlarge', cls='textarea textarea-xl')
```

#### Disabled State  
```python
Textarea(placeholder='Bio', disabled=True, cls='textarea')
```

#### With Fieldset and Labels  
```python
Fieldset(
    Legend("Your bio", cls='fieldset-legend'),
    Textarea(placeholder='Bio', cls='textarea h-24'),
    Div("Optional", cls='fieldset-label'),
    cls='fieldset'
)
```

<a id="toggle"></a>

## Toggle  
**Category**: Data Input
Switch control for boolean input states
### Examples

#### Basic Toggle  
```python
Input(type='checkbox', checked=True, cls='toggle')
```

#### Color Variants  
```python
Input(type='checkbox', checked=True, cls='toggle toggle-primary'),
Input(type='checkbox', checked=True, cls='toggle toggle-secondary'),
Input(type='checkbox', checked=True, cls='toggle toggle-accent'),
Input(type='checkbox', checked=True, cls='toggle toggle-neutral'),
Input(type='checkbox', checked=True, cls='toggle toggle-info'),
Input(type='checkbox', checked=True, cls='toggle toggle-success'),
Input(type='checkbox', checked=True, cls='toggle toggle-warning'),
Input(type='checkbox', checked=True, cls='toggle toggle-error'),
```

#### Disabled States  
```python
Input(type='checkbox', disabled=True, cls='toggle'),
            Input(type='checkbox', disabled=True, checked=True, cls='toggle'),
```

#### Toggle with Icons  
```python
Label(
    Input(type='checkbox'),
    NotStr("<svg aria-label='enabled' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g stroke-linejoin='round' stroke-linecap='round' stroke-width='4' fill='none' stroke='currentColor'><path d='M20 6 9 17l-5-5'></path></g></svg>"),
    NotStr("<svg aria-label='disabled' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>"),
    cls="toggle text-base-content",
)
```

#### Custom Color  
```python
Input(type='checkbox', checked=True, 
    cls='toggleborder-indigo-600 bg-indigo-500 checked:bg-orange-400 checked:text-orange-800 checked:border-orange-500')
```

#### Indeterminate State  
```python
<!-- You can make a checkbox indeterminate using JS -->
Input(type='checkbox', id='my-toggle', cls='toggle', onclick="event.preventDefault()"),
Script('document.getElementById("my-toggle").indeterminate = true')
```

#### With Fieldset and Labels  
```python
Fieldset(
    Legend("Login options", cls='fieldset-legend'),
    Label(
        Input(type='checkbox', checked=True, cls='toggle'),
        "Remember me",
        cls='fieldset-label'
    ),
    cls='fieldset p-4 bg-base-100 border border-base-300 rounded-box w-64'
)
```

#### Size Variants  
```python
Input(type='checkbox', checked=True, cls='toggle toggle-xs'),
Input(type='checkbox', checked=True, cls='toggle toggle-sm'),
Input(type='checkbox', checked=True, cls='toggle toggle-md'),
Input(type='checkbox', checked=True, cls='toggle toggle-lg'),
Input(type='checkbox', checked=True, cls='toggle toggle-xl'),
```

<a id="validator"></a>

## Validator  
**Category**: Data Input
Form validation states with visual feedback
### Examples

#### Email Validation  
```python
Input(type='email', required=True, placeholder='mail@site.com', cls='input validator')
```

#### Validation with hint text  
```python
Input(type='email', required=True, placeholder='mail@site.com', cls='input validator'),
Div('Enter valid email address', cls='validator-hint')
```

#### Password Requirements  
```python
Input(type='password', required=True, placeholder='Password', minlength='8', pattern='(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}', title='Must be more than 8 characters, including number, lowercase letter, uppercase letter', cls='input validator'),
P(
    'Must be more than 8 characters, including',
    Br(),
    'At least one number',
    Br(),
    'At least one lowercase letter',
    Br(),
    'At least one uppercase letter',
    cls='validator-hint hidden'
)
```

#### URL input Requirements  
```python
Input(type='url', required=True, placeholder='https://', value='https://', pattern='^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9-].*[a-zA-Z0-9])?.)+[a-zA-Z].*$', title='Must be valid URL', cls='input validator'),
P('Must be valid URL', cls='validator-hint')
```

#### Username Requirements  
```python
Input(type='input', required=True, placeholder='Username', pattern='[A-Za-z][A-Za-z0-9\-]*', minlength='3', maxlength='30', title='Only letters, numbers or dash', cls='input validator'),
P(
    'Must be 3 to 30 characters',
    Br(),
    'containing only letters, numbers or dash',
    cls='validator-hint'
)
```

#### Date input Requirements  
```python
Input(type='date', required=True, placeholder='Pick a date in 2025', min='2025-01-01', max='2025-12-31', title='Must be valid URL', cls='input validator'),
P('Must be 2025', cls='validator-hint')
```

#### Phone Number Requirements  
```python
Input(type='tel', required=True, placeholder='Phone', pattern='[0-9]*', minlength='10', maxlength='10', title='Must be 10 digits', cls='input validator tabular-nums'),
P('Must be 10 digits', cls='validator-hint')
```

#### Number input Requirements  
```python
Input(type='number', required=True, placeholder='Type a number between 1 to 10', min='1', max='10', title='Must be between be 1 to 10', cls='input validator'),
P('Must be between be 1 to 10', cls='validator-hint')
```

#### Checkbox Requirements  
```python
Input(type='checkbox', required=True, title='Required', cls='checkbox validator'),
P('Required', cls='validator-hint hidden')
```

#### Toggle Requirements  
```python
Input(type='checkbox', required=True, title='Required', cls='toggle validator'),
P('Required', cls='validator-hint hidden')
```

#### Select Requirements  
```python
Form(
    Select(
        Option('Choose:', disabled=True, selected=True, value=''),
        Option('Tabs'),
        Option('Spaces'),
        required=True,
        cls='select validator'
    ),
    P('Required', cls='validator-hint'),
    Button('Submit form', type='submit', cls='btn')
)
```

<a id="divider"></a>

## Divider  
**Category**: Layout
Horizontal or vertical separator between content
### Examples

#### Basic Divider  
```python
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'),
```

#### Color Variants  
```python
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'
)
```

#### Horizontal Divider  
```python
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'
)
```

#### Vertical Positioning  
```python
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  
```python
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'
)
```

#### No text Divider  
```python
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  
```python
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'
)
```

<a id="drawer"></a>

## Drawer  
**Category**: Layout
Sidebar component that can be toggled open/closed
### Examples

#### Basic Drawer  
```python
Div(
    Input(id='my-drawer-1', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-1', cls='btn btn-primary drawer-button'),
        cls='drawer-content'
    ),
    Div(
        Label(fr='my-drawer-1', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(A('Sidebar Item 1')),
            Li(A('Sidebar Item 2')),
            cls='menu p-4 w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'                            
    ),
    cls='drawer h-56'                        
)
```

#### Responsive Drawer  
```python
Div(
    Input(id='my-drawer-2', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-2', cls='btn btn-primary drawer-button lg:hidden'),
        cls='drawer-content flex flex-col items-center justify-center'
    ),
    Div(
        Label(fr='my-drawer-2', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(A('Sidebar Item 1')),
            Li(A('Sidebar Item 2')),
            cls='menu p-4 w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'                            
    ),
    cls='drawer h-56 lg:drawer-open'                        
)
```

#### Responsive Navbar Integration  
```python
Div(
    Input(id='my-drawer-3', type='checkbox', cls='drawer-toggle'),
    Div(
        Div(
            Div(
                Label(
                    Icon.menu_bars(f"{Size.MD}"),
                    fr='my-drawer-3',
                    aria_label='open sidebar',
                    cls='btn btn-square btn-ghost'
                ),
                cls='flex-none lg:hidden'
            ),
            Div('Navbar Title', cls='flex-1 px-2 mx-2'),
            Div(
                Ul(
                    Li(Button('Navbar Item 1')),
                    Li(Button('Navbar Item 2')),
                    cls='menu menu-horizontal'
                ),
                cls='flex-none hidden lg:block'
            ),
            cls='w-full navbar bg-base-300'
        ),
        Div('Content', cls='flex justify-center items-center flex-grow'),
        cls='flex flex-col drawer-content'
    ),
    Div(
        Label(fr='my-drawer-3', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(Button('Sidebar Item 1')),
            Li(Button('Sidebar Item 2')),
            cls='p-4 menu w-60 md:w-80 min-h-full bg-base-200'
        ),
        cls='drawer-side'
    ),
    cls='drawer h-56'
)
```

#### Right-aligned Drawer  
```python
Div(
    Input(id='my-drawer-4', type='checkbox', cls='drawer-toggle'),
    Div(
        Label('Open drawer', fr='my-drawer-4', cls='btn btn-primary drawer-button'),
        cls='drawer-content flex flex-col items-center justify-center'
    ),
    Div(
        Label(fr='my-drawer-4', aria_label='close sidebar', cls='drawer-overlay'),
        Ul(
            Li(Button('Sidebar Item 1')),
            Li(Button('Sidebar Item 2')),
            cls='menu p-4 w-60 md:w-80 min-h-full bg-base-200 text-base-content'
        ),
        cls='drawer-side'
    ),
    cls='drawer drawer-end' 
)
```

<a id="footer"></a>

## Footer  
**Category**: Layout
Responsive footer components for page bottom sections
### Examples

#### Basic Footer  
```python
Footer(
    Nav(
        H6('Services', cls='footer-title'),
        Button('Branding', cls='link link-hover'),
        Button('Design', cls='link link-hover'),
        Button('Marketing', cls='link link-hover'),
        Button('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        Button('About us', cls='link link-hover'),
        Button('Contact', cls='link link-hover'),
        Button('Jobs', cls='link link-hover'),
        Button('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        Button('Terms of use', cls='link link-hover'),
        Button('Privacy policy', cls='link link-hover'),
        Button('Cookie policy', cls='link link-hover')
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content p-10'
)
```

#### Two Row Footer  
```python
Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        A('Terms of use', cls='link link-hover'),
        A('Privacy policy', cls='link link-hover'),
        A('Cookie policy', cls='link link-hover')
    ),
    Nav(
        H6('Social', cls='footer-title'),
        A('Twitter', cls='link link-hover'),
        A('Instagram', cls='link link-hover'),
        A('Facebook', cls='link link-hover'),
        A('Github', cls='link link-hover')
    ),
    Nav(
        H6('Explore', cls='footer-title'),
        A('Features', cls='link link-hover'),
        A('Enterprise', cls='link link-hover'),
        A('Security', cls='link link-hover'),
        A('Pricing', cls='link link-hover')
    ),
    Nav(
        H6('Apps', cls='footer-title'),
        A('Mac', cls='link link-hover'),
        A('Windows', cls='link link-hover'),
        A('iPhone', cls='link link-hover'),
        A('Android', cls='link link-hover')
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content grid-rows-2 p-10'
)
```

#### Centered Logo Footer  
```python
Footer(                
    Aside(
            Icon.hashtag(cls='w-[50px] h-[50px]'),
        P(
            'ACME Industries Ltd.',
            Br(),
            'Providing reliable tech since 1992',
            cls='font-bold'
        ),
        P(f'Copyright © {year} - All right reserved')
    ),
    Nav(
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),                       
            cls='grid grid-flow-col gap-4'
        )
    ),
    cls='footer footer-horizontal footer-center bg-primary text-primary-content p-10' 
)
```

#### Logos in Footer  
```python
Footer(
        Aside(
            Icon.hashtag(cls="w-[50px] h-[50px]"),
            P(
                'ACME Industries Ltd.',
                Br(),
                'Providing reliable tech since 1992'
            )
        ),
        Nav(
            H6('Services', cls='footer-title'),
            A('Branding', cls='link link-hover'),
            A('Design', cls='link link-hover'),
            A('Marketing', cls='link link-hover'),
            A('Advertisement', cls='link link-hover')
        ),
        Nav(
            H6('Company', cls='footer-title'),
            A('About us', cls='link link-hover'),
            A('Contact', cls='link link-hover'),
            A('Jobs', cls='link link-hover'),
            A('Press kit', cls='link link-hover')
        ),
        Nav(
            H6('Legal', cls='footer-title'),
            A('Terms of use', cls='link link-hover'),
            A('Privacy policy', cls='link link-hover'),
            A('Cookie policy', cls='link link-hover')
        ),
        cls='footer sm:footer-horizontal bg-base-200 text-base-content p-10'
    )
```

#### Centered Social Footer  
```python
Footer(                
    Nav(
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover'),
        cls='grid grid-flow-col gap-4'
    ),
    Nav(
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),                        
            cls='grid grid-flow-col gap-4'
        )
    ),
    Aside(
        P(f'Copyright © {year} - All right reserved by ACME Industries Ltd')
    ),
    cls='footer footer-horizontal footer-center bg-base-200 text-base-content rounded p-10'
)
```

#### Form Footer  
```python
Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        A('Terms of use', cls='link link-hover'),
        A('Privacy policy', cls='link link-hover'),
        A('Cookie policy', cls='link link-hover')
    ),
    Form(
        H6('Newsletter', cls='footer-title'),
        Fieldset(
            Label('Enter your email address'),                                                    
            Div(
                Input(type='text', placeholder='username@site.com', cls='input join-item'),
                Button('Subscribe', cls='btn btn-primary join-item'),
                cls='join'
            ),
            cls='w-80'
        )
    ),
    cls='footer sm:footer-horizontal bg-base-200 text-base-content p-10'
)
```

#### Double Footer  
```python
Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Legal', cls='footer-title'),
        A('Terms of use', cls='link link-hover'),
        A('Privacy policy', cls='link link-hover'),
        A('Cookie policy', cls='link link-hover')
    ),
    cls='footer sm:footer-horizontal bg-base-200 text-base-content p-10'
),
Footer(
    Aside(
        Icon.hashtag(cls='w-[24px] h-[24px]'),                       
        P(
            'ACME Industries Ltd.',
            Br(),
            'Providing reliable tech since 1992'
        ),
        cls='items-center grid-flow-col'
    ),
    Nav(
        Div(
            Button(Icon.twitter()),
            Button(Icon.facebook()),
            Button(Icon.youtube()),                            
            cls='grid grid-flow-col gap-4'
        ),
        cls='md:place-self-center md:justify-self-end'
    ),
    cls='footer bg-base-200 text-base-content border-base-300 border-t px-10 py-4'
)
```

#### Footer with Logo and Social Icons  
```python
Footer(
    Aside(
        Icon.hashtag(cls="w-[50px] h-[50px]"),
        P(
            'ACME Industries Ltd.',
            Br(),
            'Providing reliable tech since 1992'
        )
    ),
    Nav(
        H6('Social', cls='footer-title'),
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),
            cls='grid grid-flow-col gap-4'
        )
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content p-10'
)
```

#### Logo-Copyright-Social Footer  
```python
year = datetime.now().year

Footer(                               
    Aside(
        Icon.hashtag(cls="w-[36px] h-[36px]"),
        P(f'Copyright © {year} - All right reserved'),
        cls='grid-flow-col items-center'
    ),
    Nav(
        A(Icon.twitter()),
        A(Icon.youtube()),
        A(Icon.facebook()),                           
        cls='grid-flow-col gap-4 md:place-self-center md:justify-self-end'
    ),
    cls='footer sm:footer-horizontal bg-neutral text-neutral-content items-center p-4'
)
```

#### Links Social Footer  
```python
Footer(
    Nav(
        H6('Services', cls='footer-title'),
        A('Branding', cls='link link-hover'),
        A('Design', cls='link link-hover'),
        A('Marketing', cls='link link-hover'),
        A('Advertisement', cls='link link-hover')
    ),
    Nav(
        H6('Company', cls='footer-title'),
        A('About us', cls='link link-hover'),
        A('Contact', cls='link link-hover'),
        A('Jobs', cls='link link-hover'),
        A('Press kit', cls='link link-hover')
    ),
    Nav(
        H6('Social', cls='footer-title'),
        Div(
            A(Icon.twitter()),
            A(Icon.youtube()),
            A(Icon.facebook()),
            cls='grid grid-flow-col gap-4'
        )
    ),
    cls='footer sm:footer-horizontal bg-base-300 text-base-content p-10'
)
```

<a id="hero"></a>

## Hero  
**Category**: Layout
Full-width banner sections with flexible content layouts
### Examples

#### Centered Hero  
```python
Div(
    Div(
        Div(
            H3('Hello there', cls='text-5xl font-bold'),
            P('Provident cupiditate voluptatem et in...', cls='py-6'),
            Button('Get Started', cls='btn btn-primary'),
            cls='max-w-md'
        ),
        cls='hero-content text-center'
    ),
    cls='hero min-h-[30rem] rounded bg-base-200'
)
```

#### Hero with Figure  
```python
Div(
    Div(
        Img(src='https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp', cls='max-w-sm rounded-lg shadow-2xl'),
    Div(
        H1('Box Office News!', cls='text-5xl font-bold'),
        P('Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
        quasi. In deleniti eaque aut repudiandae et a id nisi.', cls='py-6'),
        Button('Get Started', cls='btn btn-primary')
    ),
    cls='hero-content flex-col lg:flex-row'
),
cls='hero bg-base-200 min-h-[30rem]'
)
```

#### Hero with Reverse Figure  
```python
Div(
    Div(
        Img(src='https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp', cls='max-w-sm rounded-lg shadow-2xl'),
    Div(
        H1('Box Office News!', cls='text-5xl font-bold'),
        P('Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
        quasi. In deleniti eaque aut repudiandae et a id nisi.', cls='py-6'),
        Button('Get Started', cls='btn btn-primary')
    ),
    cls='hero-content flex-col lg:flex-row-reverse'
),
cls='hero bg-base-200 min-h-[30rem]'
)
```

#### Hero with Background Image  
```python
Div(
        Div(cls='hero-overlay bg-opacity-60'),
        Div(
        Div(
            H1('Hello there', cls='mb-5 text-5xl font-bold'),
            P('Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
        quasi. In deleniti eaque aut repudiandae et a id nisi.', cls='mb-5'),
            Button('Get Started', cls='btn btn-primary'),
            cls='max-w-md'
        ),
        cls='hero-content text-neutral-content text-center'
    ),
    style='background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);',
    cls='hero min-h-[30rem]'
)
```

#### Hero with Form  
```python
Div(
    Div(
        Div(
            H1('Login now!', cls='text-5xl font-bold'),
            P('Provident cupiditate voluptatem et in...', cls='py-6'),
            cls='text-center lg:text-left'
        ),
        Div(
            Div(
                Fieldset(
                    Label("Email", cls="fieldset-label"),
                    Input(type="email", cls="input", placeholder="Email"),
                    Label("Password", cls="fieldset-label"),
                    Input(type="password", cls="input", placeholder="Password"),
                    Div(A("Forgot password?", cls="link link-hover")),
                    Button("Login", cls="btn btn-neutral mt-4"),
                    cls="fieldset"
                    ),                   
                cls="card-body"
            ),
            cls='card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl'
        ),
        cls='hero-content flex-col lg:flex-row-reverse'
    ),
    cls='hero bg-base-200 min-h-[30rem]'
)
<div class="hero bg-base-200 min-h-screen">
  <div class="hero-content flex-col lg:flex-row-reverse">
    <div class="text-center lg:text-left">
      <h1 class="text-5xl font-bold">Login now!</h1>
      <p class="py-6">
        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
        quasi. In deleniti eaque aut repudiandae et a id nisi.
      </p>
    </div>
    <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
      <div class="card-body">
        <fieldset class="fieldset">
          <label class="fieldset-label">Email</label>
          <input type="email" class="input" placeholder="Email" />
          <label class="fieldset-label">Password</label>
          <input type="password" class="input" placeholder="Password" />
          <div><a class="link link-hover">Forgot password?</a></div>
          <button class="btn btn-neutral mt-4">Login</button>
        </fieldset>
      </div>
    </div>
  </div>
</div>
```

<a id="indicator"></a>

## Indicator  
**Category**: Layout
Visual markers for highlighting interface elements
### Examples

#### Status indicator  
```python
Div(
    Span(cls='indicator-item status status-success'),
    Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
    cls='indicator'
)
```

#### Button indicator  
```python
Div(
    Span('99+', cls='indicator-item badge badge-secondary'),
    Button('inbox', cls='btn'),
    cls='indicator'
)
```

#### Multiple indicators  
```python
Div(
    Span('↖︎', cls='indicator-item indicator-top indicator-start badge'),
    Span('↑', cls='indicator-item indicator-top indicator-center badge'),
    Span('↗︎', cls='indicator-item indicator-top indicator-end badge'),
    Span('←', cls='indicator-item indicator-middle indicator-start badge'),
    Span('●', cls='indicator-item indicator-middle indicator-center badge'),
    Span('→', cls='indicator-item indicator-middle indicator-end badge'),
    Span('↙︎', cls='indicator-item indicator-bottom indicator-start badge'),
    Span('↓', cls='indicator-item indicator-bottom indicator-center badge'),
    Span('↘︎', cls='indicator-item indicator-bottom indicator-end badge'),
    Div('Box', cls='bg-base-200 grid h-32 w-60 place-items-center'),
    cls='indicator'
)
```

#### Top Start  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-top indicator-start'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Top Center  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-top indicator-center'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Top End  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-top indicator-end'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Middle Start  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-middle indicator-start'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Middle Center  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-middle indicator-center'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Middle End  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-middle indicator-end'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Bottom Start  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-bottom indicator-start'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Bottom Center  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-bottom indicator-center'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Bottom End  
```python
Div(
        Span(cls='indicator-item badge badge-secondary indicator-bottom indicator-end'),
        Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
        cls='indicator'
    )
```

#### Badge with text  
```python
Div(
    Span('new', cls='indicator-item badge badge-primary'),
    Div('content', cls='bg-base-300 grid h-32 w-32 place-items-center'),
    cls='indicator'
)
```

#### Responsive indicators  
```python
Div(
    Span(
        cls='indicator-item indicator-start sm:indicator-middle md:indicator-bottom lg:indicator-center xl:indicator-end badge badge-secondary'
    ),
    Div(
        'content',
        cls='grid w-32 h-32 rounded bg-base-300 place-items-center'
    ),
    cls='indicator'
)
```

#### Tab indicator  
```python
Div(
    A('Messages', cls='tab'),
    A(
        'Notifications',
        Span('8', cls='indicator-item badge'),
        cls='indicator tab tab-active'
    ),
    A('Requests', cls='tab'),
    cls='tabs tabs-lifted'
)
```

#### Avatar indicator  
```python
Div(
    Span('typing…', cls='indicator-item badge badge-secondary'),
    Div(
        Img(src='https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'),
        cls='h-20 w-20 rounded-lg'
    ),
    cls='avatar indicator'
)
```

#### Input indicator  
```python
Div(
    Span('Required', cls='indicator-item badge'),
    Input(type='text', placeholder='Your email address', cls='input input-bordered'),
    cls='indicator'
)
```

#### Card indicator  
```python
Div(
    Div(
        Button('Apply', cls='btn btn-primary'),
        cls='indicator-item indicator-bottom'
    ),
    Div(
        Div(
            H2('Job Title', cls='card-title'),
            P('Rerum reiciendis beatae tenetur excepturi'),
            cls='card-body'
        ),
        cls='card border'
    ),
    cls='indicator'
)
```

#### Image indicator  
```python
Div(
    Span('Uploading Image...', cls='indicator-item indicator-center indicator-middle badge'),
    Img(alt='Tailwind CSS examples', src='https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp'),
    cls='indicator'
)
```

<a id="join"></a>

## Join  
**Category**: Layout
Group elements with connected borders
### Examples

#### Horizontal Join  
```python
Div(
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    cls='join'
)
```

#### With Form Elements  
```python
Div(
    Div(            
        Input(placeholder='Search', cls='input join-item'),            
    ),
    Select(
        Option('Filter', disabled=True, selected=True),
        Option('Sci-fi'),
        Option('Drama'),
        Option('Action'),
        cls='select join-item'
    ),
    Div(
        Span('new', cls='indicator-item badge badge-secondary'),
        Button('Search', cls='btn join-item'),
        cls='indicator'
        ),            
    cls='join'
)
```

#### Custom Radius  
```python
Div(
    Input(
        placeholder="Email", 
        cls="input input-bordered join-item w-36 lg:w-52"
    ),
    Button(
        "Subscribe", 
        cls="btn join-item rounded-r-full"
    ),
    cls="join"
)
```

#### Vertical Join  
```python
Div(
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    cls='join join-vertical'
)
```

#### Radio Button Join  
```python
Div(
    Input(type='radio', name='options', aria_label='Radio 1', cls='join-item btn'),
    Input(type='radio', name='options', aria_label='Radio 2', cls='join-item btn'),
    Input(type='radio', name='options', aria_label='Radio 3', cls='join-item btn'),
    cls='join'
)
```

#### Responsive Join  
```python
Div(
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    Button('Button', cls='btn join-item'),
    cls='join join-vertical lg:join-horizontal'
)
```

<a id="mask"></a>

## Mask  
**Category**: Layout
Shape masks for images and containers
### Examples

#### Circle  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-circle'
)
```

#### Pentagon  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-pentagon'
)
```

#### Hexagon  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-hexagon'
)
```

#### Squircle  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-squircle'
)
```

#### Hexagon-2  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-hexagon-2'
)
```

#### Square  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-square'
)
```

#### Decagon  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-decagon'
)
```

#### Triangle  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-triangle'
)
```

#### Heart  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-heart'
)
```

#### Triangle-2  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-triangle-2'
)
```

#### Diamond  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-diamond'
)
```

#### Triangle-3  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-triangle-3'
)
```

#### Star  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-star'
)
```

#### Triangle-4  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-triangle-4'
)
```

#### Star-2  
```python
Img(
    src='https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp',
    cls='mask mask-star-2'
)
```

<a id="stack"></a>

## Stack  
**Category**: Layout
Depth effect through layered elements
### Examples

#### Basic Div Stack  
```python
Div(
    Div('1', cls='bg-primary text-primary-content grid h-20 w-32 place-content-center rounded'),
    Div('2', cls='bg-accent text-accent-content grid h-20 w-32 place-content-center rounded'),
    Div('3', cls='bg-secondary text-secondary-content grid h-20 w-32 place-content-center rounded'),
    cls='stack h-20 w-32'
)
```

#### Stacked Cards-top  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack stack-top size-28'
)
```

#### Stacked Cards-start  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack stack-start size-28'
)
```

#### Stacked Images  
```python
Div(
    Img(src='https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp', cls='rounded'),
    Img(src='https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp', cls='rounded'),
    Img(src='https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp', cls='rounded'),
    cls='stack w-48'
)
```

#### Stacked Cards  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack size-28'
)
```

#### Stacked Cards-end  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='text-center border border-base-content card bg-base-100'
    ),
    cls='stack stack-end size-28'
)
```

#### Stacked Cards Shadow  
```python
Div(
    Div(
        Div('A', cls='card-body'),
        cls='card bg-base-200 w-36 text-center shadow-md'
    ),
    Div(
        Div('B', cls='card-body'),
        cls='card bg-base-200 w-36 text-center shadow'
    ),
    Div(
        Div('C', cls='card-body'),
        cls='card bg-base-200 w-36 text-center shadow-sm'
    ),
    cls='stack'
)
```

#### Stacked Notifications  
```python
Div(
    Div(
        Div(
            H2('Notification 1', cls='card-title'),
            P('You have 3 unread messages. Tap here to see.'),
            cls='card-body'
        ),
        cls='card bg-primary text-primary-content shadow-md'
    ),
    Div(
        Div(
            H2('Notification 2', cls='card-title'),
            P('You have 3 unread messages. Tap here to see.'),
            cls='card-body'
        ),
        cls='card bg-primary text-primary-content shadow'
    ),
    Div(
        Div(
            H2('Notification 3', cls='card-title'),
            P('You have 3 unread messages. Tap here to see.'),
            cls='card-body'
        ),
        cls='card bg-primary text-primary-content shadow-sm'
    ),
    cls='stack'
)
```

<a id="browser-mockup"></a>

## Browser Mockup  
**Category**: Mockup
Browser window styled containers
### Examples

#### With Border  
```python
Div(
    Div(
        Div('https://daisyft.com', cls='input border-base-300 border'),
        cls='mockup-browser-toolbar'
    ),
    Div('Hello!', cls='border-base-300 flex justify-center border-t px-4 py-16'),
    cls='mockup-browser border-base-300 border'
)
```

#### With Background  
```python
Div(
    Div(
        Div('https://daisyft.com', cls='input'),
        cls='mockup-browser-toolbar'
    ),
    Div('Hello!', cls='bg-base-200 flex justify-center px-4 py-16'),
    cls='mockup-browser bg-base-100 border'
)
```

<a id="code-mockup"></a>

## Code Mockup  
**Category**: Mockup
Code and terminal mockups
### Examples

#### With Prefix  
```python
Div(
    Pre(
        Code("npm i daisyui", cls="[&.hljs]:pl-0 inline-flex items-center"),
        data_prefix="$",
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    cls="mockup-code"
)
<div class="mockup-code w-full">
  <pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>
```

#### Without Prefix  
```python
Div(
    Pre(
        # overwrite the hljs class padding rule (pre code.hljs { padding: 1em }) using matching specificity
        Code('without prefix', cls='[&.hljs]:p-0 language-bash inline-flex items-center'),
        cls='flex min-w-0 overflow-x-auto h-full items-center'
    ),
    cls='mockup-code'
)
```

#### Multi Line  
```python
Div(
    # styling is built into our hljs code blocks so we can override it with matching specificity
    Pre(
        Code('npm i daisyui', cls="[&.hljs]:pl-0 language-bash inline-flex items-center"),
        data_prefix='$',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('installing...', cls="[&.hljs]:pl-0 [&.hljs]:text-warning inline-flex items-center"),
        data_prefix='>',                        
        cls="text-warning flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('Done!', cls="[&.hljs]:pl-0 [&.hljs]:text-success inline-flex items-center"),
        data_prefix='>',                        
        cls="text-success flex min-w-0 overflow-x-auto h-full items-center"
    ),
    cls='mockup-code'
)
```

#### Highlighted Line  
```python
Div(
    Pre(
        Code('npm i daisyui', cls="[&.hljs]:pl-0 language-bash inline-flex items-center"),
        data_prefix='1',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('installing...', cls="[&.hljs]:pl-0 inline-flex items-center"),
        data_prefix='2',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    Pre(
        Code('Error!', cls="[&.hljs]:pl-0 [&.hljs]:bg-transparent [&.hljs-title]:text-warning-content inline-flex items-center"),
        data_prefix='3',
        cls='bg-warning text-warning-content flex min-w-0 overflow-x-auto h-full items-center'
    ),
    cls='mockup-code'
)
```

#### Long line  
```python
Div(
    Pre(
        Code('Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.',
                cls="[&.hljs]:pl-0 inline-flex items-center"),
        data_prefix='~',
        cls="flex min-w-0 overflow-x-auto h-full items-center"
    ),
    cls='mockup-code'
)
```

#### With Color  
```python
Div(
    Pre(
        # styling is built into our hljs code blocks so we can override it with matching specificity
        Code('can be any color!', 
                cls='[&.hljs]:bg-transparent [&.hljs]:text-primary-content [&.hljs-comment]:text-secondary [&.hljs]:p-0 language-bash inline-flex items-center'),
        cls='flex min-w-0 overflow-x-auto h-full items-center'  
    ),
    cls='mockup-code bg-primary text-primary-content'
)
```

<a id="phone-mockup"></a>

## Phone Mockup  
**Category**: Mockup
Phone-style container mockups
### Examples

#### Basic Phone  
```python
Div(
    Div(cls='mockup-phone-camera'),
    Div(
        "It's Glowtime.",
        cls='mockup-phone-display text-white grid place-content-center'
    ),
    cls='mockup-phone'
)
```

#### Colored Border  
```python
Div(
    Div(cls='mockup-phone-camera'),
    Div(
        Img(alt="wallpaper", src="https://www.iclarified.com/images/news/94911/453966/453966.jpg"),
        cls='mockup-phone-display'
    ),
    cls='mockup-phone border-primary'
)
```

<a id="window-mockup"></a>

## Window Mockup  
**Category**: Mockup
OS window styled containers
### Examples

#### With Border  
```python
Div(
    Div('Hello!', cls='grid place-content-center border-t border-base-300 h-80'),
    cls='mockup-window border-base-200 border w-full'
)
```

#### With Background  
```python
Div(
    Div('Hello!', cls='grid place-content-center h-80'),
    cls='mockup-window bg-base-300 border border-base-200'
)
```