fh-matui

What is fh-matui?

fh-matui is a Python library that brings Google’s Material Design to FastHTML applications. It provides a comprehensive set of pre-built UI components that integrate seamlessly with FastHTML’s hypermedia-driven architecture.

Built on top of BeerCSS (a lightweight Material Design 3 CSS framework), fh-matui enables you to create modern, responsive web interfaces entirely in Python — no JavaScript required.

✨ Key Features

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                        fh-matui                              │
├─────────────────────────────────────────────────────────────┤
│  Foundations     │  Core styling utilities, helpers, enums  │
│  Core            │  Theme system, MatTheme color presets    │
│  Components      │  Buttons, Cards, Modals, Forms, Tables   │
│  App Pages       │  Full-page layouts, navigation patterns  │
│  Data Tables     │  DataTable, DataTableResource for CRUD   │
│  Web Pages       │  Landing pages, marketing components     │
├─────────────────────────────────────────────────────────────┤
│  BeerCSS         │  Material Design 3 CSS framework         │
│  FastHTML        │  Python hypermedia web framework         │
└─────────────────────────────────────────────────────────────┘

🎨 Available Themes

fh-matui includes 15+ pre-configured Material Design 3 color themes:

Usage:

# Choose your theme
app, rt = fast_app(hdrs=[MatTheme.deep_purple.headers()])

🚀 Quick Start

Here’s a minimal example to get you started:

from fasthtml.common import *
from fh_matui.core import MatTheme
from fh_matui.components import Button, Card, FormField

# Create a themed FastHTML app
app, rt = fast_app(hdrs=[MatTheme.indigo.headers()])

@rt('/')
def home():
    return Div(
        Card(
            H3("Welcome to fh-matui!"),
            P("Build beautiful Material Design apps with Python."),
            Button("Get Started", cls="primary"),
        ),
        cls="padding"
    )

serve()

📦 Installation

pip install fh-matui

Dependencies

fh-matui automatically includes: - python-fasthtml - The core FastHTML framework - BeerCSS - Loaded via CDN for Material Design 3 styling

What This Code Does

1. MatTheme.indigo.headers() - Loads BeerCSS with the indigo color scheme
2. Card - Creates a Material Design card component with elevation
3. FormField - Generates a styled input with floating label
4. Button - Renders a Material Design button with ripple effects

📚 Module Reference

🛠️ Development

Install in Development Mode

# Clone the repository
git clone https://github.com/user/fh-matui.git
cd fh-matui

# Install in editable mode
pip install -e .

# Make changes under nbs/ directory, then compile
nbdev_prepare

🤝 Why fh-matui?

🤖 For LLM Users

fh-matui includes comprehensive documentation bundles for Large Language Models, enabling AI assistants (like Claude, ChatGPT, or GitHub Copilot) to help you build FastHTML apps with complete knowledge of the component APIs.

📥 Download Context File

📄 llms-ctx.txt — Complete API documentation in LLM-optimized format

💡 How to Use

1. Download the context file from the link above
2. Attach it to your LLM conversation (drag & drop or paste contents)
3. Ask for implementation using natural language

Example Prompt:

I'm using fh-matui (context attached). Create a dashboard with:
- A sidebar navigation with 5 menu items
- A DataTable showing products with pagination
- A modal form to add/edit products
- Use the deep purple theme

The LLM will generate production-ready FastHTML code using the exact component APIs from the documentation.

🔄 Staying Up to Date

The llms-ctx.txt file is automatically regenerated with each release to ensure it stays synchronized with the latest API changes. Always download the version matching your installed package version for the most accurate results.

📌 Note: The context file is generated from the same literate programming notebooks that build the library itself, ensuring 100% accuracy with the actual implementation.

📄 License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

Built with ❤️ using FastHTML and nbdev