fasthtml-basecoatui — Basecoat components for FastHTML

[SpaceShaman]

Hi everyone! I’d like to share fasthtml-basecoatui, a small library for using Basecoat components in FastHTML.

It provides typed Python components with bundled CSS and JavaScript, and integrates with fasthtml-tailwindcss for CSS builds and watch mode.

Installation

Using uv:

uv add fasthtml-basecoatui "fasthtml-tailwindcss[dev]"

Or pip:

pip install fasthtml-basecoatui "fasthtml-tailwindcss[dev]"

The Tailwind compiler is only needed for development and CSS builds.

Usage

from fasthtml.common import FastHTML, Footer, H2, Header, P, StaticImmutable
from fasthtml_tailwindcss import TailwindHead
from fasthtml_basecoat import BasecoatInput, BasecoatJS, Button, Card

app = FastHTML(
    hdrs=[
        BasecoatJS(),
        TailwindHead(input=BasecoatInput("nova"), watch=True),
    ]
)
app.mount("/static", StaticImmutable(directory="static"), name="static")


@app.route("/")
def get():
    return Card(
        Header(H2("Hello, FastHTML!"), P("Basecoat components, written in Python.")),
        Footer(Button("Save", variant="outline")),
        cls="mx-auto mt-12 max-w-sm",
    )

Run with:

uv run uvicorn main:app --reload

CSS is written to static/tailwind.css and served through a versioned stylesheet link. Watch mode rebuilds it as your classes change, and the compiler stays alive across server reloads. No Node.js, npm, or CDN is needed.

Components and styles

Use components such as Card, Button, Input, Dialog, and Tabs alongside native FastHTML elements, following Basecoat’s documented HTML structure.

Variants and sizes are typed for editor autocomplete and type checking:

Button("Save", variant="outline", size="sm")

Eight Basecoat styles are included. Choose one with BasecoatInput("nova"). BasecoatJS() also restores the saved theme or follows the system preference.

The repository includes 12 standalone examples, covering forms, cards, tabs, dialogs, tables, HTMX notifications, and more. Chart support is planned for a future release.

Production

Use the default watch=False and build CSS before deployment:

uv run fasthtml-tailwindcss build main:app

Deploy the generated stylesheet with your application. The Tailwind compiler does not need to be installed in production.

Automatic updates

A daily workflow checks npm for new basecoat-css releases, regenerates the components, bundles the assets, and builds, tests, and publishes the package.

The PyPI version follows the bundled Basecoat version. Python-only fixes use a .postN suffix.

Links

• GitHub repository
• PyPI package

Feedback and suggestions are welcome!