feat: initial project setup with implementation plan

- Add PLAN.md with 40-step checklist across 10 phases - Add CLAUDE.md with project-specific instructions - Set up nix flake with FastHTML/MonsterUI dependencies - Create Python package skeleton (src/animaltrack) - Vendor FastHTML and MonsterUI documentation - Add Docker build configuration 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-27 17:37:16 +00:00
parent 852107794b
commit c0b939627b
61 changed files with 18076 additions and 0 deletions
--- a/docs/vendor/monsterui/api_ref/docs_accordion_link.md
+++ b/docs/vendor/monsterui/api_ref/docs_accordion_link.md
@@ -0,0 +1,228 @@
+# Accordion API Reference
+
+### Example Accordions
+
+A simple accordion with fluid collapsing and expanding animation where only a single Section can be exanded at any time.
+
+See Source
+
+See Output
+
+## Accordion Header
+
+  * Section 1
+
+Content for the first section.
+
+More content here.
+
+  * Section 2
+
+Content for the second section.
+
+A label inside!
+
+  * Section 3 - The last one!
+
+Content for the third section.
+
+[code]
+
+    def ex_accordion_1():
+        return Div(
+            H2("Accordion Header"),
+            Accordion(
+                AccordionItem(
+                    "Section 1",
+                    P("Content for the first section."),
+                    P("More content here."),
+                ),
+                AccordionItem(
+                    "Section 2",
+                    P("Content for the second section."),
+                    Label("A label inside!"),
+                    li_kwargs={"id": "section-2"},
+                ),
+                AccordionItem(
+                    "Section 3 - The last one!", P("Content for the third section.")
+                ),
+                multiple=False,
+                animation=True,
+            ),
+        ),
+    
+[/code]
+
+An accordion with fluid collapsing and expanding animation where one section is already expanded at startup and multiple section can be expanded at any time.
+
+See Source
+
+See Output
+
+## Accordion Header
+
+  * Section 1
+
+Content for the first section.
+
+More content here.
+
+  * Section 2
+
+Content for the second section.
+
+A label inside!
+
+  * Section 3 - The last one!
+
+Content for the third section.
+
+[code]
+
+    def ex_accordion_2():
+        return Div(
+            H2("Accordion Header"),
+            Accordion(
+                AccordionItem(
+                    "Section 1",
+                    P("Content for the first section."),
+                    P("More content here."),
+                    open=True,
+                ),
+                AccordionItem(
+                    "Section 2",
+                    P("Content for the second section."),
+                    Label("A label inside!"),
+                    li_kwargs={"id": "section-2"},
+                ),
+                AccordionItem(
+                    "Section 3 - The last one!", P("Content for the third section.")
+                ),
+                multiple=True,
+                animation=True,
+            ),
+        ),
+    
+[/code]
+
+An accordion with no collapsing and expanding animation where only a single Section can be exanded at any time.
+
+See Source
+
+See Output
+
+## Accordion Header
+
+  * Section 1
+
+Content for the first section.
+
+More content here.
+
+  * Section 2
+
+Content for the second section.
+
+A label inside!
+
+  * Section 3 - The last one!
+
+Content for the third section.
+
+[code]
+
+    def ex_accordion_3():
+        return Div(
+            H2("Accordion Header"),
+            Accordion(
+                AccordionItem(
+                    "Section 1",
+                    P("Content for the first section."),
+                    P("More content here."),
+                ),
+                AccordionItem(
+                    "Section 2",
+                    P("Content for the second section."),
+                    Label("A label inside!"),
+                    li_kwargs={"id": "section-2"},
+                ),
+                AccordionItem(
+                    "Section 3 - The last one!", P("Content for the third section.")
+                ),
+                multiple=False,
+                animation=False,
+            ),
+        ),
+    
+[/code]
+
+### API Reference
+
+### Accordion
+
+Source
+
+[code]
+
+    Accordion(*c: 'AccordionItem', cls: Union[str, enum.Enum, tuple] = (), multiple: Optional[bool] = None, collapsible: Optional[bool] = None, animation: Optional[bool] = None, duration: Optional[int] = None, active: Optional[int] = None, transition: Optional[str] = None, tag: str = 'ul', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a styled Accordion container using accordion component.
+
+**Params**
+
+  * `c` One or more `AccordionItem` components
+
+  * `cls` Additional classes for the container (`Ul` or `Div`)
+
+  * `multiple` Allow multiple items to be open simultaneously (UIkit option)
+
+  * `collapsible` Allow all items to be closed (UIkit option, default True)
+
+  * `animation` Enable/disable animation (UIkit option, default True)
+
+  * `duration` Animation duration in ms (UIkit option, default 200)
+
+  * `active` Index (0-based) of the item to be open by default (UIkit option)
+
+  * `transition` Animation transition timing function (UIkit option, e.g., 'ease-out')
+
+  * `tag` HTML tag for the container ('ul' or 'div')
+
+  * `kwargs`
+
+**Returns:** Ul(*items...) or Div(*items...)
+
+### AccordionItem
+
+Source
+
+[code]
+
+    AccordionItem(title: Union[str, fastcore.xml.FT], *c: fastcore.xml.FT, cls: Union[str, enum.Enum, tuple] = (), title_cls: Union[str, enum.Enum, tuple] = ('flex justify-between items-center w-full',), content_cls: Union[str, enum.Enum, tuple] = (), open: bool = False, li_kwargs: Optional[Dict] = None, a_kwargs: Optional[Dict] = None, div_kwargs: Optional[Dict] = None) -> fastcore.xml.FT
+[/code]
+
+> Creates a single item for use within an Accordion component, handling title, content, and open state.
+
+**Params**
+
+  * `title` Content for the accordion item title
+
+  * `c` Content to display when the item is open
+
+  * `cls` Additional classes for the outer `Li` container
+
+  * `title_cls` Additional classes for the title `A` tag
+
+  * `content_cls` Additional classes for the content `Div`
+
+  * `open` Whether this item should be open by default
+
+  * `li_kwargs` Additional attributes for the outer `Li` tag
+
+  * `a_kwargs` Additional attributes for the title `A` tag
+
+  * `div_kwargs` Additional attributes for the content `Div` tag
+
+**Returns:** Li(A(title, Span(Icon, Icon)), Div(content))
+
--- a/docs/vendor/monsterui/api_ref/docs_button_link.md
+++ b/docs/vendor/monsterui/api_ref/docs_button_link.md
@@ -0,0 +1,90 @@
+# Buttons & Links API Reference
+
+See Source
+
+See Output
+
+DefaultPrimarySecondaryDangerTextLinkGhost
+
+[code]
+
+    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),
+            )
+    
+[/code]
+
+See Source
+
+See Output
+
+Default LinkMuted LinkText LinkReset LinkPrimary LinkClassic Link
+
+[code]
+
+    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),)
+    
+[/code]
+
+### Button
+
+Source
+
+[code]
+
+    Button(*c: Union[str, fastcore.xml.FT], cls: Union[str, enum.Enum] = <ButtonT.default: 'uk-btn-default'>, submit=True, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Button with Styling (defaults to `submit` for form submission)
+
+**Params**
+
+  * `c` Contents of `Button` tag (often text)
+
+  * `cls` Classes in addition to `Button` styling (use `ButtonT` for built in styles)
+
+  * `submit` Whether the button should submit a form
+
+  * `kwargs`
+
+**Returns:** Button(..., cls='uk-btn')
+
+* * *
+
+### ButtonT
+
+_Options for styling Buttons_
+
+Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---  
+default | uk-btn-default | ghost | uk-btn-ghost | primary | uk-btn-primary  
+secondary | uk-btn-secondary | destructive | uk-btn-destructive | text | uk-btn-text  
+link | uk-btn-link | xs | uk-btn-xs | sm | uk-btn-sm  
+lg | uk-btn-lg | xl | uk-btn-xl | icon | uk-btn-icon  
+  
+* * *
+
+### AT
+
+_Link styles from https://franken-ui.dev/docs/link_
+
+Option | Value | Option | Value  
+---|---|---|---  
+muted | uk-link-muted | text | uk-link-text  
+reset | uk-link-reset | primary | uk-link text-primary hover:text-primary-focus underline  
+classic | text-blue-600 hover:text-blue-800 underline |  | 
+
--- a/docs/vendor/monsterui/api_ref/docs_cards.md
+++ b/docs/vendor/monsterui/api_ref/docs_cards.md
@@ -0,0 +1,310 @@
+# Cards API Reference
+
+### Example Usage
+
+See Source
+
+See Output
+
+Header
+
+A card with header and footer
+
+Input
+
+Range
+
+Footer Submit Button
+
+[code]
+
+    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")))
+    
+[/code]
+
+See Source
+
+See Output
+
+#### Creating Custom FastHTML Tags for Markdown Rendering
+
+A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles
+
+Isaac Flath20-October-2024
+
+FastHTMLHTMXWeb Apps
+
+Read
+
+[code]
+
+    def ex_card2_wide():
+        def Tags(cats): return DivLAligned(map(Label, cats))
+    
+        return Card(
+            DivLAligned(
+                A(Img(src="https://picsum.photos/200/200?random=12", style="width:200px"),href="#"),
+                Div(cls='space-y-3 uk-width-expand')(
+                    H4("Creating Custom FastHTML Tags for Markdown Rendering"),
+                    P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
+                    DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
+                    DivFullySpaced(
+                        Tags(["FastHTML", "HTMX", "Web Apps"]),
+                        Button("Read", cls=(ButtonT.primary,'h-6'))))),
+            cls=CardT.hover)
+    
+[/code]
+
+See Source
+
+See Output
+
+#### Creating Custom FastHTML Tags for Markdown Rendering
+
+A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles
+
+Isaac Flath20-October-2024
+
+FastHTMLHTMXWeb Apps
+
+Read
+
+[code]
+
+    def ex_card2_tall():
+        def Tags(cats): return DivLAligned(map(Label, cats))
+    
+        return Card(
+            Div(
+                A(Img(src="https://picsum.photos/400/200?random=14"), href="#"),
+                Div(cls='space-y-3 uk-width-expand')(
+                    H4("Creating Custom FastHTML Tags for Markdown Rendering"),
+                    P("A step by step tutorial to rendering markdown in FastHTML using zero-md inside of DaisyUI chat bubbles"),
+                    DivFullySpaced(map(Small, ["Isaac Flath", "20-October-2024"]), cls=TextT.muted),
+                    DivFullySpaced(
+                        Tags(["FastHTML", "HTMX", "Web Apps"]),
+                        Button("Read", cls=(ButtonT.primary,'h-6'))))),
+            cls=CardT.hover)
+    
+[/code]
+
+See Source
+
+See Output
+
+### Sarah Chen
+
+Engineering Lead
+
+San Francisco
+
+### James Wilson
+
+Senior Developer
+
+New York
+
+### Maria Garcia
+
+UX Designer
+
+London
+
+### Alex Kumar
+
+Product Manager
+
+Singapore
+
+### Emma Brown
+
+DevOps Engineer
+
+Toronto
+
+### Marcus Johnson
+
+Frontend Developer
+
+Berlin
+
+[code]
+
+    def ex_card3():
+        def team_member(name, role, location="Remote"):
+            return Card(
+                DivLAligned(
+                    DiceBearAvatar(name, h=24, w=24),
+                    Div(H3(name), P(role))),
+                footer=DivFullySpaced(
+                    DivHStacked(UkIcon("map-pin", height=16), P(location)),
+                    DivHStacked(*(UkIconLink(icon, height=16) for icon in ("mail", "linkedin", "github")))))
+        team = [
+            team_member("Sarah Chen", "Engineering Lead", "San Francisco"),
+            team_member("James Wilson", "Senior Developer", "New York"),
+            team_member("Maria Garcia", "UX Designer", "London"),
+            team_member("Alex Kumar", "Product Manager", "Singapore"),
+            team_member("Emma Brown", "DevOps Engineer", "Toronto"),
+            team_member("Marcus Johnson", "Frontend Developer", "Berlin")
+        ]
+        return Grid(*team, cols_sm=1, cols_md=1, cols_lg=2, cols_xl=3)
+    
+[/code]
+
+### API Reference
+
+### Card
+
+Source
+
+[code]
+
+    Card(*c, header: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, footer: Union[fastcore.xml.FT, Iterable[fastcore.xml.FT]] = None, body_cls='space-y-6', header_cls=(), footer_cls=(), cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a Card with a header, body, and footer
+
+**Params**
+
+  * `c` Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.)
+
+  * `header` Component(s) that goes in the header (often a `ModalTitle` and a subtitle)
+
+  * `footer` Component(s) that goes in the footer (often a `ModalCloseButton`)
+
+  * `body_cls` classes for the body
+
+  * `header_cls` classes for the header
+
+  * `footer_cls` classes for the footer
+
+  * `cls` class for outermost component
+
+  * `kwargs`
+
+**Returns:** Card component
+
+### CardTitle
+
+Source
+
+[code]
+
+    CardTitle(*c, cls=(), **kwargs)
+[/code]
+
+> Creates a card title
+
+**Params**
+
+  * `c` Components (often a string)
+
+  * `cls` Additional classes on the div
+
+  * `kwargs`
+
+* * *
+
+### CardT
+
+_Card styles from UIkit_
+
+Option | Value | Option | Value  
+---|---|---|---  
+default | uk-card-default | primary | uk-card-primary  
+secondary | uk-card-secondary | destructive | uk-card-destructive  
+hover | uk-card hover:shadow-lg hover:-translate-y-1 transition-all duration-200 |  |   
+  
+The remainder of these are only needed if you're doing something really special. They are used in the `Card` function to generate the boilerplate for you.
+
+### CardContainer
+
+Source
+
+[code]
+
+    CardContainer(*c, cls=<CardT.default: 'uk-card-default'>, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a card container
+
+**Params**
+
+  * `c` Components (typically `CardHeader`, `CardBody`, `CardFooter`)
+
+  * `cls` Additional classes on the div
+
+  * `kwargs`
+
+**Returns:** Container for a card
+
+### CardHeader
+
+Source
+
+[code]
+
+    CardHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a card header
+
+**Params**
+
+  * `c` Components that goes in the header (often a `ModalTitle` and description)
+
+  * `cls` Additional classes on the div
+
+  * `kwargs`
+
+**Returns:** Container for the header of a card
+
+### CardBody
+
+Source
+
+[code]
+
+    CardBody(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a card body
+
+**Params**
+
+  * `c` Components that go in the body (Main content of the card such as a form, and image, a signin form, etc.)
+
+  * `cls` Additional classes on the div
+
+  * `kwargs`
+
+**Returns:** Container for the body of a card
+
+### CardFooter
+
+Source
+
+[code]
+
+    CardFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a card footer
+
+**Params**
+
+  * `c` Components that go in the footer (often a `ModalCloseButton`)
+
+  * `cls` Additional classes on the div
+
+  * `kwargs`
+
+**Returns:** Container for the footer of a card
+
--- a/docs/vendor/monsterui/api_ref/docs_charts.md
+++ b/docs/vendor/monsterui/api_ref/docs_charts.md
@@ -0,0 +1,75 @@
+# Charts API Reference
+
+MonsterUI supports ApexCharts, a javascript library for rendering different charts like line and pie charts. See the full list of chart types here.
+
+To render a chart you'll need to include the ApexChart js in your app headers like this
+
+`app, rt = fast_app(hdrs=Theme.blue.headers(apex_charts=True))`
+
+Then create an `ApexChart` component as shown in the examples below.
+
+Generally, you should be able to take any chart from the ApexChart docs, convert the chart's options var to a python dict and plug it straight into MonsterUI's ApexChart component.
+
+## Example usage
+
+#### Line chart
+
+See Source
+
+See Output
+
+[code]
+
+    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'
+        )
+    
+[/code]
+
+#### Pie chart
+
+See Source
+
+See Output
+
+[code]
+
+    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'
+        )
+    
+[/code]
+
+### ApexChart
+
+Source
+
+[code]
+
+    ApexChart(*, opts: Dict, cls: enum.Enum | str | tuple = (), **kws) -> fastcore.xml.FT
+[/code]
+
+> Apex chart component
+
+**Params**
+
+  * `opts` ApexChart options used to render your chart (e.g. {"chart":{"type":"line"}, ...})
+
+  * `cls` Classes for the outer container
+
+  * `kws`
+
+**Returns:** Div(Uk_chart(Script(...)))
+
--- a/docs/vendor/monsterui/api_ref/docs_containers.md
+++ b/docs/vendor/monsterui/api_ref/docs_containers.md
@@ -0,0 +1,167 @@
+# Articles, Containers & Sections API Reference
+
+### ArticleMeta
+
+Source
+
+[code]
+
+    ArticleMeta(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A metadata component for use within an Article showing things like date, author etc
+
+**Params**
+
+  * `c` contents of ArticleMeta tag (often other tags)
+
+  * `cls` Classes in addition to ArticleMeta styling
+
+  * `kwargs`
+
+**Returns:** P(..., cls='uk-article-meta')
+
+### ArticleTitle
+
+Source
+
+[code]
+
+    ArticleTitle(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A title component for use within an Article
+
+**Params**
+
+  * `c` contents of ArticleTitle tag (often other tags)
+
+  * `cls` Classes in addition to ArticleTitle styling
+
+  * `kwargs`
+
+**Returns:** H1(..., cls='uk-article-title')
+
+### Article
+
+Source
+
+[code]
+
+    Article(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A styled article container for blog posts or similar content
+
+**Params**
+
+  * `c` contents of Article tag (often other tags)
+
+  * `cls` Classes in addition to Article styling
+
+  * `kwargs`
+
+**Returns:** Article(..., cls='uk-article')
+
+See Source
+
+See Output
+
+# Sample Article Title
+
+By: John Doe
+
+lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+[code]
+
+    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.'))
+    
+[/code]
+
+### Container
+
+Source
+
+[code]
+
+    Container(*c, cls=('mt-5', <ContainerT.xl: 'uk-container-xl'>), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Div to be used as a container that often wraps large sections or a page of content
+
+**Params**
+
+  * `c` Contents of Container tag (often other FT Components)
+
+  * `cls` Classes in addition to Container styling
+
+  * `kwargs`
+
+**Returns:** Container(..., cls='uk-container')
+
+* * *
+
+### ContainerT
+
+_Max width container sizes from https://franken-ui.dev/docs/container_
+
+Option | Value | Option | Value  
+---|---|---|---  
+xs | uk-container-xs | sm | uk-container-sm  
+lg | uk-container-lg | xl | uk-container-xl  
+expand | uk-container-expand |  |   
+  
+See Source
+
+See Output
+
+This is a sample container with custom styling.
+
+[code]
+
+    def ex_containers():
+        return Container(
+            "This is a sample container with custom styling.",
+            cls=ContainerT.xs,
+            style="background-color: #FFA500; color: #000000")
+    
+[/code]
+
+### Section
+
+Source
+
+[code]
+
+    Section(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Section with styling and margins
+
+**Params**
+
+  * `c` contents of Section tag (often other tags)
+
+  * `cls` Classes in addition to Section styling
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-section')
+
+* * *
+
+### SectionT
+
+_Section styles from https://franken-ui.dev/docs/section_
+
+Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---  
+default | uk-section-default | muted | uk-section-muted | primary | uk-section-primary  
+secondary | uk-section-secondary | xs | uk-section-xsmall | sm | uk-section-small  
+lg | uk-section-large | xl | uk-section-xlarge | remove_vertical | uk-section-remove-vertical
+
--- a/docs/vendor/monsterui/api_ref/docs_dividers.md
+++ b/docs/vendor/monsterui/api_ref/docs_dividers.md
@@ -0,0 +1,122 @@
+# Dividers API Reference
+
+### Divider
+
+Source
+
+[code]
+
+    Divider(*c, cls=('my-4', <DividerT.icon: 'uk-divider-icon'>), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Divider with default styling and margin
+
+**Params**
+
+  * `c` contents of Divider tag (often nothing)
+
+  * `cls` Classes in addition to Divider styling
+
+  * `kwargs`
+
+**Returns:** Hr(..., cls='uk-divider-icon') or Div(..., cls='uk-divider-vertical')
+
+* * *
+
+### DividerT
+
+_Divider Styles from https://franken-ui.dev/docs/divider_
+
+Option | Value | Option | Value  
+---|---|---|---  
+icon | uk-divider-icon | sm | uk-divider-sm  
+vertical | uk-divider-vertical |  |   
+  
+See Source
+
+See Output
+
+Small Divider
+
+* * *
+
+Vertical Divider
+
+Icon Divider
+
+* * *
+[code]
+
+    def ex_dividers():
+        return Div(
+            P("Small Divider"),
+            Divider(cls=DividerT.sm),
+            DivCentered(
+                P("Vertical Divider"),
+                Divider(cls=DividerT.vertical)),
+            DivCentered("Icon Divider"),
+            Divider(cls=DividerT.icon))
+    
+[/code]
+
+### DividerSplit
+
+Source
+
+[code]
+
+    DividerSplit(*c, cls=(), line_cls=(), text_cls=())
+[/code]
+
+> Creates a simple horizontal line divider with configurable thickness and vertical spacing
+
+**Params**
+
+  * `c`
+
+  * `cls`
+
+  * `line_cls`
+
+  * `text_cls`
+
+See Source
+
+See Output
+
+Or continue with
+
+[code]
+
+    def ex_dividersplit():
+        return DividerSplit(P("Or continue with", cls=TextPresets.muted_sm))
+    
+[/code]
+
+### DividerLine
+
+Source
+
+[code]
+
+    DividerLine(lwidth=2, y_space=4)
+[/code]
+
+> **Params**
+
+  * `lwidth`
+
+  * `y_space`
+
+See Source
+
+See Output
+
+* * *
+[code]
+
+    def ex_dividerline(): 
+        return DividerLine()
+    
+[/code]
+
--- a/docs/vendor/monsterui/api_ref/docs_forms.md
+++ b/docs/vendor/monsterui/api_ref/docs_forms.md
@@ -0,0 +1,733 @@
+# Forms and User Inputs API Reference
+
+### Example Form
+
+This form was live coded in a 5 minute video here
+
+See Source
+
+See Output
+
+### Emergency Contact Form
+
+Please fill out the form completely
+
+First Name
+
+Last Name
+
+Email
+
+Phone
+
+### Relationship to patient
+
+Parent
+
+Sibling
+
+Friend
+
+Spouse
+
+Significant Other
+
+Relative
+
+Child
+
+Other
+
+Address
+
+Address Line 2
+
+City
+
+State
+
+Zip
+
+Submit Form
+
+[code]
+
+    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))))
+    
+[/code]
+
+See Source
+
+See Output
+
+Upload Button!
+
+Upload Zone
+
+[code]
+
+    def ex_upload():
+        return Div(Upload("Upload Button!", id='upload1'),
+                   UploadZone(DivCentered(Span("Upload Zone"), UkIcon("upload")), id='upload2'),
+                   cls='space-y-4')
+    
+[/code]
+
+### FormLabel
+
+Source
+
+[code]
+
+    FormLabel(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Label with default styling
+
+**Params**
+
+  * `c` contents of FormLabel tag (often text)
+
+  * `cls` Classes in addition to FormLabel styling
+
+  * `kwargs`
+
+**Returns:** Label(..., cls='uk-form-label')
+
+See Source
+
+See Output
+
+Form Label
+
+[code]
+
+    def ex_formlabel(): 
+        return FormLabel("Form Label")
+    
+[/code]
+
+### Input
+
+Source
+
+[code]
+
+    Input(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> An Input with default styling
+
+**Params**
+
+  * `c` contents of Input tag (often nothing)
+
+  * `cls` Classes in addition to Input styling
+
+  * `kwargs`
+
+**Returns:** Input(..., cls='uk-input')
+
+See Source
+
+See Output
+
+Input
+
+[code]
+
+    def ex_input(): 
+        return Div(
+            Input(placeholder="Enter text"), 
+            LabelInput(label="Input", id='myid'))
+    
+[/code]
+
+### LabelInput
+
+Source
+
+[code]
+
+    LabelInput(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', cls='space-y-2', id='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A `FormLabel` and `Input` pair that provides default spacing and links/names them based on id
+
+**Params**
+
+  * `label` FormLabel content (often text)
+
+  * `lbl_cls` Additional classes for `FormLabel`
+
+  * `input_cls` Additional classes for `Input`
+
+  * `cls` Classes on container (default is `'space-y-2'` to prevent scrunched up form elements)
+
+  * `id` id for `FormLabel` and `Input` (`id`, `name` and `for` attributes are set to this value)
+
+  * `kwargs`
+
+**Returns:** Div(cls='space-y-2')(`FormLabel`, `Input`)
+
+### LabelCheckboxX
+
+Source
+
+[code]
+
+    LabelCheckboxX(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', container=functools.partial(<function ft at 0x7526ec1c9580>, 'div', void_=False), cls='flex items-center space-x-2', id='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A FormLabel and CheckboxX pair that provides default spacing and links/names them based on id
+
+**Params**
+
+  * `label` FormLabel content (often text)
+
+  * `lbl_cls` Additional classes for `FormLabel`
+
+  * `input_cls` Additional classes for `CheckboxX`
+
+  * `container` Container to wrap label and input in (default is Div)
+
+  * `cls` Classes on container (default is 'flex items-center space-x-2')
+
+  * `id` id for `FormLabel` and `CheckboxX` (`id`, `name` and `for` attributes are set to this value)
+
+  * `kwargs`
+
+**Returns:** Div(cls='flex items-center space-x-2')(`FormLabel`, `CheckboxX`)
+
+### LabelSwitch
+
+Source
+
+[code]
+
+    LabelSwitch(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', cls='space-x-2', id='', *, container=functools.partial(<function ft at 0x7526ec1c9580>, 'div', void_=False)) -> fastcore.xml.FT
+[/code]
+
+> **Params**
+
+  * `label` FormLabel content (often text)
+
+  * `lbl_cls` Additional classes for `FormLabel`
+
+  * `input_cls` Additional classes for `Switch`
+
+  * `container` Container to wrap label and input in (default is Div)
+
+  * `cls` Classes on container (default is `'space-x-2'` to prevent scrunched up form elements)
+
+  * `id` id for `FormLabel` and `Switch` (`id`, `name` and `for` attributes are set to this value)
+
+**Returns:** Div(cls='space-y-2')(`FormLabel`, `Switch`)
+
+### LabelRange
+
+Source
+
+[code]
+
+    LabelRange(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', cls='space-y-6', id='', value='', min=None, max=None, step=None, label_range=True, *, container=functools.partial(<function ft at 0x7526ec1c9580>, 'div', void_=False)) -> fastcore.xml.FT
+[/code]
+
+> A FormLabel and Range pair that provides default spacing and links/names them based on id
+
+**Params**
+
+  * `label` FormLabel content (often text)
+
+  * `lbl_cls` Additional classes for `FormLabel`
+
+  * `input_cls` Additional classes for `Range`
+
+  * `container` Container to wrap label and input in (default is Div)
+
+  * `cls` Classes on container (default is `'space-y-2'` to prevent scrunched up form elements)
+
+  * `id` id for `FormLabel` and `Range` (`id`, `name` and `for` attributes are set to this value)
+
+  * `value` Value for the range input
+
+  * `min` Minimum value
+
+  * `max` Maximum value
+
+  * `step` Step size
+
+  * `label_range` Whether to show the range value label (label for the `Range` component)
+
+**Returns:** Div(cls='space-y-2')(`FormLabel`, `Range`)
+
+### LabelTextArea
+
+Source
+
+[code]
+
+    LabelTextArea(label: str | fastcore.xml.FT, value='', lbl_cls='', input_cls='', cls='space-y-2', id='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> **Params**
+
+  * `label` FormLabel content (often text)
+
+  * `value` Value for the textarea
+
+  * `lbl_cls` Additional classes for `FormLabel`
+
+  * `input_cls` Additional classes for `TextArea`
+
+  * `cls` Classes on container (default is `'space-y-2'` to prevent scrunched up form elements)
+
+  * `id` id for `FormLabel` and `TextArea` (`id`, `name` and `for` attributes are set to this value)
+
+  * `kwargs`
+
+**Returns:** Div(cls='space-y-2')(`FormLabel`, `TextArea`)
+
+### LabelRadio
+
+Source
+
+[code]
+
+    LabelRadio(label: str | fastcore.xml.FT, lbl_cls='', input_cls='', container=functools.partial(<function ft at 0x7526ec1c9580>, 'div', void_=False), cls='flex items-center space-x-2', id='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A FormLabel and Radio pair that provides default spacing and links/names them based on id
+
+**Params**
+
+  * `label` FormLabel content (often text)
+
+  * `lbl_cls` Additional classes for `FormLabel`
+
+  * `input_cls` Additional classes for `Radio`
+
+  * `container` Container to wrap label and input in (default is Div)
+
+  * `cls` Classes on container (default is 'flex items-center space-x-2')
+
+  * `id` id for `FormLabel` and `Radio` (`id`, `name` and `for` attributes are set to this value)
+
+  * `kwargs`
+
+**Returns:** Div(cls='flex items-center space-x-2')(`FormLabel`, `Radio`)
+
+### LabelSelect
+
+Source
+
+[code]
+
+    LabelSelect(*option, label=(), lbl_cls=(), inp_cls=(), cls=('space-y-2',), id='', name='', placeholder='', searchable=False, select_kwargs=None, **kwargs)
+[/code]
+
+> A FormLabel and Select pair that provides default spacing and links/names them based on id
+
+**Params**
+
+  * `option` Options for the select dropdown (can use `Options` helper function to create)
+
+  * `label` String or FT component for the label
+
+  * `lbl_cls` Additional classes for the label
+
+  * `inp_cls` Additional classes for the select input
+
+  * `cls` Classes for the outer div
+
+  * `id` ID for the select input
+
+  * `name` Name attribute for the select input
+
+  * `placeholder` Placeholder text for the select input
+
+  * `searchable` Whether the select should be searchable
+
+  * `select_kwargs` Additional Arguments passed to Select
+
+  * `kwargs`
+
+### Progress
+
+Source
+
+[code]
+
+    Progress(*c, cls=(), value='', max='100', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a progress bar
+
+**Params**
+
+  * `c` Components to put in the progress bar (often nothing)
+
+  * `cls` Additional classes on the progress bar
+
+  * `value` Value of the progress bar
+
+  * `max` Max value of the progress bar (defaults to 100 for percentage)
+
+  * `kwargs`
+
+**Returns:** Progress(..., cls='uk-progress')
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_progress(): 
+        return Progress(value=20, max=100)
+    
+[/code]
+
+### Radio
+
+Source
+
+[code]
+
+    Radio(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Radio with default styling
+
+**Params**
+
+  * `c` contents of Radio tag (often nothing)
+
+  * `cls` Classes in addition to Radio styling
+
+  * `kwargs`
+
+**Returns:** Input(..., cls='uk-radio', type='radio')
+
+See Source
+
+See Output
+
+Radio
+
+[code]
+
+    def ex_radio(): 
+        return Div(
+            Radio(name="radio-group", id="radio1"), 
+            LabelRadio(label="Radio", id='radio1',cls='flex items-center space-x-4'))
+    
+[/code]
+
+### CheckboxX
+
+Source
+
+[code]
+
+    CheckboxX(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Checkbox with default styling
+
+**Params**
+
+  * `c` contents of CheckboxX tag (often nothing)
+
+  * `cls` Classes in addition to CheckboxX styling
+
+  * `kwargs`
+
+**Returns:** Input(..., cls='uk-checkbox', type='checkbox')
+
+See Source
+
+See Output
+
+Checkbox
+
+[code]
+
+    def ex_checkbox(): 
+        return Div(
+            CheckboxX(), 
+            LabelCheckboxX(label="Checkbox", id='checkbox1'))
+    
+[/code]
+
+### Range
+
+Source
+
+[code]
+
+    Range(*c, value='', label=True, min=None, max=None, step=None, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Range with default styling
+
+**Params**
+
+  * `c` contents of Range tag (often nothing)
+
+  * `value`
+
+  * `label`
+
+  * `min`
+
+  * `max`
+
+  * `step`
+
+  * `cls` Classes in addition to Range styling
+
+  * `kwargs`
+
+**Returns:** Input(..., cls='uk-range', type='range')
+
+See Source
+
+See Output
+
+Basic Range
+
+Range with Label
+
+Multiple Values
+
+Custom Range
+
+[code]
+
+    def ex_range(): 
+        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)        
+            )
+    
+[/code]
+
+### Switch
+
+Source
+
+[code]
+
+    Switch(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Switch with default styling
+
+**Params**
+
+  * `c` contents of Switch tag (often nothing)
+
+  * `cls` Classes in addition to Switch styling
+
+  * `kwargs`
+
+**Returns:** Input(..., cls='uk-toggle-switch uk-toggle-switch-primary min-w-9', type='checkbox')
+
+See Source
+
+See Output
+
+Switch
+
+[code]
+
+    def ex_switch(): 
+        return Div(
+            Switch(id="switch"), 
+            LabelSwitch(label="Switch", id='switch'))
+    
+[/code]
+
+### TextArea
+
+Source
+
+[code]
+
+    TextArea(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Textarea with default styling
+
+**Params**
+
+  * `c` contents of TextArea tag (often text)
+
+  * `cls` Classes in addition to TextArea styling
+
+  * `kwargs`
+
+**Returns:** TextArea(..., cls='uk-textarea')
+
+See Source
+
+See Output
+
+TextArea
+
+[code]
+
+    def ex_textarea(): 
+        return Div(
+            TextArea(placeholder="Enter multiple lines of text"), 
+            LabelTextArea(label="TextArea", id='myid'))
+    
+[/code]
+
+### Select
+
+Source
+
+[code]
+
+    Select(*option, inp_cls=(), cls=('h-10',), cls_custom='button: uk-input-fake dropdown: w-full', id='', name='', placeholder='', searchable=False, insertable=False, select_kwargs=None, **kwargs)
+[/code]
+
+> Creates a select dropdown with uk styling and option for adding a search box
+
+**Params**
+
+  * `option` Options for the select dropdown (can use `Options` helper function to create)
+
+  * `inp_cls` Additional classes for the select input
+
+  * `cls` Classes for the outer div (default h-10 for consistent height)
+
+  * `cls_custom` Classes for the Uk_Select web component
+
+  * `id` ID for the select input
+
+  * `name` Name attribute for the select input
+
+  * `placeholder` Placeholder text for the select input
+
+  * `searchable` Whether the select should be searchable
+
+  * `insertable` Whether to allow user-defined options to be added
+
+  * `select_kwargs` Additional Arguments passed to Select
+
+  * `kwargs`
+
+See Source
+
+See Output
+
+Option 1Option 2Option 3
+
+Select
+
+Option 1Option 2Option 3
+
+[code]
+
+    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'))
+    
+[/code]
+
+### Example: Insertable Select
+
+In a production app, the user-inserted option would be saved server-side (db, session etc.)
+
+See Source
+
+See Output
+
+AppleOrangeBananaMango
+
+AppleBananaMangoOrange
+
+[code]
+
+    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"))
+    
+[/code]
+
+### Legend
+
+Source
+
+[code]
+
+    Legend(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Legend with default styling
+
+**Params**
+
+  * `c` contents of Legend tag (often other tags)
+
+  * `cls` Classes in addition to Legend styling
+
+  * `kwargs`
+
+**Returns:** Legend(..., cls='uk-legend')
+
+### Fieldset
+
+Source
+
+[code]
+
+    Fieldset(*c, cls='flex', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Fieldset with default styling
+
+**Params**
+
+  * `c` contents of Fieldset tag (often other tags)
+
+  * `cls` Classes in addition to Fieldset styling
+
+  * `kwargs`
+
+**Returns:** Fieldset(..., cls='uk-fieldset')
+
--- a/docs/vendor/monsterui/api_ref/docs_html.md
+++ b/docs/vendor/monsterui/api_ref/docs_html.md
@@ -0,0 +1,15 @@
+# HTML Styling API Reference
+
+See Source
+
+See Output
+
+<div><h1 class="uk-h1 text-4xl font-bold mt-12 mb-6">Hello, World!</h1><p class="text-lg leading-relaxed mb-6">This is a paragraph</p></div>
+
+[code]
+
+    def ex_applyclasses():
+        return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
+    
+[/code]
+
--- a/docs/vendor/monsterui/api_ref/docs_icons_images.md
+++ b/docs/vendor/monsterui/api_ref/docs_icons_images.md
@@ -0,0 +1,166 @@
+# Icons & Images API Reference
+
+# Avatars
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_dicebear():
+        return DivLAligned(
+            DiceBearAvatar('Isaac Flath',10,10),
+            DiceBearAvatar('Aaliyah',10,10),
+            DiceBearAvatar('Alyssa',10,10))
+    
+[/code]
+
+### DiceBearAvatar
+
+Source
+
+[code]
+
+    DiceBearAvatar(seed_name: str, h: int = 20, w: int = 20)
+[/code]
+
+> Creates an Avatar using https://dicebear.com/
+
+**Params**
+
+  * `seed_name` Seed name (ie 'Isaac Flath')
+
+  * `h` Height
+
+  * `w` Width
+
+# PlaceHolder Images
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_picsum():
+        return Grid(PicSumImg(100,100), PicSumImg(100,100, blur=6),PicSumImg(100,100, grayscale=True))
+    
+[/code]
+
+### PicSumImg
+
+Source
+
+[code]
+
+    PicSumImg(h: int = 200, w: int = 200, id: int = None, grayscale: bool = False, blur: int = None, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a placeholder image using https://picsum.photos/
+
+**Params**
+
+  * `h` Height in pixels
+
+  * `w` Width in pixels
+
+  * `id` Optional specific image ID to use
+
+  * `grayscale` Whether to return grayscale version
+
+  * `blur` Optional blur amount (1-10)
+
+  * `kwargs`
+
+**Returns:** Img tag with picsum image
+
+# Icons
+
+Icons use Lucide icons - you can find a full list of icons in their docs.
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_icon():
+        return Grid(
+            UkIcon('chevrons-right', height=15, width=15),
+            UkIcon('bug',            height=15, width=15),
+            UkIcon('phone-call',     height=15, width=15),
+            UkIcon('maximize-2',     height=15, width=15),
+            UkIcon('thumbs-up',      height=15, width=15),)        
+    
+[/code]
+
+### UkIcon
+
+Source
+
+[code]
+
+    UkIcon(icon: str, height: int = None, width: int = None, stroke_width: int = None, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates an icon using lucide icons
+
+**Params**
+
+  * `icon` Icon name from lucide icons
+
+  * `height`
+
+  * `width`
+
+  * `stroke_width` Thickness of lines
+
+  * `cls` Additional classes on the `Uk_icon` tag
+
+  * `kwargs`
+
+**Returns:** a lucide icon of the specified size
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_iconlink():
+        return DivLAligned(
+            UkIconLink('chevrons-right'),
+            UkIconLink('chevrons-right', button=True, cls=ButtonT.primary))
+    
+[/code]
+
+### UkIconLink
+
+Source
+
+[code]
+
+    UkIconLink(icon: str, height: int = None, width: int = None, stroke_width: int = None, cls=(), button: bool = False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates an icon link using lucide icons
+
+**Params**
+
+  * `icon` Icon name from lucide icons
+
+  * `height`
+
+  * `width`
+
+  * `stroke_width` Thickness of lines
+
+  * `cls` Additional classes on the icon
+
+  * `button` Whether to use a button (defaults to a link)
+
+  * `kwargs`
+
+**Returns:** a lucide icon button or link of the specified size
+
--- a/docs/vendor/monsterui/api_ref/docs_layout.md
+++ b/docs/vendor/monsterui/api_ref/docs_layout.md
@@ -0,0 +1,417 @@
+# Layout (Flex and Grid) API Reference
+
+This page covers `Grid`s, which are often used for general structure, `Flex` which is often used for layout of components that are not grid based, padding and positioning that can help you make your layout look good, and dividers that can help break up the page
+
+## Grid
+
+See Source
+
+See Output
+
+Column 1 Item 1
+
+Column 1 Item 2
+
+Column 1 Item 3
+
+Column 2 Item 1
+
+Column 2 Item 2
+
+Column 2 Item 3
+
+Column 3 Item 1
+
+Column 3 Item 2
+
+Column 3 Item 3
+
+[code]
+
+    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")))
+    
+[/code]
+
+### Grid
+
+Source
+
+[code]
+
+    Grid(*div, cols_min: int = 1, cols_max: int = 4, cols_sm: int = None, cols_md: int = None, cols_lg: int = None, cols_xl: int = None, cols: int = None, cls='gap-4', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a responsive grid layout with smart defaults based on content
+
+**Params**
+
+  * `div` `Div` components to put in the grid
+
+  * `cols_min` Minimum number of columns at any screen size
+
+  * `cols_max` Maximum number of columns allowed at any screen size
+
+  * `cols_sm` Number of columns on small screens
+
+  * `cols_md` Number of columns on medium screens
+
+  * `cols_lg` Number of columns on large screens
+
+  * `cols_xl` Number of columns on extra large screens
+
+  * `cols` Number of columns on all screens
+
+  * `cls` Additional classes on the grid (tip: `gap` provides spacing for grids)
+
+  * `kwargs`
+
+**Returns:** Responsive grid component
+
+#### Practical Grid Example
+
+See Source
+
+See Output
+
+#### Laptop
+
+$999
+
+Add to Cart
+
+#### Smartphone
+
+$599
+
+Add to Cart
+
+#### Headphones
+
+$199
+
+Add to Cart
+
+#### Smartwatch
+
+$299
+
+Add to Cart
+
+#### Tablet
+
+$449
+
+Add to Cart
+
+#### Camera
+
+$799
+
+Add to Cart
+
+[code]
+
+    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)
+    
+[/code]
+
+## Flex
+
+Play Flex Box Froggy to get an understanding of flex box.
+
+### DivFullySpaced
+
+Source
+
+[code]
+
+    DivFullySpaced(*c, cls='w-full', **kwargs)
+[/code]
+
+> Creates a flex div with it's components having as much space between them as possible
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Classes for outer div (`w-full` makes it use all available width)
+
+  * `kwargs`
+
+See Source
+
+See Output
+
+LeftCenterRight
+
+[code]
+
+    def ex_fully_spaced_div():
+        return DivFullySpaced(
+            Button("Left", cls=ButtonT.primary),
+            Button("Center", cls=ButtonT.secondary),
+            Button("Right", cls=ButtonT.destructive)
+        )
+    
+[/code]
+
+### DivCentered
+
+Source
+
+[code]
+
+    DivCentered(*c, cls='space-y-4', vstack=True, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a flex div with it's components centered in it
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Classes for outer div (`space-y-4` provides spacing between components)
+
+  * `vstack` Whether to stack the components vertically
+
+  * `kwargs`
+
+**Returns:** Div with components centered in it
+
+See Source
+
+See Output
+
+### Centered Title
+
+This content is centered both horizontally and vertically.
+
+[code]
+
+    def ex_centered_div():
+        return DivCentered(
+            H3("Centered Title"),
+            P("This content is centered both horizontally and vertically.")
+        )
+    
+[/code]
+
+### DivLAligned
+
+Source
+
+[code]
+
+    DivLAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a flex div with it's components aligned to the left
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Classes for outer div
+
+  * `kwargs`
+
+**Returns:** Div with components aligned to the left
+
+See Source
+
+See Output
+
+#### Left Aligned Title
+
+Some text that's left-aligned with the title and image.
+
+[code]
+
+    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.")
+        )
+    
+[/code]
+
+### DivRAligned
+
+Source
+
+[code]
+
+    DivRAligned(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a flex div with it's components aligned to the right
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Classes for outer div
+
+  * `kwargs`
+
+**Returns:** Div with components aligned to the right
+
+See Source
+
+See Output
+
+Action
+
+Right-aligned text
+
+[code]
+
+    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;")
+        )
+    
+[/code]
+
+### DivVStacked
+
+Source
+
+[code]
+
+    DivVStacked(*c, cls='space-y-4', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a flex div with it's components stacked vertically
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the div (tip: `space-y-4` provides spacing between components)
+
+  * `kwargs`
+
+**Returns:** Div with components stacked vertically
+
+See Source
+
+See Output
+
+## Vertical Stack
+
+First paragraph in the stack
+
+Second paragraph in the stack
+
+Action Button
+
+[code]
+
+    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)
+        )
+    
+[/code]
+
+### DivHStacked
+
+Source
+
+[code]
+
+    DivHStacked(*c, cls='space-x-4', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a flex div with it's components stacked horizontally
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the div (`space-x-4` provides spacing between components)
+
+  * `kwargs`
+
+**Returns:** Div with components stacked horizontally
+
+See Source
+
+See Output
+
+#### Column 1
+
+Content for column 1
+
+#### Column 2
+
+Content for column 2
+
+#### Column 3
+
+Content for column 3
+
+[code]
+
+    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"))
+        )
+    
+[/code]
+
+* * *
+
+### FlexT
+
+_Flexbox modifiers using Tailwind CSS_
+
+Option | Value | Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---|---|---  
+block | flex | inline | inline-flex | left | justify-start | center | justify-center  
+right | justify-end | between | justify-between | around | justify-around | stretch | items-stretch  
+top | items-start | middle | items-center | bottom | items-end | row | flex-row  
+row_reverse | flex-row-reverse | column | flex-col | column_reverse | flex-col-reverse | nowrap | flex-nowrap  
+wrap | flex-wrap | wrap_reverse | flex-wrap-reverse |  |  |  | 
+
--- a/docs/vendor/monsterui/api_ref/docs_lightbox.md
+++ b/docs/vendor/monsterui/api_ref/docs_lightbox.md
@@ -0,0 +1,99 @@
+# Lightbox API Reference
+
+See Source
+
+See Output
+
+Open
+
+[code]
+
+    def ex_lightbox1():
+        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='This is my super cool caption'),
+        )
+    
+[/code]
+
+See Source
+
+See Output
+
+Open
+
+[code]
+
+    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'),
+        )
+    
+[/code]
+
+See Source
+
+See Output
+
+mp4YoutubeVimeoIframe
+
+[code]
+
+    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'))
+    
+[/code]
+
+### LightboxContainer
+
+Source
+
+[code]
+
+    LightboxContainer(*lightboxitem, data_uk_lightbox='counter: true', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Lightbox container that will hold `LightboxItems`
+
+**Params**
+
+  * `lightboxitem` `LightBoxItem`s that will be inside lightbox
+
+  * `data_uk_lightbox` See https://franken-ui.dev/docs/2.0/lightbox for advanced options
+
+  * `kwargs`
+
+**Returns:** Lightbox
+
+### LightboxItem
+
+Source
+
+[code]
+
+    LightboxItem(*c, href, data_alt=None, data_caption=None, cls='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Anchor tag with appropriate structure to go inside a `LightBoxContainer`
+
+**Params**
+
+  * `c` Component that when clicked will open the lightbox (often a button)
+
+  * `href` Href to image, youtube video, vimeo, google maps, etc.
+
+  * `data_alt` Alt text for the lightbox item/image
+
+  * `data_caption` Caption for the item that shows below it
+
+  * `cls` Class for the A tag (often nothing or `uk-btn`)
+
+  * `kwargs`
+
+**Returns:** A(... href, data_alt, cls., ...)
+
--- a/docs/vendor/monsterui/api_ref/docs_lists.md
+++ b/docs/vendor/monsterui/api_ref/docs_lists.md
@@ -0,0 +1,67 @@
+# Lists API Reference
+
+See Source
+
+See Output
+
+#### disc List:
+
+  * Item 1
+  * Item 2
+
+#### circle List:
+
+  * Item 1
+  * Item 2
+
+#### square List:
+
+  * Item 1
+  * Item 2
+
+#### decimal List:
+
+  * Item 1
+  * Item 2
+
+#### hyphen List:
+
+  * Item 1
+  * Item 2
+
+#### bullet List:
+
+  * Item 1
+  * Item 2
+
+#### divider List:
+
+  * Item 1
+  * Item 2
+
+#### striped List:
+
+  * Item 1
+  * Item 2
+
+[code]
+
+    def ex_lists():
+        list_options = [(style,str(cls)) for style,cls in ListT.__members__.items()]
+        lists = [Div(H4(f"{style} List:"), Ul(Li("Item 1"), Li("Item 2"), cls=cls)) for style, cls in list_options]
+        return Grid(*lists)
+    
+[/code]
+
+* * *
+
+### ListT
+
+_List styles using Tailwind CSS_
+
+Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---  
+disc | list-disc list-inside | circle | list-[circle] list-inside | square | list-[square] list-inside  
+decimal | uk-list uk-list-decimal | hyphen | uk-list uk-list-hyphen | bullet | uk-list uk-list-bullet  
+divider | uk-list uk-list-divider | striped | uk-list uk-list-striped |  | 
+
--- a/docs/vendor/monsterui/api_ref/docs_loading.md
+++ b/docs/vendor/monsterui/api_ref/docs_loading.md
@@ -0,0 +1,61 @@
+# Loading Indicators API Reference
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_loading1():
+        return Loading()
+    
+[/code]
+
+See Source
+
+See Output
+
+[code]
+
+    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')
+    
+[/code]
+
+### Loading
+
+Source
+
+[code]
+
+    Loading(cls=(<LoadingT.bars: 'loading-bars'>, <LoadingT.lg: 'loading-large'>), htmx_indicator=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a loading animation component
+
+**Params**
+
+  * `cls` Classes for indicator (generally `LoadingT` options)
+
+  * `htmx_indicator` Add htmx-indicator class
+
+  * `kwargs`
+
+**Returns:** Span(cls=...)
+
+* * *
+
+### LoadingT
+
+__
+
+Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---  
+spinner | loading-spinner | dots | loading-dots | ring | loading-ring  
+ball | loading-ball | bars | loading-bars | infinity | loading-infinity  
+xs | loading-xsmall | sm | loading-small | md | loading-medium  
+lg | loading-large |  |  |  | 
+
--- a/docs/vendor/monsterui/api_ref/docs_markdown.md
+++ b/docs/vendor/monsterui/api_ref/docs_markdown.md
@@ -0,0 +1,146 @@
+# Markdown + automated HTML styling API Reference
+
+See Source
+
+See Output
+
+# Example Markdown
+
+  * With **bold** and _italics_
+  * With a link
+
+### 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)
+
+[code]
+
+    def add(a, b):
+        return a + b
+    
+[/code]
+
+[code]
+
+    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)
+    
+[/code]
+
+You can overwrite the default styling for markdown rendering with your own css classes with `class_map
+
+See Source
+
+See Output
+
+With custom **bold** style
+
+> But no extra quote style because class_map overrides all default styled
+[code]
+
+    def ex_markdown2():
+        md = '''With custom **bold** style\n\n > But no extra quote style because class_map overrides all default styled'''
+        return render_md(md, class_map={'b': 'text-red-500'})
+    
+[/code]
+
+You can modify the default styling for markdown rendering with your own css classes with `class_map_mods
+
+See Source
+
+See Output
+
+With custom **bold** style
+
+> But default quote style because class_map_mods replaces sepecified styles and leaves the rest as default
+[code]
+
+    def ex_markdown3():
+        md = '''With custom **bold** style\n\n > But default  quote style because class_map_mods replaces sepecified styles and leaves the rest as default'''
+        return render_md(md, class_map_mods={'b': 'text-red-500'})
+    
+[/code]
+
+This uses the `apply_classes` function, which can be used to apply classes to html strings. This is useful for applying styles to any html you get from an external source.
+
+See Source
+
+See Output
+
+<div><h1 class="uk-h1 text-4xl font-bold mt-12 mb-6">Hello, World!</h1><p class="text-lg leading-relaxed mb-6">This is a paragraph</p></div>
+
+[code]
+
+    def ex_applyclasses():
+        return apply_classes('<h1>Hello, World!</h1><p>This is a paragraph</p>')
+    
+[/code]
+
+One common external source is a markdown renderer. MonsterUI uses tailwind css for styling so you don't get any styling without specifying classes, `apply_classes` can do that for you.
+
+See Source
+
+See Output
+
+# Hi
+
+a link
+
+[code]
+
+    def ex_applyclasses2():
+        from mistletoe import markdown, HTMLRenderer
+        md = markdown('# Hi\n[a link](www.google.com)', renderer=HTMLRenderer)
+        return Safe(apply_classes(md))
+    
+[/code]
+
+### apply_classes
+
+Source
+
+[code]
+
+    apply_classes(html_str: str, class_map=None, class_map_mods=None) -> str
+[/code]
+
+> Apply classes to html string
+
+**Params**
+
+  * `html_str` Html string
+
+  * `class_map` Class map
+
+  * `class_map_mods` Class map that will modify the class map map (for small changes to base map)
+
+**Returns:** Html string with classes applied
+
--- a/docs/vendor/monsterui/api_ref/docs_modals.md
+++ b/docs/vendor/monsterui/api_ref/docs_modals.md
@@ -0,0 +1,215 @@
+# Modals API Reference
+
+### Example Modal
+
+See Source
+
+See Output
+
+Open Modal
+
+## Simple Test Modal
+
+With some somewhat brief content to show that it works!
+
+Close
+
+[code]
+
+    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'))
+    
+[/code]
+
+### Modal
+
+Source
+
+[code]
+
+    Modal(*c, header=None, footer=None, cls=(), dialog_cls=(), header_cls='p-6', body_cls='space-y-6', footer_cls=(), id='', open=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you
+
+**Params**
+
+  * `c` Components to put in the `ModalBody` (often forms, sign in buttons, images, etc.)
+
+  * `header` Components that go in the `ModalHeader` (often a `ModalTitle`)
+
+  * `footer` Components that go in the `ModalFooter` (often a `ModalCloseButton`)
+
+  * `cls` Additional classes on the outermost `ModalContainer`
+
+  * `dialog_cls` Additional classes on the `ModalDialog`
+
+  * `header_cls` Additional classes on the `ModalHeader`
+
+  * `body_cls` Additional classes on the `ModalBody`
+
+  * `footer_cls` Additional classes on the `ModalFooter`
+
+  * `id` id for the outermost container
+
+  * `open` Whether the modal is open (typically used for HTMX controlled modals)
+
+  * `kwargs`
+
+**Returns:** Fully styled modal FT Component
+
+### ModalCloseButton
+
+Source
+
+[code]
+
+    ModalCloseButton(*c, cls='absolute top-3 right-3', htmx=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a button that closes a modal with js
+
+**Params**
+
+  * `c` Components to put in the button (often text and/or an icon)
+
+  * `cls` Additional classes on the button
+
+  * `htmx` Whether to use HTMX to close the modal (must add hx_get to a route that closes the modal)
+
+  * `kwargs`
+
+**Returns:** Button(..., cls='uk-modal-close') + `hx_target` and `hx_swap` if htmx is True
+
+The remainder of the Modal functions below are used internally by the `Modal` function for you. You shouldn't need to use them unless you're doing something really special.
+
+### ModalTitle
+
+Source
+
+[code]
+
+    ModalTitle(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal title
+
+**Params**
+
+  * `c` Components to put in the `ModalTitle` (often text)
+
+  * `cls` Additional classes on the `ModalTitle`
+
+  * `kwargs`
+
+**Returns:** H2(..., cls='uk-modal-title')
+
+### ModalFooter
+
+Source
+
+[code]
+
+    ModalFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal footer
+
+**Params**
+
+  * `c` Components to put in the `ModalFooter` (often buttons)
+
+  * `cls` Additional classes on the `ModalFooter`
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-modal-footer')
+
+### ModalBody
+
+Source
+
+[code]
+
+    ModalBody(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal body
+
+**Params**
+
+  * `c` Components to put in the `ModalBody` (often forms, sign in buttons, images, etc.)
+
+  * `cls` Additional classes on the `ModalBody`
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-modal-body')
+
+### ModalHeader
+
+Source
+
+[code]
+
+    ModalHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal header
+
+**Params**
+
+  * `c` Components to put in the `ModalHeader`
+
+  * `cls` Additional classes on the `ModalHeader`
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-modal-header')
+
+### ModalDialog
+
+Source
+
+[code]
+
+    ModalDialog(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal dialog
+
+**Params**
+
+  * `c` Components to put in the `ModalDialog` (often `ModalBody`, `ModalHeader`, etc)
+
+  * `cls` Additional classes on the `ModalDialog`
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-modal-dialog')
+
+### ModalContainer
+
+Source
+
+[code]
+
+    ModalContainer(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a modal container that components go in
+
+**Params**
+
+  * `c` Components to put in the modal (often `ModalDialog`)
+
+  * `cls` Additional classes on the `ModalContainer`
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-modal uk-modal-container')
+
--- a/docs/vendor/monsterui/api_ref/docs_navigation.md
+++ b/docs/vendor/monsterui/api_ref/docs_navigation.md
@@ -0,0 +1,412 @@
+# Navigation (Nav, NavBar, Tabs, etc.) API Reference
+
+# Nav, NavBar, DowDownNav, and Tab examples
+
+* * *
+
+## Nav
+
+See Source
+
+See Output
+
+  * Option 1
+  * Option 2
+  * Option 3
+
+[code]
+
+    def ex_nav1():
+        mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
+        return NavContainer(*mbrs1)
+    
+[/code]
+
+See Source
+
+See Output
+
+  * NavHeaderLi
+  * Option 1
+  * Option 2
+  * Option 3
+  * Subtitle Ex 
+
+NavSubtitle text to be shown
+
+  *   * Parent Name
+    * Child 1
+    * Child 2
+    * Child 3
+
+[code]
+
+    def ex_nav2():
+        mbrs1 = [Li(A('Option 1'), cls='uk-active'), Li(A('Option 2')), Li(A('Option 3'))]
+        mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))]
+    
+        return NavContainer(
+            NavHeaderLi("NavHeaderLi"),
+            *mbrs1,
+            Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))),
+            NavDividerLi(),
+            NavParentLi(
+                A('Parent Name'),
+                NavContainer(*mbrs2,parent=False),
+                 ),
+        )
+    
+[/code]
+
+## Navbars
+
+Fully responsive simple navbar using the high level API. This will collapse to a hamburger menu on mobile devices. See the Scrollspy example for a more complex navbar example.
+
+See Source
+
+See Output
+
+### My Blog
+
+Page1Page2Page3
+
+Page1Page2Page3
+
+[code]
+
+    def ex_navbar1():
+        return NavBar(A("Page1",href='/rt1'),
+                      A("Page2",href='/rt2'),
+                      A("Page3",href='/rt3'),
+                      brand=H3('My Blog'))
+    
+[/code]
+
+See Source
+
+See Output
+
+Page1Page2
+
+Page1Page2
+
+[code]
+
+    def ex_navbar2():    
+        return NavBar(
+            A(Input(placeholder='search')), 
+            A(UkIcon("rocket")), 
+            A('Page1',href='/rt1'), 
+            A("Page2", href='/rt3'),
+            brand=DivLAligned(Img(src='/api_reference/logo.svg'),UkIcon('rocket',height=30,width=30)))
+    
+[/code]
+
+## Drop Down Navs
+
+See Source
+
+See Output
+
+Open DropDown
+
+  * Item 1
+  * Item 2
+
+[code]
+
+    def ex_navdrop():
+        return Div(
+            Button("Open DropDown"),
+            DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href='')))))
+    
+[/code]
+
+## Tabs
+
+See Source
+
+See Output
+
+  * Active
+  * Item
+  * Item
+  * Disabled
+
+[code]
+
+    def ex_tabs2():
+        return Container(
+            TabContainer(
+                Li(A("Active",href='javascript:void(0);', cls='uk-active')),
+                Li(A("Item",href='javascript:void(0);')),
+                Li(A("Item",href='javascript:void(0);')),
+                Li(A("Disabled", cls='uk-disabled'))))
+    
+[/code]
+
+A tabs can use any method of navigation (htmx, or href). However, often these are use in conjunction with switchers do to this client side
+
+See Source
+
+See Output
+
+  * Active
+  * Item
+  * Item
+  * Disabled
+
+  * # Tab 1
+
+  * # Tab 2
+
+  * # Tab 3
+
+[code]
+
+    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"))))
+    
+[/code]
+
+# API Docs
+
+### NavBar
+
+Source
+
+[code]
+
+    NavBar(*c, brand=h3(('Title',),{'class': 'uk-h3 '}), right_cls='items-center space-x-4', mobile_cls='space-y-4', sticky: bool = False, uk_scrollspy_nav: bool | str = False, cls='p-4', scrollspy_cls=<ScrollspyT.underline: 'navbar-underline'>, menu_id=None) -> fastcore.xml.FT
+[/code]
+
+> Creates a responsive navigation bar with mobile menu support
+
+**Params**
+
+  * `c` Component for right side of navbar (Often A tag links)
+
+  * `brand` Brand/logo component for left side
+
+  * `right_cls` Spacing for desktop links
+
+  * `mobile_cls` Spacing for mobile links
+
+  * `sticky` Whether to stick to the top of the page while scrolling
+
+  * `uk_scrollspy_nav` Whether to use scrollspy for navigation
+
+  * `cls` Classes for navbar
+
+  * `scrollspy_cls` Scrollspy class (usually ScrollspyT.*)
+
+  * `menu_id` ID for menu container (used for mobile toggle)
+
+**Returns:** Responsive NavBar
+
+### TabContainer
+
+Source
+
+[code]
+
+    TabContainer(*li, cls='', alt=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A TabContainer where children will be different tabs
+
+**Params**
+
+  * `li` Components
+
+  * `cls` Additional classes on the `Ul`
+
+  * `alt` Whether to use an alternative tab style
+
+  * `kwargs`
+
+**Returns:** Tab container
+
+### NavContainer
+
+Source
+
+[code]
+
+    NavContainer(*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True, uk_nav=False, uk_scrollspy_nav=False, sticky=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a navigation container (useful for creating a sidebar navigation). A Nav is a list (NavBar is something different)
+
+**Params**
+
+  * `li` List items are navigation elements (Special `Li` such as `NavParentLi`, `NavDividerLi`, `NavHeaderLi`, `NavSubtitle`, `NavCloseLi` can also be used)
+
+  * `cls` Additional classes on the nav
+
+  * `parent` Whether this nav is a _parent_ or _sub_ nav
+
+  * `uk_nav` True for default collapsible behavior, see frankenui docs for more advanced options
+
+  * `uk_scrollspy_nav` Activates scrollspy linking each item `A` tags `href` to content's `id` attribute
+
+  * `sticky` Whether to stick to the top of the page while scrolling
+
+  * `kwargs`
+
+**Returns:** FT Component that is a list of `Li` styled for a sidebar navigation menu
+
+* * *
+
+### NavT
+
+__
+
+Option | Value | Option | Value  
+---|---|---|---  
+default | uk-nav-default | primary | uk-nav-primary  
+secondary | uk-nav-secondary |  |   
+  
+### NavCloseLi
+
+Source
+
+[code]
+
+    NavCloseLi(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a navigation list item with a close button
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the li
+
+  * `kwargs`
+
+**Returns:** Navigation list item with a close button
+
+### NavSubtitle
+
+Source
+
+[code]
+
+    NavSubtitle(*c, cls=<TextPresets.muted_sm: 'text-gray-500 dark:text-gray-200 text-sm'>, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a navigation subtitle
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the div
+
+  * `kwargs`
+
+**Returns:** Navigation subtitle
+
+### NavHeaderLi
+
+Source
+
+[code]
+
+    NavHeaderLi(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a navigation list item with a header
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the li
+
+  * `kwargs`
+
+**Returns:** Navigation list item with a header
+
+### NavDividerLi
+
+Source
+
+[code]
+
+    NavDividerLi(*c, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a navigation list item with a divider
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the li
+
+  * `kwargs`
+
+**Returns:** Navigation list item with a divider
+
+### NavParentLi
+
+Source
+
+[code]
+
+    NavParentLi(*nav_container, cls=(), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a navigation list item with a parent nav for nesting
+
+**Params**
+
+  * `nav_container` `NavContainer` container for a nested nav with `parent=False`)
+
+  * `cls` Additional classes on the li
+
+  * `kwargs`
+
+**Returns:** Navigation list item
+
+### DropDownNavContainer
+
+Source
+
+[code]
+
+    DropDownNavContainer(*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True, uk_nav=False, uk_dropdown=True, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> A Nav that is part of a DropDown
+
+**Params**
+
+  * `li` Components
+
+  * `cls` Additional classes on the nav
+
+  * `parent` Whether to use a parent nav
+
+  * `uk_nav` True for default collapsible behavior, see https://franken-ui.dev/docs/nav#component-options for more advanced options
+
+  * `uk_dropdown` Whether to use a dropdown
+
+  * `kwargs`
+
+**Returns:** DropDown nav container
+
--- a/docs/vendor/monsterui/api_ref/docs_notifications.md
+++ b/docs/vendor/monsterui/api_ref/docs_notifications.md
@@ -0,0 +1,167 @@
+# Alerts & Toasts API Reference
+
+### Alerts
+
+The simplest alert is a div wrapped with a span:
+
+See Source
+
+See Output
+
+This is a plain alert
+
+[code]
+
+    def ex_alerts1(): return Alert("This is a plain alert")
+    
+[/code]
+
+Alert colors are defined by the alert styles:
+
+See Source
+
+See Output
+
+Your purchase has been confirmed!
+
+[code]
+
+    def ex_alerts2(): return Alert("Your purchase has been confirmed!", cls=AlertT.success)
+    
+[/code]
+
+It often looks nice to use icons in alerts:
+
+See Source
+
+See Output
+
+Please enter a valid email.
+
+[code]
+
+    def ex_alerts3():
+        return Alert(
+            DivLAligned(UkIcon('triangle-alert'), 
+                        P("Please enter a valid email.")),
+            cls=AlertT.error)
+    
+[/code]
+
+### Alert
+
+Source
+
+[code]
+
+    Alert(*c, cls='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Alert informs users about important events.
+
+**Params**
+
+  * `c` Content for Alert (often text and/or icon)
+
+  * `cls` Class for the alert (often an `AlertT` option)
+
+  * `kwargs`
+
+**Returns:** Div(Span(...), cls='alert', role='alert')
+
+* * *
+
+### AlertT
+
+_Alert styles from DaisyUI_
+
+Option | Value | Option | Value  
+---|---|---|---  
+info | alert-info | success | alert-success  
+warning | alert-warning | error | alert-error  
+  
+* * *
+
+### Toasts
+
+To define a toast with a particular location, add horizontal or vertical toast type classes:
+
+See Source
+
+See Output
+
+First Example Toast
+
+[code]
+
+    def ex_toasts1():
+        return Toast("First Example Toast", cls=(ToastHT.start, ToastVT.bottom), dur=300)
+    
+[/code]
+
+To define toast colors, set the class of the alert wrapped by the toast:
+
+See Source
+
+See Output
+
+Second Example Toast
+
+[code]
+
+    def ex_toasts2():
+        return Toast("Second Example Toast", alert_cls=AlertT.info, dur=300)
+    
+[/code]
+
+Toasts will disappear automatically after 5 seconds. To change the duration of the toast set the `dur` param like this `Toast('Content', dur=10)`.
+
+Here's a demo app showing how to trigger a toast.
+
+### Toast
+
+Source
+
+[code]
+
+    Toast(*c, cls='', alert_cls='', dur=5.0, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Toasts are stacked announcements, positioned on the corner of page.
+
+**Params**
+
+  * `c` Content for toast (often test)
+
+  * `cls` Classes for toast (often `ToastHT` and `ToastVT` options)
+
+  * `alert_cls` classes for altert (often `AlertT` options)
+
+  * `dur` no. of seconds before the toast disappears
+
+  * `kwargs`
+
+**Returns:** Div(Alert(...), cls='toast')
+
+* * *
+
+### ToastHT
+
+_Horizontal position for Toast_
+
+Option | Value | Option | Value  
+---|---|---|---  
+start | toast-start | center | toast-center  
+end | toast-end |  |   
+  
+* * *
+
+### ToastVT
+
+_Vertical position for Toast_
+
+Option | Value | Option | Value  
+---|---|---|---  
+top | toast-top | middle | toast-middle  
+bottom | toast-bottom |  | 
+
--- a/docs/vendor/monsterui/api_ref/docs_sliders.md
+++ b/docs/vendor/monsterui/api_ref/docs_sliders.md
@@ -0,0 +1,219 @@
+# Carousel Sliders API Reference
+
+Here is a simple example of a slider:
+
+See Source
+
+See Output
+
+[code]
+
+    def ex_sliders_1():
+        return Slider(*[Img(src=f'https://picsum.photos/200/200?random={i}') for i in range(10)])
+    
+[/code]
+
+Here is a slider with cards:
+
+See Source
+
+See Output
+
+### Card 0
+
+Card 0 content
+
+### Card 1
+
+Card 1 content
+
+### Card 2
+
+Card 2 content
+
+### Card 3
+
+Card 3 content
+
+### Card 4
+
+Card 4 content
+
+### Card 5
+
+Card 5 content
+
+### Card 6
+
+Card 6 content
+
+### Card 7
+
+Card 7 content
+
+### Card 8
+
+Card 8 content
+
+### Card 9
+
+Card 9 content
+
+[code]
+
+    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)])
+    
+[/code]
+
+Here is a slider with cards and autoplay:
+
+See Source
+
+See Output
+
+### Card 0
+
+Card 0 content
+
+### Card 1
+
+Card 1 content
+
+### Card 2
+
+Card 2 content
+
+### Card 3
+
+Card 3 content
+
+### Card 4
+
+Card 4 content
+
+### Card 5
+
+Card 5 content
+
+### Card 6
+
+Card 6 content
+
+### Card 7
+
+Card 7 content
+
+### Card 8
+
+Card 8 content
+
+### Card 9
+
+Card 9 content
+
+[code]
+
+    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')
+    
+[/code]
+
+Typically you want to use the `Slider` component, but if you need more control you can use the `SliderContainer`, `SliderItems`, and `SliderNav` components.
+
+### Slider
+
+Source
+
+[code]
+
+    Slider(*c, cls='', items_cls='gap-4', nav=True, nav_cls='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a slider with optional navigation arrows
+
+**Params**
+
+  * `c` Items to show in slider
+
+  * `cls` Classes for slider container
+
+  * `items_cls` Classes for items container
+
+  * `nav` Whether to show navigation arrows
+
+  * `nav_cls` Classes for navigation arrows
+
+  * `kwargs`
+
+**Returns:** SliderContainer(SliderItems(..., cls='gap-4'), SliderNav?)
+
+### SliderContainer
+
+Source
+
+[code]
+
+    SliderContainer(*c, cls='', uk_slider=True, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a slider container
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes on the container
+
+  * `uk_slider` See FrankenUI Slider docs for more options
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='relative', uk_slider=True, ...)
+
+### SliderItems
+
+Source
+
+[code]
+
+    SliderItems(*c, cls='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a slider items container
+
+**Params**
+
+  * `c` Components
+
+  * `cls` Additional classes for the items
+
+  * `kwargs`
+
+**Returns:** Div(..., cls='uk-slider-items uk-grid', ...)
+
+### SliderNav
+
+Source
+
+[code]
+
+    SliderNav(cls='uk-position-small uk-hidden-hover', prev_cls='absolute left-0 top-1/2 -translate-y-1/2', next_cls='absolute right-0 top-1/2 -translate-y-1/2', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Navigation arrows for Slider component
+
+**Params**
+
+  * `cls` Additional classes for the navigation
+
+  * `prev_cls` Additional classes for the previous navigation
+
+  * `next_cls` Additional classes for the next navigation
+
+  * `kwargs`
+
+**Returns:** Left and right navigation arrows for Slider component
+
--- a/docs/vendor/monsterui/api_ref/docs_steps.md
+++ b/docs/vendor/monsterui/api_ref/docs_steps.md
@@ -0,0 +1,112 @@
+# Steps API Reference
+
+See Source
+
+See Output
+
+  * Account Created
+  * Profile Setup
+  * Verification
+
+[code]
+
+    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")
+    
+[/code]
+
+See Source
+
+See Output
+
+  * Project Planning
+  * Design Phase
+  * Development
+  * Testing
+  * Deployment
+
+[code]
+
+    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]"))
+    
+[/code]
+
+# API Docs
+
+### Steps
+
+Source
+
+[code]
+
+    Steps(*li, cls='', **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a steps container
+
+**Params**
+
+  * `li` Each `Li` represent a step (generally use `LiStep`)
+
+  * `cls` class for Steps (generally a `StepsT` option)
+
+  * `kwargs`
+
+**Returns:** Ul(..., cls='steps')
+
+* * *
+
+### StepsT
+
+_Options for Steps_
+
+Option | Value | Option | Value  
+---|---|---|---  
+vertical | steps-vertical | horizonal | steps-horizonal  
+  
+### LiStep
+
+Source
+
+[code]
+
+    LiStep(*c, cls='', data_content=None, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a step list item
+
+**Params**
+
+  * `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`
+
+**Returns:** Li(..., cls='step')
+
+* * *
+
+### StepT
+
+_Step styles for LiStep_
+
+Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---  
+primary | step-primary | secondary | step-secondary | accent | step-accent  
+info | step-info | success | step-success | warning | step-warning  
+error | step-error | neutral | step-neutral |  | 
+
--- a/docs/vendor/monsterui/api_ref/docs_tables.md
+++ b/docs/vendor/monsterui/api_ref/docs_tables.md
@@ -0,0 +1,237 @@
+# Tables API Reference
+
+See Source
+
+See Output
+
+Name | Age | City  
+---|---|---  
+Alice | 25 | New York  
+Bob | 30 | San Francisco  
+Charlie | 35 | London  
+Total | 90
+[code]
+
+    def ex_tables0():
+        return Table(
+            Thead(Tr(Th('Name'),    Th('Age'), Th('City'))),
+            Tbody(Tr(Td('Alice'),   Td('25'),  Td('New York')),
+                  Tr(Td('Bob'),     Td('30'),  Td('San Francisco')),
+                  Tr(Td('Charlie'), Td('35'),  Td('London'))),
+            Tfoot(Tr(Td('Total'),   Td('90'))))
+    
+[/code]  
+  
+See Source
+
+See Output
+
+Name | Age | City  
+---|---|---  
+Alice | 25 | New York  
+Bob | 30 | San Francisco  
+Charlie | 35 | London  
+Total | 90
+[code]
+
+    def ex_tables1():
+        header =  ['Name',    'Age', 'City']
+        body   = [['Alice',   '25',  'New York'],
+                  ['Bob',     '30',  'San Francisco'],
+                  ['Charlie', '35',  'London']]
+        footer =  ['Total',   '90']
+        return TableFromLists(header, body, footer)
+    
+[/code]  
+  
+See Source
+
+See Output
+
+NAME | AGE | CITY  
+---|---|---  
+Alice | 30 years | New York  
+Bob | 25 years | London
+[code]
+
+    def ex_tables2():
+        def body_render(k, v):
+            match k.lower():
+                case 'name': return Td(v, cls='font-bold')
+                case 'age':  return Td(f"{v} years")
+                case _:      return Td(v)
+    
+        header_data = ['Name',          'Age',     'City']
+        body_data   =[{'Name': 'Alice', 'Age': 30, 'City': 'New York'},
+                      {'Name': 'Bob',   'Age': 25, 'City': 'London'}]
+    
+        return TableFromDicts(header_data, body_data, 
+            header_cell_render=lambda v: Th(v.upper()), 
+            body_cell_render=body_render)
+    
+[/code]  
+  
+### Table
+
+Source
+
+[code]
+
+    Table(*c, cls=(<TableT.middle: 'uk-table-middle'>, <TableT.divider: 'uk-table-divider'>, <TableT.hover: 'uk-table-hover'>, <TableT.sm: 'uk-table-sm'>), **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a table
+
+**Params**
+
+  * `c` Components (typically `Thead`, `Tbody`, `Tfoot`)
+
+  * `cls` Additional classes on the table
+
+  * `kwargs`
+
+**Returns:** Table component
+
+### TableFromLists
+
+Source
+
+[code]
+
+    TableFromLists(header_data: Sequence, body_data: Sequence[Sequence], footer_data=None, header_cell_render=<function Th at 0x752645f859e0>, body_cell_render=<function Td at 0x752645f85940>, footer_cell_render=<function Td at 0x752645f85940>, cls=(<TableT.middle: 'uk-table-middle'>, <TableT.divider: 'uk-table-divider'>, <TableT.hover: 'uk-table-hover'>, <TableT.sm: 'uk-table-sm'>), sortable=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a Table from a list of header data and a list of lists of body data
+
+**Params**
+
+  * `header_data` List of header data
+
+  * `body_data` List of lists of body data
+
+  * `footer_data` List of footer data
+
+  * `header_cell_render` Function(content) -> FT that renders header cells
+
+  * `body_cell_render` Function(key, content) -> FT that renders body cells
+
+  * `footer_cell_render` Function(key, content) -> FT that renders footer cells
+
+  * `cls` Additional classes on the table
+
+  * `sortable` Whether to use sortable table
+
+  * `kwargs`
+
+**Returns:** Table from lists
+
+### TableFromDicts
+
+Source
+
+[code]
+
+    TableFromDicts(header_data: Sequence, body_data: Sequence[dict], footer_data=None, header_cell_render=<function Th at 0x752645f859e0>, body_cell_render=<function <lambda> at 0x752645f85b20>, footer_cell_render=<function <lambda> at 0x752645f85bc0>, cls=(<TableT.middle: 'uk-table-middle'>, <TableT.divider: 'uk-table-divider'>, <TableT.hover: 'uk-table-hover'>, <TableT.sm: 'uk-table-sm'>), sortable=False, **kwargs) -> fastcore.xml.FT
+[/code]
+
+> Creates a Table from a list of header data and a list of dicts of body data
+
+**Params**
+
+  * `header_data` List of header data
+
+  * `body_data` List of dicts of body data
+
+  * `footer_data` List of footer data
+
+  * `header_cell_render` Function(content) -> FT that renders header cells
+
+  * `body_cell_render` Function(key, content) -> FT that renders body cells
+
+  * `footer_cell_render` Function(key, content) -> FT that renders footer cells
+
+  * `cls` Additional classes on the table
+
+  * `sortable` Whether to use sortable table
+
+  * `kwargs`
+
+**Returns:** Styled Table
+
+* * *
+
+### TableT
+
+__
+
+Option | Value | Option | Value | Option | Value  
+---|---|---|---|---|---  
+divider | uk-table-divider | striped | uk-table-striped | hover | uk-table-hover  
+sm | uk-table-sm | lg | uk-table-lg | justify | uk-table-justify  
+middle | uk-table-middle | responsive | uk-table-responsive |  |   
+  
+### Tbody
+
+Source
+
+[code]
+
+    Tbody(*rows, cls=(), sortable=False, **kwargs)
+[/code]
+
+> **Params**
+
+  * `rows`
+
+  * `cls`
+
+  * `sortable`
+
+  * `kwargs`
+
+### Th
+
+Source
+
+[code]
+
+    Th(*c, cls=(), shrink=False, expand=False, small=False)
+[/code]
+
+> **Params**
+
+  * `c` Components that go in the cell
+
+  * `cls` Additional classes on the cell container
+
+  * `shrink` Whether to shrink the cell
+
+  * `expand` Whether to expand the cell
+
+  * `small` Whether to use a small table
+
+**Returns:** Table cell
+
+### Td
+
+Source
+
+[code]
+
+    Td(*c, cls=(), shrink=False, expand=False, small=False)
+[/code]
+
+> **Params**
+
+  * `c` Components that go in the cell
+
+  * `cls` Additional classes on the cell container
+
+  * `shrink` Whether to shrink the cell
+
+  * `expand` Whether to expand the cell
+
+  * `small` Whether to use a small table
+
+**Returns:** Table cell
+
--- a/docs/vendor/monsterui/api_ref/docs_theme_headers.md
+++ b/docs/vendor/monsterui/api_ref/docs_theme_headers.md
@@ -0,0 +1,248 @@
+# Theme and Headers API Reference
+
+To get headers with a default theme use `hdrs=Theme.<color>.headers()`. For example for the blue theme you would use `hdrs=Theme.blue.headers()`. The theme integrated together different frameworks and allows tailwind, FrankenUI, HighlighJS, and DaisyUI components to work well together.
+
+Tailwind, FrankenUI and DaisyUI are imported by default. You must use DaisyUI headers to use anything in the `daisy` module, and FrankenUI headers to use anything in the `franken` module.
+
+HighlightJS is not added by default, but you can add it by setting `highlightjs=True` in the headers function. The `render_md` function will use HighlightJS for code blocks.
+
+Theme options are:
+
+Theme.slate
+
+Theme.stone
+
+Theme.gray
+
+Theme.neutral
+
+Theme.red
+
+Theme.rose
+
+Theme.orange
+
+Theme.green
+
+Theme.blue
+
+Theme.yellow
+
+Theme.violet
+
+Theme.zinc
+
+### Theme Picker
+
+See Source
+
+See Output
+
+ZincSlateStoneGrayNeutralRedRoseOrangeGreenBlueYellowVioletNoneSmallMediumLargeNoneSmallMediumLargeSmallDefaultLightDark
+
+[code]
+
+    def ex_theme_switcher():
+        return ThemePicker()
+    
+[/code]
+
+### ThemePicker
+
+Source
+
+[code]
+
+    ThemePicker(color=True, radii=True, shadows=True, font=True, mode=True, cls='p-4', custom_themes=[])
+[/code]
+
+> Theme picker component with configurable sections
+
+**Params**
+
+  * `color`
+
+  * `radii`
+
+  * `shadows`
+
+  * `font`
+
+  * `mode`
+
+  * `cls`
+
+  * `custom_themes`
+
+### Custom Themes
+
+  1. You can use this theme as a starting point.
+  2. Add the theme to your headers as a link like this `Link(rel="stylesheet", href="/custom_theme.css", type="text/css")`
+  3. Then add the theme to the `ThemePicker` component. For example `ThemePicker(custom_themes=[('Grass', '#10b981')])`
+
+Themes are controlled with `bg-background text-foreground` classes on the `Body` tag. `fast_app` and `FastHTML` will do this for you automatically so you typically do not have to do anything
+
+### fast_app
+
+Source
+
+[code]
+
+    fast_app(*args, pico=False, db_file: Optional[str] = None, render: Optional[<built-in function callable>] = 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[<built-in function callable>] = None, on_shutdown: Optional[<built-in function callable>] = None, lifespan: Optional[<built-in function callable>] = 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: <built-in function callable> = <function noop_body at 0x7526eba6fce0>, nb_hdrs: bool = False)
+[/code]
+
+> Create a FastHTML or FastHTMLWithLiveReload app with `bg-background text-foreground` to bodykw for frankenui themes
+
+**Params**
+
+  * `db_file` Database file name, if needed
+
+  * `render` Function used to render default database class
+
+  * `hdrs` Additional FT elements to add to 
+
+  * `ftrs` Additional FT elements to add to end of 
+
+  * `tbls` Experimental mapping from DB table names to dict table definitions
+
+  * `before` Functions to call prior to calling handler
+
+  * `middleware` Standard Starlette middleware
+
+  * `live` Enable live reloading
+
+  * `debug` Passed to Starlette, indicating if debug tracebacks should be returned on errors
+
+  * `title` Default page title
+
+  * `routes` Passed to Starlette
+
+  * `exception_handlers` Passed to Starlette
+
+  * `on_startup` Passed to Starlette
+
+  * `on_shutdown` Passed to Starlette
+
+  * `lifespan` Passed to Starlette
+
+  * `default_hdrs` Include default FastHTML headers such as HTMX script?
+
+  * `pico` Include PicoCSS header?
+
+  * `surreal` Include surreal.js/scope headers?
+
+  * `htmx` Include HTMX header?
+
+  * `exts` HTMX extension names to include
+
+  * `canonical` Automatically include canonical link?
+
+  * `secret_key` Signing key for sessions
+
+  * `key_fname` Session cookie signing key file name
+
+  * `session_cookie` Session cookie name
+
+  * `max_age` Session cookie expiry time
+
+  * `sess_path` Session cookie path
+
+  * `same_site` Session cookie same site policy
+
+  * `sess_https_only` Session cookie HTTPS only?
+
+  * `sess_domain` Session cookie domain
+
+  * `htmlkw` Attrs to add to the HTML tag
+
+  * `bodykw` Attrs to add to the Body tag
+
+  * `reload_attempts` Number of reload attempts when live reloading
+
+  * `reload_interval` Time between reload attempts in ms
+
+  * `static_path` Where the static file route points to, defaults to root dir
+
+  * `body_wrap` FT wrapper for body contents
+
+  * `nb_hdrs` If in notebook include headers inject headers in notebook DOM?
+
+  * `args`
+
+### FastHTML
+
+Source
+
+[code]
+
+    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=<class 'starlette.middleware.sessions.SessionMiddleware'>, 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=<function noop_body at 0x7526eba6fce0>, htmlkw=None, nb_hdrs=False, canonical=True)
+[/code]
+
+> Create a FastHTML app and adds `bg-background text-foreground` to bodykw for frankenui themes
+
+**Params**
+
+  * `debug`
+
+  * `routes`
+
+  * `middleware`
+
+  * `title`
+
+  * `exception_handlers`
+
+  * `on_startup`
+
+  * `on_shutdown`
+
+  * `lifespan`
+
+  * `hdrs`
+
+  * `ftrs`
+
+  * `exts`
+
+  * `before`
+
+  * `after`
+
+  * `surreal`
+
+  * `htmx`
+
+  * `default_hdrs`
+
+  * `sess_cls`
+
+  * `secret_key`
+
+  * `session_cookie`
+
+  * `max_age`
+
+  * `sess_path`
+
+  * `same_site`
+
+  * `sess_https_only`
+
+  * `sess_domain`
+
+  * `key_fname`
+
+  * `body_wrap`
+
+  * `htmlkw`
+
+  * `nb_hdrs`
+
+  * `canonical`
+
+  * `args`
+
+  * `pico`
+
+> Users have said this site is helpful in creating your own themes.
+
--- a/docs/vendor/monsterui/api_ref/docs_typography.md
+++ b/docs/vendor/monsterui/api_ref/docs_typography.md