### Basic Nav Example

Source: https://monsterui.answer.ai/api_ref/docs_navigation/md

Creates a simple navigation list with active state.

```python
def ex_nav1():
    mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
    return NavContainer(*mbrs1)
```

--------------------------------

### Example Theme Switcher

Source: https://monsterui.answer.ai/api_ref/docs_theme_headers/md

Demonstrates how to create a theme switcher component.

```python
def ex_theme_switcher():
    return ThemePicker()
```

--------------------------------

### Link Examples

Source: https://monsterui.answer.ai/api_ref/docs_button_link/md

Demonstrates the creation of various link types using the A component.

```python
def ex_links():
    return Div(cls='space-x-4')(
        A('Default Link'),
        A('Muted Link', cls=AT.muted),
        A('Text Link', cls=AT.text),
        A('Reset Link', cls=AT.reset),
        A('Primary Link', cls=AT.primary),
        A('Classic Link', cls=AT.classic),
    )
```

--------------------------------

### Select Component Examples

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Illustrates the creation of a basic Select dropdown with options and a LabelSelect variant.

```Python
def ex_select(): return Div( Select(map(Option, ["Option 1", "Option 2", "Option 3"])), LabelSelect(map(Option, ["Option 1", "Option 2", "Option 3"]), label="Select", id='myid'))
```

--------------------------------

### Basic Slider Example

Source: https://monsterui.answer.ai/api_ref/docs_sliders/md

A simple example demonstrating how to create a basic slider with images.

```APIDOC
## Basic Slider Example

### Description
Creates a basic slider component populated with images.

### Method
N/A (Python function example)

### Endpoint
N/A

### Parameters
* `src` (string) - URL of the image.
* `random` (integer) - Random seed for image selection.

### Request Example
```python
def ex_sliders_1():
    return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])
```

### Response
N/A (Python function returns a Slider component)
```

--------------------------------

### Button Examples

Source: https://monsterui.answer.ai/api_ref/docs_button_link/md

Demonstrates the creation of various button types using the Button component.

```python
def ex_buttons():
    return Grid(
        Button("Default"),
        Button("Primary", cls=ButtonT.primary),
        Button("Secondary", cls=ButtonT.secondary),
        Button("Danger", cls=ButtonT.destructive),
        Button("Text", cls=ButtonT.text),
        Button("Link", cls=ButtonT.link),
        Button("Ghost", cls=ButtonT.ghost),
    )
```

--------------------------------

### Switch Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Shows how to implement a basic Switch component and a LabelSwitch with an associated label.

```Python
def ex_switch(): return Div( Switch(id="switch"), LabelSwitch(label="Switch", id='switch'))
```

--------------------------------

### Example Article Structure

Source: https://monsterui.answer.ai/api_ref/docs_containers/md

Demonstrates how to use Article, ArticleTitle, Subtitle, and P components to create a sample article.

```python
def ex_articles():
    return Article(
        ArticleTitle("Sample Article Title"),
        Subtitle("By: John Doe"),
        P('lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'))

```

--------------------------------

### Insertable Select Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Provides an example of an insertable Select component, allowing users to add new options. This example shows two variations with different styling and option grouping.

```Python
def ex_insertable_select1(): fruit_opts = ['apple', 'orange', 'banana', 'mango'] return Grid( Select(Option('Apple', value='apple'), Option('Orange', value='orange'), Option('Banana', value='banana'), Option('Mango', value='mango'), id="fruit", icon=True, insertable=True, placeholder="Choose a fruit..."), Select(Optgroup(label="Fruit")( *map(lambda l: Option(l.capitalize(), value=l), sorted(fruit_opts))), id="fruit", icon=True, insertable=True, placeholder="Choose a fruit...", cls_custom="button: uk-input-fake justify-between w-full; dropdown: w-full"))
```

--------------------------------

### Basic Loading Indicator

Source: https://monsterui.answer.ai/api_ref/docs_loading/md

A simple example of creating a default loading indicator.

```python
def ex_loading1():
    return Loading()
```

--------------------------------

### Dropdown Navigation Example

Source: https://monsterui.answer.ai/api_ref/docs_navigation/md

Demonstrates a dropdown navigation menu triggered by a button. Contains a list of items within the dropdown.

```python
def ex_navdrop():
    return Div(
        Button("Open DropDown"),
        DropDownNavContainer(
            Li(A("Item 1",href='')),Li(A("Item 2",href=''))
        )
    )
```

--------------------------------

### Range Input Examples

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Demonstrates various configurations of the Range component, including default, labeled, multi-value, and custom step ranges.

```Python
return Div( Range(), Range(label='kg', value="25,75", min=20, max=75), LabelRange('Basic Range', value='50', min=0, max=100, step=1), LabelRange('Range with Label', value='75', min=0, max=100, step=5, label_range=True), LabelRange('Multiple Values', value='25,75', min=0, max=100, step=5, label_range=True), LabelRange('Custom Range', value='500', min=0, max=1000, step=100, label_range=True) )
```

--------------------------------

### DividerLine Example

Source: https://monsterui.answer.ai/api_ref/docs_dividers/md

Basic usage of the DividerLine component.

```python
def ex_dividerline():
    return DividerLine()
```

--------------------------------

### Headings Example

Source: https://monsterui.answer.ai/api_ref/docs_typography/md

Demonstrates the creation of different heading levels (H1 to H6) using the Titled and heading components.

```python
def ex_headings():
    return Div(
        Titled("Titled"),
        H1("Level 1 Heading (H1)"),
        H2("Level 2 Heading (H2)"),
        H3("Level 3 Heading (H3)"),
        H4("Level 4 Heading (H4)"),
        H5("Level 5 Heading (H5)"),
        H6("Level 6 Heading (H6)"),
    )
```

--------------------------------

### Slider with Cards and Autoplay Example

Source: https://monsterui.answer.ai/api_ref/docs_sliders/md

Shows how to configure a slider with cards to autoplay at a specified interval.

```APIDOC
## Slider with Cards and Autoplay Example

### Description
Creates a slider with cards that automatically advances slides at a set interval.

### Method
N/A (Python function example)

### Endpoint
N/A

### Parameters
* `i` (integer) - Index for card identification.
* `H3` (Component) - Header component for the card.
* `P` (Component) - Paragraph component for the card content.
* `items_cls` (string) - CSS classes for the items container.
* `uk_slider` (string) - Slider configuration options, including autoplay.
    * `autoplay`: boolean - Enables autoplay.
    * `autoplay-interval`: integer - Interval in milliseconds for autoplay.

### Request Example
```python
def ex_sliders_3():
    def _card(i):
        return Card(H3(f'Card {i}'), P(f'Card {i} content'))
    return Slider(*[_card(i) for i in range(10)], items_cls='gap-10', uk_slider='autoplay: true; autoplay-interval: 1000')
```

### Response
N/A (Python function returns a Slider component)
```

--------------------------------

### Example Container with Custom Styling

Source: https://monsterui.answer.ai/api_ref/docs_containers/md

Shows how to use the Container component with specific size classes (ContainerT.xs) and inline styles for background and text color.

```python
def ex_containers():
    return Container(
        "This is a sample container with custom styling.",
        cls=ContainerT.xs,
        style="background-color: #FFA500; color: #000000")

```

--------------------------------

### Progress Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Demonstrates how to create a progress bar with a specified value and maximum. The 'value' and 'max' parameters control the progress display.

```python
def ex_progress():
    return Progress(value=20, max=100)
```

--------------------------------

### Range Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Provides an example of the Range component, which renders an HTML range input slider. It supports min, max, step, and value attributes.

```python
def ex_range():
    return Range(value=50, min=0, max=100, step=1)
```

--------------------------------

### Account Creation Steps

Source: https://monsterui.answer.ai/api_ref/docs_steps/md

Defines a sequence of steps for account creation, including 'Account Created', 'Profile Setup', and 'Verification'. Uses primary and neutral step types.

```python
def ex_steps2():
    return Steps(
        LiStep("Account Created", cls=StepT.primary),
        LiStep("Profile Setup", cls=StepT.neutral),
        LiStep("Verification", cls=StepT.neutral),
        cls="w-full"
    )
```

--------------------------------

### Lightbox with multiple images

Source: https://monsterui.answer.ai/api_ref/docs_lightbox/md

This example shows how to create a lightbox that can cycle through multiple images. Each image can have its own alt text and caption.

```APIDOC
## Lightbox with multiple images

### Description
Creates a lightbox that allows navigation between multiple images, each with its own alt text and caption.

### Method
N/A (Python function call)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```python
LightboxContainer(
    LightboxItem(
        Button("Open"),
        href='https://picsum.photos/id/100/1280/720.webp',
        data_alt='A placeholder image to demonstrate the lightbox',
        data_caption='Image 1'
    ),
    LightboxItem(
        href='https://picsum.photos/id/101/1280/720.webp',
        data_alt='A placeholder image to demonstrate the lightbox',
        data_caption='Image 2'
    ),
    LightboxItem(
        href='https://picsum.photos/id/102/1280/720.webp',
        data_alt='A placeholder image to demonstrate the lightbox',
        data_caption='Image 3'
    )
)
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Upload Button and Zone Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Demonstrates the creation of an upload button and an upload zone. Use these components for file upload functionalities within your application.

```python
def ex_upload():
    return Div(Upload("Upload Button!", id='upload1'), UploadZone(DivCentered(Span("Upload Zone"), UkIcon("upload")), id='upload2'), cls='space-y-4')
```

--------------------------------

### TextArea Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Demonstrates the usage of the TextArea component for multi-line text input, including a version with a label.

```Python
def ex_textarea(): return Div( TextArea(placeholder="Enter multiple lines of text"), LabelTextArea(label="TextArea", id='myid'))
```

--------------------------------

### Python Code Example

Source: https://monsterui.answer.ai/scrollspy/md

A simple Python function to greet a name. This is used as an example within the scrollspy navigation.

```python
def greet(name):
    return f"Hello, {name}!"
print(greet("World"))
```

--------------------------------

### Simple Alert Example

Source: https://monsterui.answer.ai/api_ref/docs_notifications/md

Creates a basic alert with plain text content. This is the simplest form of an alert.

```python
def ex_alerts1():
    return Alert("This is a plain alert")
```

--------------------------------

### TextPresets Example

Source: https://monsterui.answer.ai/api_ref/docs_typography/md

Renders a grid of text elements using predefined TextPresets. Each preset applies specific styling like muted or bold with different sizes.

```python
def ex_textpresets():
    return Grid(*[Div(P(f"This is {preset.name} text", cls=preset.value)) for preset in TextPresets])
```

--------------------------------

### Slider with Cards Example

Source: https://monsterui.answer.ai/api_ref/docs_sliders/md

Demonstrates creating a slider populated with card components, each containing a header and content.

```APIDOC
## Slider with Cards Example

### Description
Creates a slider component where each slide contains a card with a header and text content.

### Method
N/A (Python function example)

### Endpoint
N/A

### Parameters
* `i` (integer) - Index for card identification.
* `H3` (Component) - Header component for the card.
* `P` (Component) - Paragraph component for the card content.

### Request Example
```python
def ex_sliders_2():
    def _card(i):
        return Card(H3(f'Card {i}'), P(f'Card {i} content'))
    return Slider(*[_card(i) for i in range(10)])
```

### Response
N/A (Python function returns a Slider component)
```

--------------------------------

### Styled Alert Example

Source: https://monsterui.answer.ai/api_ref/docs_notifications/md

Creates an alert with a predefined color style, such as success. Use AlertT options for styling.

```python
def ex_alerts2():
    return Alert("Your purchase has been confirmed!", cls=AlertT.success)
```

--------------------------------

### Basic Markdown Rendering

Source: https://monsterui.answer.ai/api_ref/docs_markdown/md

Renders a Markdown string with default styling. This is a foundational example for processing Markdown.

```python
def add(a, b):
  return a + b
```

--------------------------------

### Line Chart Example

Source: https://monsterui.answer.ai/api_ref/docs_charts/md

Renders a line chart using the ApexChart component. The 'opts' parameter takes a Python dictionary mirroring ApexCharts' options.

```python
def ex_line_chart():
    return ApexChart(
        opts={
            "chart": {"type": "line", "zoom": {"enabled": False}, "toolbar": {"show": False}},
            "series": [{"name": "Desktops", "data": [186, 305, 237, 73, 209, 214, 355]}]
            "xaxis": {"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
        },
        cls='max-w-md max-h-md'
    )
```

--------------------------------

### Basic Slider Example

Source: https://monsterui.answer.ai/api_ref/docs_sliders/md

Creates a simple slider displaying a series of images. Each image is generated using a URL with a random query parameter.

```python
def ex_sliders_1():
    return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])
```

--------------------------------

### Lightbox with various media types

Source: https://monsterui.answer.ai/api_ref/docs_lightbox/md

This example demonstrates creating a lightbox that can open different types of media, including MP4 videos, YouTube videos, Vimeo videos, and iframes.

```APIDOC
## Lightbox with various media types

### Description
Creates a lightbox capable of displaying various media formats including MP4 videos, YouTube, Vimeo, and iframes.

### Method
N/A (Python function call)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```python
LightboxContainer(
    LightboxItem(
        Button("mp4"),
        href='https://yootheme.com/site/images/media/yootheme-pro.mp4'
    ),
    LightboxItem(
        Button("Youtube"),
        href='https://www.youtube.com/watch?v=c2pz2mlSfXA'
    ),
    LightboxItem(
        Button("Vimeo"),
        href='https://vimeo.com/1084537'
    ),
    LightboxItem(
        Button("Iframe"),
        data_type='iframe',
        href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938'
    )
)
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Product Grid Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Creates a responsive grid layout for product cards, displaying three columns on large screens. Each card includes an image, name, price, and an 'Add to Cart' button.

```python
def ex_product_grid():
    products = [
        {"name": "Laptop", "price": "$999", "img": "https://picsum.photos/200/100?random=1"},
        {"name": "Smartphone", "price": "$599", "img": "https://picsum.photos/200/100?random=2"},
        {"name": "Headphones", "price": "$199", "img": "https://picsum.photos/200/100?random=3"},
        {"name": "Smartwatch", "price": "$299", "img": "https://picsum.photos/200/100?random=4"},
        {"name": "Tablet", "price": "$449", "img": "https://picsum.photos/200/100?random=5"},
        {"name": "Camera", "price": "$799", "img": "https://picsum.photos/200/100?random=6"},
    ]
    product_cards = [
        Card(
            Img(src=p["img"], alt=p["name"], style="width:100%; height:100px; object-fit:cover;"),
            H4(p["name"], cls="mt-2"),
            P(p["price"], cls=TextPresets.bold_sm),
            Button("Add to Cart", cls=(ButtonT.primary, "mt-2"))
        )
        for p in products
    ]
    return Grid(*product_cards, cols_lg=3)
```

--------------------------------

### Lightbox with a single image

Source: https://monsterui.answer.ai/api_ref/docs_lightbox/md

This example demonstrates how to create a simple lightbox that displays a single image when a button is clicked. It includes alt text and a caption for the image.

```APIDOC
## Lightbox with a single image

### Description
Creates a lightbox displaying a single image with alt text and a caption.

### Method
N/A (Python function call)

### Endpoint
N/A

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```python
LightboxContainer(
    LightboxItem(
        Button("Open"),
        href='https://picsum.photos/id/100/1280/720.webp',
        data_alt='A placeholder image to demonstrate the lightbox',
        data_caption='This is my super cool caption'
    )
)
```

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Index Route and App Serving

Source: https://monsterui.answer.ai/tasks/md

Defines the main index route to render the page components and starts the application server.

```python
@rt
def index():
    return Container(page_heading, tasks_ui, CreateTaskModal())

serve()
```

--------------------------------

### Styled Toast Example

Source: https://monsterui.answer.ai/api_ref/docs_notifications/md

Creates a toast notification with a specific alert color style. Use alert_cls with AlertT options for styling.

```python
def ex_toasts2():
    return Toast("Second Example Toast", alert_cls=AlertT.info, dur=300)
```

--------------------------------

### TextT Example

Source: https://monsterui.answer.ai/api_ref/docs_typography/md

Renders a grid of text elements using flexible TextT styles. This allows for a wide range of text formatting options.

```python
def ex_textt():
    return Grid(*[Div(P(f"This is {s.name} text", cls=s.value)) for s in TextT])
```

--------------------------------

### Pie Chart Example

Source: https://monsterui.answer.ai/api_ref/docs_charts/md

Renders a pie chart using the ApexChart component. The 'opts' parameter is a dictionary defining the chart's series and labels.

```python
def ex_pie_chart():
    return ApexChart(
        opts={
            "chart": {"type": "pie", "zoom": {"enabled": False}, "toolbar": {"show": False}},
            "series": [186, 305, 237, 73, 209, 214, 355],
            "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
        },
        cls='max-w-md max-h-md'
    )
```

--------------------------------

### Vertically Stacked Div Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Creates a div that stacks its components vertically. Ideal for content that needs to be presented in a sequential, top-to-bottom order.

```python
def ex_v_stacked_div(): return DivVStacked( H2("Vertical Stack"), P("First paragraph in the stack"), P("Second paragraph in the stack"), Button("Action Button", cls=ButtonT.secondary) )
```

--------------------------------

### Horizontally Stacked Div Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Creates a div that stacks its components horizontally. Suitable for creating columns or side-by-side content arrangements.

```python
def ex_h_stacked_div(): return DivHStacked( Div(H4("Column 1"), P("Content for column 1")), Div(H4("Column 2"), P("Content for column 2")), Div(H4("Column 3"), P("Content for column 3")) )
```

--------------------------------

### Radio Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Shows a basic Radio input component, often used within a group. It can be paired with LabelRadio for a labeled experience.

```python
def ex_radio():
    return Div(
        Radio(name="radio-group", id="radio1"),
        LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4')
    )
```

--------------------------------

### Music Example Page Structure

Source: https://monsterui.answer.ai/music/md

Renders the main music application page, including the title, sidebar, and main content area with tabs. It utilizes MonsterUI's `Title`, `Container`, `DividerSplit`, `Grid`, `Div`, `tabs`, and `Button` components.

```python
@rt
def index():
    return Title("Music Example"),Container(music_headers, DividerSplit(), Grid(sidebar, Div(cls="col-span-4 border-l border-border")( Div(cls="px-8 py-6")( DivFullySpaced( Div(cls="max-w-80")(tabs), Button(cls=ButtonT.primary)(DivLAligned(UkIcon('circle-plus')),Div("Add music"))), Ul(id="component-nav", cls="uk-switcher")( Li(\*music_content), Li(podcast_tab())))), cols_sm=1, cols_md=1, cols_lg=5, cols_xl=5))

serve()
```

--------------------------------

### Initialize FastApp and Theme

Source: https://monsterui.answer.ai/tasks/md

Sets up the FastApp instance with a blue theme header.

```python
app, rt = fast_app(hdrs=Theme.blue.headers())
```

--------------------------------

### DividerSplit Example

Source: https://monsterui.answer.ai/api_ref/docs_dividers/md

Example of using DividerSplit with muted text.

```python
def ex_dividersplit():
    return DividerSplit(P("Or continue with", cls=TextPresets.muted_sm))
```

--------------------------------

### Create FastApp with Theme Options

Source: https://monsterui.answer.ai/api_ref/docs_theme_headers/md

Use `fast_app` to create a FastAPI application instance. Customize themes by passing attributes like `bg-background` and `text-foreground` to `bodykw` for `frankenui` themes.

```python
fast_app(*args, pico=False, db_file: Optional[str] = None, render: Optional[] = None, hdrs: Optional[tuple] = None, ftrs: Optional[tuple] = None, tbls: Optional[dict] = None, before: Union[tuple, NoneType, fasthtml.core.Beforeware] = None, middleware: Optional[tuple] = None, live: bool = False, debug: bool = False, title: str = 'FastHTML page', routes: Optional[tuple] = None, exception_handlers: Optional[dict] = None, on_startup: Optional[] = None, on_shutdown: Optional[] = None, lifespan: Optional[] = None, default_hdrs=True, surreal: Optional[bool] = True, htmx: Optional[bool] = True, exts: Union[list, str, NoneType] = None, canonical: bool = True, secret_key: Optional[str] = None, key_fname: str = '.sesskey', session_cookie: str = 'session_', max_age: int = 31536000, sess_path: str = '/', same_site: str = 'lax', sess_https_only: bool = False, sess_domain: Optional[str] = None, htmlkw: Optional[dict] = None, bodykw: Optional[dict] = None, reload_attempts: Optional[int] = 1, reload_interval: Optional[int] = 1000, static_path: str = '.', body_wrap= , nb_hdrs: bool = False)
```

--------------------------------

### Styled Sample Output

Source: https://monsterui.answer.ai/api_ref/docs_typography/md

Use Samp for styled sample output. It accepts content and additional classes.

```python
Samp(*c: fastcore.xml.FT | str, cls: enum.Enum | str | tuple = (), **kwargs) -> fastcore.xml.FT
```

--------------------------------

### Various Loading Indicator Types and Sizes

Source: https://monsterui.answer.ai/api_ref/docs_loading/md

Demonstrates how to create loading indicators with different types and sizes using LoadingT options.

```python
def ex_loading2():
    types = [LoadingT.spinner, LoadingT.dots, LoadingT.ring, LoadingT.ball, LoadingT.bars, LoadingT.infinity]
    sizes = [LoadingT.xs, LoadingT.sm, LoadingT.md, LoadingT.lg]
    rows = [Div(*[Loading((t,s)) for s in sizes], cls='flex gap-4') for t in types]
    return Div(*rows, cls='flex flex-col gap-4')
```

--------------------------------

### CheckboxX Component Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Illustrates the CheckboxX component, a styled checkbox input. It's typically used with LabelCheckboxX for accessibility and usability.

```python
def ex_checkbox():
    return Div(
        CheckboxX(),
        LabelCheckboxX(label="Checkbox", id='checkbox1')
    )
```

--------------------------------

### Fully Spaced Div Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Illustrates the use of DivFullySpaced to create a horizontal layout where buttons are spaced as far apart as possible.

```python
def ex_fully_spaced_div():
    return DivFullySpaced(
        Button("Left", cls=ButtonT.primary),
        Button("Center", cls=ButtonT.secondary),
        Button("Right", cls=ButtonT.destructive)
    )
```

--------------------------------

### Create FastHTML App with Theme Options

Source: https://monsterui.answer.ai/api_ref/docs_theme_headers/md

Instantiate `FastHTML` to create a web application. It allows for theme customization by setting `bodykw` attributes, such as `bg-background` and `text-foreground`, for `frankenui` themes.

```python
FastHTML(*args, pico=False, debug=False, routes=None, middleware=None, title: str = 'FastHTML page', exception_handlers=None, on_startup=None, on_shutdown=None, lifespan=None, hdrs=None, ftrs=None, exts=None, before=None, after=None, surreal=True, htmx=True, default_hdrs=True, sess_cls=, secret_key=None, session_cookie='session_', max_age=31536000, sess_path='/', same_site='lax', sess_https_only=False, sess_domain=None, key_fname='.sesskey', body_wrap=, htmlkw=None, nb_hdrs=False, canonical=True)
```

--------------------------------

### Lightbox with Various Media Types

Source: https://monsterui.answer.ai/api_ref/docs_lightbox/md

Demonstrates creating a lightbox that can display different media types including mp4 videos, YouTube, Vimeo, and iframes. Use this for mixed media content.

```python
def ex_lightbox3():
    return LightboxContainer(
        LightboxItem(Button("mp4"), href='https://yootheme.com/site/images/media/yootheme-pro.mp4'),
        LightboxItem(Button("Youtube"), href='https://www.youtube.com/watch?v=c2pz2mlSfXA'),
        LightboxItem(Button("Vimeo"), href='https://vimeo.com/1084537'),
        LightboxItem(Button("Iframe"), data_type='iframe', href='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4740.819266853735!2d9.99008871708242!3d53.550454675412404!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3f9d24afe84a0263!2sRathaus!5e0!3m2!1sde!2sde!4v1499675200938')
    )
```

--------------------------------

### Basic Grid Layout

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Demonstrates how to create a basic grid structure with three columns using the Grid component and Divs with Paragraphs.

```python
def ex_grid():
    return Grid(
        Div(
            P("Column 1 Item 1"),
            P("Column 1 Item 2"),
            P("Column 1 Item 3")
        ),
        Div(
            P("Column 2 Item 1"),
            P("Column 2 Item 2"),
            P("Column 2 Item 3")
        ),
        Div(
            P("Column 3 Item 1"),
            P("Column 3 Item 2"),
            P("Column 3 Item 3")
        )
    )
```

--------------------------------

### Basic Card with Header, Input, Range, and Footer

Source: https://monsterui.answer.ai/api_ref/docs_cards/md

Demonstrates creating a card with a header, input form, range slider, and a footer submit button.

```python
def ex_card():
    return Card(
        Form(
            LabelInput("Input"),
            LabelRange("Range")
        ),
        header=Div(
            CardTitle("Header"),
            P("A card with header and footer", cls=TextPresets.muted_sm)
        ),
        footer=DivLAligned(
            Button("Footer Submit Button")
        )
    )
```

--------------------------------

### Project Planning Steps

Source: https://monsterui.answer.ai/api_ref/docs_steps/md

Illustrates a project lifecycle with steps like 'Project Planning', 'Design Phase', 'Development', 'Testing', and 'Deployment'. Features success and neutral step types with custom emoji data content and vertical orientation.

```python
def ex_steps3():
    return Steps(
        LiStep("Project Planning", cls=StepT.success, data_content="📝"),
        LiStep("Design Phase", cls=StepT.success, data_content="💡"),
        LiStep("Development", cls=StepT.primary, data_content="🛠️"),
        LiStep("Testing", cls=StepT.neutral, data_content="🔎"),
        LiStep("Deployment", cls=StepT.neutral, data_content="🚀"),
        cls=(StepsT.vertical, "min-h-[400px]")
    )
```

--------------------------------

### Centered Div Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Demonstrates how to use DivCentered to center content, including a title and descriptive text, both horizontally and vertically within the container.

```python
def ex_centered_div():
    return DivCentered(
        H3("Centered Title"),
        P("This content is centered both horizontally and vertically.")
    )
```

--------------------------------

### Tab Container for Music and Podcasts

Source: https://monsterui.answer.ai/music/md

Implements a tabbed interface for switching between 'Music' and 'Podcasts' sections. Includes disabled tabs and an alternative style.

```python
tabs = TabContainer(
    Li(A('Music', href='#'), cls='uk-active'),
    Li(A('Podcasts', href='#')),
    Li(A('Live', cls='opacity-50'), cls='uk-disabled'),
    uk_switcher='connect: #component-nav; animation: uk-animation-fade',
    alt=True
)

```

--------------------------------

### Create a Simple Test Modal

Source: https://monsterui.answer.ai/api_ref/docs_modals/md

Demonstrates how to create a basic modal with a title, content, and a close button. This is useful for displaying simple messages or forms.

```python
def ex_modal():
    return Div(
        Button("Open Modal",data_uk_toggle="target: #my-modal" ),
        Modal(
            ModalTitle("Simple Test Modal"),
            P("With some somewhat brief content to show that it works!", cls=TextPresets.muted_sm),
            footer=ModalCloseButton("Close", cls=ButtonT.primary),
            id='my-modal'
        )
    )
```

--------------------------------

### Steps Component

Source: https://monsterui.answer.ai/api_ref/docs_steps/md

Creates a container for a series of steps. Accepts a list of LiStep items and optional classes for styling.

```APIDOC
## Steps

### Description
Creates a steps container.

### Parameters
* `li` - Each `Li` represents a step (generally use `LiStep`).
* `cls` - Class for Steps (generally a `StepsT` option).
* `kwargs` - Additional keyword arguments.

### Returns
Ul(..., cls='steps')
```

--------------------------------

### Right Aligned Div Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Creates a div with components aligned to the right. Useful for placing action buttons or secondary content to the right of primary elements.

```python
def ex_r_aligned_div(): return DivRAligned( Button("Action", cls=ButtonT.primary), P("Right-aligned text"), Img(src="https://picsum.photos/100/100?random=3", style="max-width: 100px;") )
```

--------------------------------

### Left Aligned Div Example

Source: https://monsterui.answer.ai/api_ref/docs_layout/md

Creates a div with an image, title, and text aligned to the left. Use this for standard content blocks where left alignment is desired.

```python
def ex_l_aligned_div(): return DivLAligned( Img(src="https://picsum.photos/100/100?random=1", style="max-width: 100px;"), H4("Left Aligned Title"), P("Some text that's left-aligned with the title and image.") )
```

--------------------------------

### Responsive Navbar with Brand and Links

Source: https://monsterui.answer.ai/api_ref/docs_navigation/md

Creates a responsive navbar that collapses to a hamburger menu on mobile devices. Includes a brand title and navigation links.

```python
def ex_navbar1():
    return NavBar(A("Page1",href='/rt1'), A("Page2",href='/rt2'), A("Page3",href='/rt3'), brand=H3('My Blog'))
```

--------------------------------

### Minimal Image Cards Grid

Source: https://monsterui.answer.ai/tutorial_layout/md

A basic grid layout displaying evenly sized cards with images and text. This serves as a foundational example for understanding grid structures.

```python
def picsum_img(seed):
  return Img(src=f'https://picsum.photos/300/200?random={seed}')

Grid(*[Card(picsum_img(i),P(f"Image {i}")) for i in range(6)])
```

--------------------------------

### LiStep Component

Source: https://monsterui.answer.ai/api_ref/docs_steps/md

Creates an individual step list item. Can include text description, custom classes, and content for the step bubble.

```APIDOC
## LiStep

### Description
Creates a step list item.

### Parameters
* `c` - Description for Step that goes next to bubble (often text).
* `cls` - Additional step classes (generally a `StepT` component).
* `data_content` - Content for inside bubble (defaults to number, often an emoji).
* `kwargs` - Additional keyword arguments.

### Returns
Li(..., cls='step')
```

--------------------------------

### Emergency Contact Form Example

Source: https://monsterui.answer.ai/api_ref/docs_forms/md

Constructs a detailed emergency contact form with fields for personal information, relationship to patient, and address. Use this for collecting comprehensive user contact details.

```python
def ex_form():
    relationship = ["Parent",'Sibling', "Friend", "Spouse", "Significant Other", "Relative", "Child", "Other"]
    return Div(cls='space-y-4')(
        DivCentered(
            H3("Emergency Contact Form"),
            P("Please fill out the form completely", cls=TextPresets.muted_sm)
        ),
        Form(cls='space-y-4')(
            Grid(LabelInput("First Name",id='fn'), LabelInput("Last Name",id='ln')),
            Grid(LabelInput("Email", id='em'), LabelInput("Phone", id='ph')),
            H3("Relationship to patient"),
            Grid(*[LabelCheckboxX(o) for o in relationship], cols=4, cls='space-y-3'),
            LabelInput("Address", id='ad'),
            LabelInput("Address Line 2", id='ad2'),
            Grid(LabelInput("City", id='ct'), LabelInput("State", id='st')),
            LabelInput("Zip", id='zp'),
            DivCentered(
                Button("Submit Form", cls=ButtonT.primary)
            )
        )
    )
```

--------------------------------

### Create Picsum Placeholder Images

Source: https://monsterui.answer.ai/api_ref/docs_icons_images/md

Generates a grid of placeholder images using Picsum. Supports options for blur and grayscale. Ensure the Grid and PicSumImg components are available.

```python
def ex_picsum():
    return Grid(PicSumImg(100,100), PicSumImg(100,100, blur=6),PicSumImg(100,100, grayscale=True))
```

--------------------------------

### Create hotkey list items

Source: https://monsterui.answer.ai/tasks/md

Generates navigation list items for hotkeys, including a shortcut display.

```python
def create_hotkey_li(hotkey):
    return NavCloseLi(A(DivFullySpaced(hotkey[0], Span(hotkey[1], cls=TextPresets.muted_sm))))
hotkeys_a = (('Profile','⇧⌘P'),('Billing','⌘B'),('Settings','⌘S'),('New Team',''))
hotkeys_b = (('Logout',''), )
avatar_opts = DropDownNavContainer(
    NavHeaderLi(P('sveltecult'),NavSubtitle('leader@sveltecult.com')),
    NavDividerLi(),
    *map(create_hotkey_li, hotkeys_a),
    NavDividerLi(),
    *map(create_hotkey_li, hotkeys_b),
)
```

--------------------------------

### Markdown Rendering with Custom Styles

Source: https://monsterui.answer.ai/api_ref/docs_markdown/md

Renders a Markdown string and allows for custom styling of elements like bold text and blockquotes using a class map. This example demonstrates overriding default styles.

```python
def ex_markdown():
  md = '''# Example Markdown
* With **bold** and *italics*
* With a [link](https://github.com)
### And a subheading
> This is a blockquote
This supports inline latex: $e^{\\pi i} + 1 = 0$
as well as block latex thanks to Katex.
$$ \\frac{1}{2\\pi i} \\oint_C \\frac{f(z)}{z-z_0} dz $$
And even syntax highlighting thanks to Highlight.js! (Just make sure you set `highlightjs=True` in the headers function)
```python
def add(a, b):
  return a + b
```
'''
  return render_md(md)
```

--------------------------------

### Tab Container with Switcher and Content

Source: https://monsterui.answer.ai/api_ref/docs_navigation/md

Configures a tab container that works with a switcher for client-side content changes. Includes active, disabled, and regular tabs, and associated content panes.

```python
def ex_tabs1():
    return Container(
        TabContainer(
            Li(A("Active",href='#', cls='uk-active')),
            Li(A("Item",href='#')),
            Li(A("Item",href='#')),
            Li(A("Disabled",href='#', cls='uk-disabled'))
        , uk_switcher='connect: #component-nav; animation: uk-animation-fade',
        alt=True),
        Ul(id="component-nav", cls="uk-switcher")(
            Li(H1("Tab 1")),
            Li(H1("Tab 2")),
            Li(H1("Tab 3"))
        )
    )
```

--------------------------------

### Divider Component

Source: https://monsterui.answer.ai/api_ref/docs_dividers/md

Demonstrates the basic Divider component with default styling and margin.

```python
Divider(*c, cls=('my-4', ), **kwargs)
```

--------------------------------

### Pricing Card Component

Source: https://monsterui.answer.ai/tutorial_layout/md

Construct a pricing card by stacking plan details vertically and using DivHStacked to align checkmarks with feature list items.

```python
features = [
    "Unlimited users",
    "24/7 priority support",
    "Custom branding options",
    "Advanced analytics dashboard",
    "Full API access",
    "Priority request queue"
]

def PricingCard(plan, price, features):
    "Create a polished pricing card with consistent styling"
    return Card(
        DivVStacked(
            # Center and veritcally stack the plan name and price
            H2(plan),
            H3(price, cls='text-primary'),
            P('per month',cls=TextT.muted),
            cls='space-y-1'
        ),
        # DivHStacked makes green check and feature Li show up on same row instead of newline
        Ul(
            *(DivHStacked(UkIcon('check', cls='text-green-500 mr-2'), Li(feature)) for feature in features)
        , cls='space-y-4'),
        Button("Subscribe Now", cls=(ButtonT.primary, 'w-full'))
    )

DivVStacked(PricingCard("Pro Plan", "$99", features))
```

--------------------------------

### Music Content Layout

Source: https://monsterui.answer.ai/music/md

Organizes music content including 'Listen Now' and 'Made for You' album sections using grids and dividers.

```python
listen_now_albums = (
    ("Roar", "Catty Perry"),
    ("Feline on a Prayer", "Cat Jovi"),
    ("Fur Elise", "Ludwig van Beethovpurr"),
    ("Purrple Rain", "Prince's Cat")
)

made_for_you_albums = [
    ("Like a Feline", "Catdonna"),
    ("Livin' La Vida Purrda", "Ricky Catin"),
    ("Meow Meow Rocket", "Elton Cat"),
    ("Rolling in the Purr", "Catdelle"),
    ("Purrs of Silence", "Cat Garfunkel"),
    ("Meow Me Maybe", "Carly Rae Purrsen"),
]

music_content = (
    Div(H3("Listen Now"), cls="mt-6 space-y-1"),
    Subtitle("Top picks for you. Updated daily."),
    DividerLine(),
    Grid(*[Album(t,a) for t,a in listen_now_albums], cls='gap-8'),
    Div(H3("Made for You"), cls="mt-6 space-y-1"),
    Subtitle("Your personal playlists. Updated daily."),
    DividerLine(),
    Grid(*[Album(t,a) for t,a in made_for_you_albums], cols_xl=6)
)

```

--------------------------------

### Multiple Lightbox Items

Source: https://monsterui.answer.ai/api_ref/docs_lightbox/md

Creates a lightbox with multiple image items, allowing users to navigate between them. Ideal for image galleries.

```python
def ex_lightbox2():
    return LightboxContainer(
        LightboxItem(
            Button("Open"),
            href='https://picsum.photos/id/100/1280/720.webp',
            data_alt='A placeholder image to demonstrate the lightbox',
            data_caption='Image 1',
        ),
        LightboxItem(
            href='https://picsum.photos/id/101/1280/720.webp',
            data_alt='A placeholder image to demonstrate the lightbox',
            data_caption='Image 2',
        ),
        LightboxItem(
            href='https://picsum.photos/id/102/1280/720.webp',
            data_alt='A placeholder image to demonstrate the lightbox',
            data_caption='Image 3',
        ),
    )
```

--------------------------------

### FastHTML Class

Source: https://monsterui.answer.ai/api_ref/docs_theme_headers/md

Initializes a FastHTML application instance. It supports various configurations for routing, middleware, sessions, and header inclusions, including theme-related attributes.

```APIDOC
## FastHTML

### Description
Creates a FastHTML app instance. This class is used to build web applications and allows for customization of headers, sessions, and other core functionalities. It also supports applying theme attributes like `bg-background text-foreground` to the body tag.

### Class Signature
`FastHTML(*args, pico=False, debug=False, routes=None, middleware=None, title: str = 'FastHTML page', exception_handlers=None, on_startup=None, on_shutdown=None, lifespan=None, hdrs=None, ftrs=None, exts=None, before=None, after=None, surreal=True, htmx=True, default_hdrs=True, sess_cls=, secret_key=None, session_cookie='session_', max_age=31536000, sess_path='/', same_site='lax', sess_https_only=False, sess_domain=None, key_fname='.sesskey', body_wrap=, htmlkw=None, nb_hdrs=False, canonical=True)`

### Parameters
* `debug` (bool): Enable debug mode.
* `routes` (Optional[tuple]): List of routes for the application.
* `middleware` (Optional[tuple]): Starlette middleware to apply.
* `title` (str): Default page title.
* `exception_handlers` (Optional[dict]): Custom exception handlers.
* `on_startup` (Optional[]): Callables to run on startup.
* `on_shutdown` (Optional[]): Callables to run on shutdown.
* `lifespan` (Optional[]): Lifespan context manager callables.
* `hdrs` (Optional[tuple]): Additional header elements.
* `ftrs` (Optional[tuple]): Additional footer elements.
* `exts` (Optional[list | str]): HTMX extensions to include.
* `before` (Optional[tuple]): Callables to run before request handling.
* `after` (Optional[tuple]): Callables to run after request handling.
* `surreal` (bool): Include Surreal.js headers. Defaults to True.
* `htmx` (bool): Include HTMX headers. Defaults to True.
* `default_hdrs` (bool): Include default FastHTML headers. Defaults to True.
* `sess_cls` (Any): Session class to use.
* `secret_key` (Optional[str]): Secret key for session signing.
* `session_cookie` (str): Name of the session cookie. Defaults to 'session_'.
* `max_age` (int): Session cookie maximum age in seconds. Defaults to 31536000.
* `sess_path` (str): Path for the session cookie. Defaults to '/'.
* `same_site` (str): SameSite policy for the session cookie. Defaults to 'lax'.
* `sess_https_only` (bool): Whether the session cookie should only be sent over HTTPS. Defaults to False.
* `sess_domain` (Optional[str]): Domain for the session cookie.
* `key_fname` (str): Filename for the session key. Defaults to '.sesskey'.
* `body_wrap` (Any): Wrapper for the body content.
* `htmlkw` (Optional[dict]): Attributes to add to the `<html>` tag.
* `nb_hdrs` (bool): Whether to inject headers into the notebook DOM if in a notebook environment. Defaults to False.
* `canonical` (bool): Whether to automatically include a canonical link tag. Defaults to True.
* `pico` (bool): Include Pico.css header. Defaults to False.
* `args` (Any): Additional positional arguments.

### Example
```python
from fasthtml.common import FastHTML

app = FastHTML(title="My FastHTML App", bodykw={"class": "bg-background text-foreground"})
```
```

--------------------------------

### Create Account Card

Source: https://monsterui.answer.ai/cards/md

A card for user account creation, featuring buttons, an OR divider, and input fields for email and password.

```Python
from fasthtml.common import *
from fasthtml.components import Uk_input_tag
from fasthtml.svg import *
from monsterui.all import *
import calendar
from datetime import datetime

app, rt = fast_app(hdrs=Theme.blue.headers())

CreateAccount = Card(
    Grid(
        Button(DivLAligned(UkIcon('github'),Div('Github'))),
        Button('Google')
    ),
    DividerSplit("OR CONTINUE WITH", text_cls=TextPresets.muted_sm),
    LabelInput('Email', id='email', placeholder='m@example.com'),
    LabelInput('Password', id='password',placeholder='Password', type='Password'),
    header=(H3('Create an Account'),Subtitle('Enter your email below to create your account')),
    footer=Button('Create Account',cls=(ButtonT.primary,'w-full'))
)
```