MonsterUI Documentation

To create a basic MonsterUI application, import the necessary modules, select a theme color, and initialize the app using fast_app with the theme's headers. You can then define routes using standard FastHTML patterns and use MonsterUI components like Card, Titled, and UkIconLink to build your UI.

from fasthtml.common import *
from monsterui.all import *

# Choose a theme color (blue, green, red, etc)
hdrs = Theme.blue.headers()

# Create your app with the theme
app, rt = fast_app(hdrs=hdrs)

@rt
def index():
    socials = (('github','https://github.com/AnswerDotAI/MonsterUI'),
               ('twitter','https://twitter.com/isaac_flath/'),
               ('linkedin','https://www.linkedin.com/in/isaacflath/'))
    return Titled("Your First App",
        Card(
            H1("Welcome!"),
            P("Your first MonsterUI app", cls=TextPresets.muted_sm),
            P("I'm excited to see what you build with MonsterUI!"),
            footer=DivLAligned(*[UkIconLink(icon,href=url) for icon,url in socials])))

serve()

The Accordion component allows for collapsible content sections.

• AccordionItem(title, *c, ...): A single item within an accordion. It handles the title, the expandable content (*c), and the open state.
• Accordion(*c, ...): The container for one or more AccordionItem components.

Accordion Options:

• multiple: (bool) Allow multiple items to be open simultaneously.
• collapsible: (bool) Allow all items to be closed.
• animation: (bool) Enable/disable animation.
• duration: (int) Animation duration in ms.
• active: (int) 0-based index of the item to be open by default.
• tag: (str) HTML tag for the container ('ul' or 'div').

from monsterui.franken import Accordion, AccordionItem

accordion = Accordion(
    AccordionItem("Section 1", "Content for section 1"),
    AccordionItem("Section 2", "Content for section 2", open=True),
    multiple=True
)

MonsterUI provides several helper functions to simplify common Flexbox patterns without requiring deep knowledge of CSS flex properties:

• DivHStacked: Aligns children horizontally in a row, centers them vertically, and adds spacing (cls=(FlexT.block, FlexT.row, FlexT.middle, 'space-x-4')). Useful for forms (label next to input) or placing text next to an avatar.
• DivVStacked: Aligns children vertically in a column and centers them (cls=(FlexT.block, FlexT.column, FlexT.middle)). Useful for stacking text elements or centering content within a card.
• DivFullySpaced: Uses flex to distribute space between items as much as possible. Ideal for headers or footers where you want elements pushed to opposite ends.

# Horizontal stacking (e.g., Avatar + Text)
DivHStacked(
    DiceBearAvatar("user"), 
    DivVStacked(
        P("John Doe", cls=TextT.lg),
        P("john@example.com", cls=TextT.muted)
    )
)

# Vertical stacking (e.g., Pricing Card header)
DivVStacked(
    H2(plan),
    H3(price, cls='text-primary'),
    P('per month', cls=TextT.muted),
    cls='space-y-1'
)

The Theme enum is the primary way to select a visual style for your application. Each theme member provides a .headers() method that returns a list of HTML elements (links, scripts, styles) required to load the necessary CSS and JS (FrankenUI, Tailwind, DaisyUI, etc.).

Available Themes

Available theme colors include:

• Theme.slate, Theme.stone, Theme.gray, Theme.neutral
• Theme.red, Theme.rose, Theme.orange, Theme.green, Theme.blue, Theme.yellow, Theme.violet, Theme.zinc

Customizing Headers

You can customize the look and feel by passing arguments to .headers():

• mode: Set to 'auto', 'light', or 'dark' to control color mode.
• radii: Use ThemeRadii (e.g., ThemeRadii.sm, ThemeRadii.md) to set corner rounding.
• shadows: Use ThemeShadows (e.g., ThemeShadows.sm, ThemeShadows.lg) to set shadow depth.
• font: Use ThemeFont (e.g., ThemeFont.sm, ThemeFont.default) to set font size.
• icons: Boolean, defaults to True (loads FrankenUI icons).
• daisy: Boolean, defaults to True (loads DaisyUI styles).
• highlightjs: Boolean, defaults to False. Set to True for syntax highlighting.
• katex: Boolean, defaults to False. Set to True for math rendering.
• apex_charts: Boolean, defaults to False. Set to True for charting support.

app = FastHTML(hdrs=Theme.blue.headers(highlightjs=True, katex=True))