fh-matui

Material Design UI Components for FastHTML — Build beautiful, responsive web applications with minimal JavaScript.

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

Feature	Description
🎨 Material Design 3	Modern, beautiful components following Google’s latest design language
⚡ Zero JavaScript	Build interactive UIs entirely in Python with FastHTML
📱 Responsive	Mobile-first design with automatic breakpoint handling
🌙 Dark Mode	Built-in light/dark theme support with 20+ color schemes
🧩 Composable	Chainable styling APIs inspired by MonsterUI
📊 Data Tables	Full-featured tables with pagination, search, sorting, and CRUD
🔧 nbdev-powered	Literate programming with documentation built from notebooks

🏗️ 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:

Theme	Preview	Theme	Preview
`MatTheme.red`	🔴	`MatTheme.pink`	🩷
`MatTheme.purple`	🟣	`MatTheme.deep_purple`	💜
`MatTheme.indigo`	🔵	`MatTheme.blue`	💙
`MatTheme.light_blue`	🩵	`MatTheme.cyan`	🌊
`MatTheme.teal`	🩶	`MatTheme.green`	💚
`MatTheme.light_green`	🍀	`MatTheme.lime`	💛
`MatTheme.yellow`	🌟	`MatTheme.amber`	🧡
`MatTheme.orange`	🟠	`MatTheme.deep_orange`	🔶
`MatTheme.brown`	🟤	`MatTheme.grey`	⚪
`MatTheme.blue_grey`	🔘

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

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

📚 Module Reference

Module	Description	Key Components
Foundations	Base utilities and helper functions	`BeerHeaders`, `display`, styling helpers
Core	Theme system and styling	`MatTheme`, color presets, theme configuration
Components	UI component library	`Button`, `Card`, `FormField`, `FormModal`, `Grid`
App Pages	Application layouts	Navigation, sidebars, full-page layouts
Data Tables	Data management components	`DataTable`, `DataTableResource`, CRUD operations
Web Pages	Marketing/landing pages	Hero sections, feature grids, testimonials

🛠️ 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?

Challenge	fh-matui Solution
CSS complexity	Pre-built Material Design 3 components via BeerCSS
JavaScript fatigue	FastHTML handles interactivity declaratively
Component consistency	Unified API across all components
Dark mode support	Built-in with automatic system preference detection
Responsive design	Mobile-first grid system and responsive utilities
Form handling	`FormField`, `FormGrid`, `FormModal` for rapid form building
Data management	`DataTable` and `DataTableResource` for CRUD operations

🤖 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

Download the context file from the link above
Attach it to your LLM conversation (drag & drop or paste contents)
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