### Auth Example Setup
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx.txt
Basic setup for an authentication UI example using fasthtml and monsterui. This snippet includes necessary imports for building authentication-related components.
```python
from fasthtml.common import *
from monsterui.all import *
from fasthtml.svg import *
```
--------------------------------
### Basic Nav Example
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Demonstrates a simple navigation structure with active item highlighting.
```python
def ex_nav1():
mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
return NavContainer(*mbrs1)
```
--------------------------------
### Install MonsterUI
Source: https://github.com/answerdotai/monsterui/blob/main/README.md
Install the MonsterUI library using pip.
```bash
pip install MonsterUI
```
--------------------------------
### Dropdown Navigation Example
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Illustrates how to create a dropdown navigation menu triggered by a button.
```python
def ex_navdrop():
return Div(
Button("Open DropDown"),
DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href='')))))
```
--------------------------------
### MonsterUI Scrollspy Example Application Setup
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx.txt
Imports necessary components from fasthtml and monsterui, and the random module for the Scrollspy example application.
```python
from fasthtml.common import *
from monsterui.all import *
import random
```
--------------------------------
### Example Usage of Article Components
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
Demonstrates how to use the Article, ArticleTitle, and ArticleMeta components together.
```python
# Article(ArticleTitle("Article Title"), ArticleMeta("By: John Doe"))
```
--------------------------------
### Example Steps Component (Basic)
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Demonstrates the creation of a basic Steps component with three distinct steps, each with a label and a specific class.
```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")
```
--------------------------------
### Product Grid Example
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
A practical example of using the Grid component to display a list of products, each within a Card component. This snippet is useful for e-commerce or catalog-like interfaces.
```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)
```
--------------------------------
### HTML Example: FrankenUI Navbar
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
An example of a responsive navigation bar implemented with FrankenUI, including custom CSS for active link states and integration with Tailwind CSS.
```html
```
--------------------------------
### Initialize FastHTML with Headers
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/01_core.ipynb
Creates a FastHTML application instance using the provided headers. This is a basic setup for an application.
```python
app = FastHTML(hdrs=Theme.blue.headers())
```
--------------------------------
### Example Toast HTML Output
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/03_daisy.ipynb
This is an example of the generated HTML for a toast with custom positioning.
```html
div((div((span(("New message arrived.",),{}),),{'class': 'alert ', 'role': 'alert'}), ''),{'data-mui': '_6Hhof295QJm6E7-LMKS9BA', 'class': 'toast toast-start toast-middle'})
```
--------------------------------
### Create a List of Steps
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/03_daisy.ipynb
Example of creating a multi-step process using `Steps` and `LiStep` components, applying primary styling to the first two steps.
```python
Steps(
*[LiStep(o, cls="primary") for o in ("Register", "Choose Plan")],
*[LiStep(o) for o in ("Purchase", "Receive Product")]
)
```
--------------------------------
### Example Progress Bar Creation
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Demonstrates how to create a simple progress bar with a value of 20 and a maximum of 100.
```python
def ex_progress():
return Progress(value=20, max=100)
```
--------------------------------
### Select Component Examples
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Creates a dropdown select input. Supports options, labels, placeholders, and searchable/insertable features.
```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'))
```
```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"))
```
--------------------------------
### Example Toast HTML Output with Duration
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/03_daisy.ipynb
This is an example of the generated HTML for a toast with a custom duration.
```html
div((div((span(("New message arrived.",),{}),),{'class': 'alert alert-info', 'role': 'alert'}), ''),{'data-mui': '_vbVi8KJdR9SQntA85v9FDw', 'class': 'toast '})
```
--------------------------------
### Create a Styled Container
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Example of creating a container with specific size 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")
```
--------------------------------
### Example Radio Button with Label
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Shows how to create a radio button and associate it with a LabelRadio component. The example uses a Div to group the Radio and LabelRadio, ensuring they are displayed with appropriate spacing.
```python
def ex_radio():
return Div(
Radio(name="radio-group", id="radio1"),
LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4'))
```
--------------------------------
### Example Usage of Slider
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
Demonstrates creating and displaying a slider with multiple image items and navigation enabled.
```python
# Show(Slider(*[Div(Img(src=f'https://picsum.photos/200/200?random={i}'))
# for i in range(5)]), link=True)
```
--------------------------------
### Example Usage of NavBar Component
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
Demonstrates how to use the NavBar component by creating navigation links and rendering the navbar with a custom brand.
```python
nav_links = [A(f'link {i}', href='#', cls='uk-link') for i in range(5)]
qshow(NavBar(*nav_links, brand=H3('NavBar Test')))
```
--------------------------------
### Example Card with Header and Footer
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Demonstrates creating a Card component with a header and footer, including form elements like LabelInput and LabelRange.
```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")))
```
--------------------------------
### ex_tables1
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Example function showing how to create a TableFromLists component using header, body, and footer data provided as lists.
```APIDOC
## ex_tables1
### Description
Example function showing how to create a TableFromLists component using header, body, and footer data provided as lists.
### Method
N/A (Python function)
### Signature
`ex_tables1() -> fastcore.xml.FT`
### Returns
Table from lists
```
--------------------------------
### Example Toast HTML Output with Color
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/03_daisy.ipynb
This is an example of the generated HTML for a toast with a specified alert class for color.
```html
div((div((span(("New message arrived.",),{}),),{'class': 'alert alert-info', 'role': 'alert'}), ''),{'data-mui': '_vq6iBLofRF2Rz0Z7Qqvyfg', 'class': 'toast '})
```
--------------------------------
### ex_tables0
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Example function demonstrating the creation of a Table component with explicit Thead, Tbody, and Tfoot elements.
```APIDOC
## ex_tables0
### Description
Example function demonstrating the creation of a Table component with explicit Thead, Tbody, and Tfoot elements.
### Method
N/A (Python function)
### Signature
`ex_tables0() -> fastcore.xml.FT`
### Returns
Table component
```
--------------------------------
### Run MonsterUI Documentation Locally
Source: https://github.com/answerdotai/monsterui/blob/main/CONTRIBUTING.md
Navigate to the docs directory and install requirements to run the FastHTML documentation site locally. Access the site at http://localhost:5001/.
```bash
cd docs
pip install -r requirements.txt
python main.py
```
--------------------------------
### Example Function with Markdown Rendering
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx-full.txt
Demonstrates applying classes after markdown rendering. This function is part of the utility functions.
```python
def ex_applyclasses2():
from mistletoe import markdown, HTMLRenderer
md = markdown('# Hi
[a link](www.google.com)', renderer=HTMLRenderer)
return Safe(apply_classes(md))
```
--------------------------------
### Example Usage of SliderItems
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
Demonstrates how to use the SliderItems component with image elements.
```python
# Show(SliderContainer(SliderItems(*[Img(src=f'https://picsum.photos/200/200?random={i}', style='width:200px') for i in range(5)])))
```
--------------------------------
### Initialize App with Slate Theme and Highlight.js
Source: https://github.com/answerdotai/monsterui/blob/main/docs/llms-ctx.txt
Initializes the application with the 'slate' theme and enables Highlight.js for code block syntax highlighting. This setup is useful for applications that display code snippets.
```python
hdrs = Theme.slate.headers(highlightjs=True)
app, rt = fast_app(hdrs=hdrs)
```
--------------------------------
### Example Usage of Range Component
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
Demonstrates how to use the Range component with a label and a predefined value range.
```python
Range(label='kg', value="25,75")
```
--------------------------------
### Instantiate and Display CalendarInput
Source: https://github.com/answerdotai/monsterui/blob/main/nbs/02_franken.ipynb
Demonstrates how to create an instance of the CalendarInput component with specific configurations and then display it using the Show function. The example includes setting today as active, enabling jumpable month/year selection, and defining date ranges and marked/disabled dates.
```python
ci = CalendarInput(
today=True,
jumpable=True,
starts_with=1,
min_date='2025-02-01',
max_date='2025-02-15',
disabled_dates='2025-02-10,2025-02-05',
marked_dates='2025-02-10,2025-02-05',
)
ci
```
```html
Result:
```
```python
Show(ci)
```
```html
Result:
HTML(