fasthtml-basecoat

FastHTML components built on top of Basecoat CSS. They have the clean, familiar look of shadcn, without bringing React into your app.

Try the components

Visit fasthtml-basecoat.jonasfrei.de to explore the components in the browser. Every example also links to the source code below, so you can see how it is put together.

Getting started

Basecoat uses Tailwind. Install the Python package and the small frontend build setup:

uv add fasthtml-basecoat
# or
pip install fasthtml-basecoat

npm install basecoat-css tailwindcss
npm install --save-dev @tailwindcss/cli

Create styles/tailwind.css:

@import "tailwindcss";
@import "basecoat-css";

This tells Tailwind to look for classes in your Python files. Build the stylesheet into FastHTML's static directory:

npx @tailwindcss/cli -i ./styles/tailwind.css -o ./static/css/app.css

Use the generated stylesheet in your app. BasecoatJS() adds the JavaScript needed by interactive components.

from fasthtml.common import Link, fast_app

from fasthtml_basecoat import BasecoatJS
from fasthtml_basecoat.components.button import Button

app, rt = fast_app(
    hdrs=(
        Link(rel="stylesheet", href="/static/css/app.css"),
        BasecoatJS(),
    )
)


@rt("/")
def get():
    return Button("Hello", cls="w-full")

Run your app as usual and open it in the browser. Import the other components you need and use them like normal FastHTML elements.

Components and examples

The live component gallery is the quickest way to browse what is available. The links below go straight to the working showcase source for each component.

Run the gallery locally

The repository includes the gallery used for the online showcase. It builds a local Basecoat stylesheet before starting the FastHTML app.

npm ci
npm run build
uv run app.py

Open http://localhost:5001 in your browser. The generated stylesheet is served from /static/css/basecoat.css and is not committed to the repository. Basecoat’s JavaScript bundle is loaded from jsDelivr, so interactive components need network access.

To build and run the gallery in a container:

docker build -t fasthtml-basecoat .
docker run --rm -p 5001:5001 fasthtml-basecoat

Development

Install the Python and frontend development dependencies:

uv sync --extra dev
npm ci

Run the checks and build the distributable package:

uv run ruff check .
uv run ruff format --check .
uv build