component-framework-ui

CSS framework UI kit for component-framework — Bulma, Bootstrap, Foundation, Fomantic UI, DaisyUI.

📖 Full documentation: https://fsecada01.github.io/component-framework-ui/

Fourteen ready-to-use components in two first-class template sets:

Component names are theme-agnostic — <Cf:Card> and <c-cf.card> render whichever theme is active. Switching CSS frameworks means changing one config line, not hundreds of templates.

Install

pip install "cf-ui[django,bulma]"        # Django + Bulma
pip install "cf-ui[fastapi,daisy]"       # FastAPI + Tailwind/DaisyUI
pip install "cf-ui[litestar,bootstrap]"  # Litestar + Bootstrap 5

All template sets ship in every install. Theme selection is runtime config, not install-time.

→ Installation guide

Thirty-second look

{# Django #}
{% load cf_ui %}
<c-cf.card header="Welcome">Card body content.</c-cf.card>
<c-cf.form-field name="email" label="Email" type="email" />

# FastAPI
from jinjax import Catalog

from cf_ui.fastapi import install_cf_ui

catalog = Catalog()
install_cf_ui(catalog, theme="bulma")

html = catalog.render("Cf:Card", header="Welcome", _content="Card body.")

→ Quickstart for all three frameworks

Themes

Switching is one line — CF_UI_THEME = "daisy" on Django, theme="daisy" on FastAPI/Litestar — and needs no template edits in the consuming app. An unimplemented theme name is rejected at startup rather than at first render.

Documentation

Development

git clone https://github.com/fsecada01/component-framework-ui
cd component-framework-ui
uv pip install -e ".[dev]"
playwright install chromium

just test             # unit tests
just test-integration # integration tests
just test-e2e         # E2E Playwright tests (requires chromium)
just test-all         # everything
just lint             # ruff check
just format           # ruff format
just docs             # serve the docs site locally

Requirements

• Python 3.11+
• component-framework >= 0.4
• Pydantic 2.0+ (only mandatory runtime dependency)

Optional extras:

• [django] — Django 4.2+, django-cotton 2.0+
• [fastapi] — FastAPI 0.109+, JinjaX 0.41+, uvicorn, python-multipart
• [litestar] — Litestar 2.0+, Jinja2 3.1+, JinjaX 0.41+

Jinja2 and JinjaX are layers, not alternatives, which is why the Litestar extra names both. Litestar's JinjaTemplateEngine owns the Jinja2 environment, and cf-ui installs a JinjaX catalog onto it — so <Cf:Card> renders from the same template on both paths. The FastAPI extra omits Jinja2 only because JinjaX pulls it in transitively there, where the catalog owns the environment outright.

License

MIT