component-framework-ui

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

CI Docs Python 3.11+ Status: Beta

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

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

Template set Engine Web frameworks
jinja/ Jinja2 / JinjaX FastAPI, Litestar
cotton/ django-cotton Django

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

Theme Status
Bulma ✅
Tailwind + DaisyUI ✅ — guide
Bootstrap 5 ✅ — CSS only, no bootstrap.bundle.js; decision record
Foundation 6 ✅ — CSS only, no jQuery
Fomantic UI ✅ — CSS only, no jQuery

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

Page What's in it
Installation Extras, requirements, asset options
Quickstart Django, FastAPI, and Litestar setups
Getting started Themes, assets, composition axes, Alpine, escaping
Use cases HTMX tables, modals, forms with errors
Components All fourteen, with every prop
Escaping Why cf-ui escapes its own output
Theming Composition axes and custom value sets
Tailwind plugin Build-time axis validation
Accessibility Focus management, ARIA, keyboard behavior

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

Project links

Data verified by PyPI on Aug 20, 2026
Data provided by the project maintainers, verified at the time the release was uploaded to PyPI.

Key dates

PyPI data
Data sourced directly from PyPI's database.
  • Released:
Latest release

1 maintainer

PyPI data
Data sourced directly from PyPI's database.
Avatar for fsecada01 from gravatar.com fsecada01

Credits

Author: Francis Secada

GitHub Statistics

Data verified by PyPI on Aug 20, 2026
The GitHub source repository was provided by the project maintainers and verified by PyPI at the time of upload. Stars, forks, and open issues/PRs are derived from that repository and have not been independently verified.

License

MIT License (MIT)

Requires

Python >=3.11

Provides Extra

all bootstrap bulma daisy dev django docs fastapi fomantic foundation litestar

Tags

alpinejs bulma components django fastapi htmx litestar

Classifiers

Report project as malware

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

cf_ui-0.4.0.tar.gz (99.8 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

cf_ui-0.4.0-py3-none-any.whl (192.2 kB view details)

Uploaded Python 3

File details

Details for the file cf_ui-0.4.0.tar.gz.

File metadata

  • Download URL: cf_ui-0.4.0.tar.gz
  • Upload date:
  • Size: 99.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/7.0.0 CPython/3.13.14

File hashes

Hashes for cf_ui-0.4.0.tar.gz
Algorithm Hash digest
SHA256 aba466d867a45881fa129763589258473b73f15cf96c4f6457ca48de9ef7efa5
MD5 48918e2db1af9efd2e1b9f4a26976e0e
BLAKE2b-256 edfc5967ff11d180f1b1b3e8721c62e57bc177e42451f6c403c32df80a1a0948

See more details on using hashes here.

Provenance

The following attestation bundles were made for cf_ui-0.4.0.tar.gz:

Publisher: release.yml on fsecada01/component-framework-ui

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

File details

Details for the file cf_ui-0.4.0-py3-none-any.whl.

File metadata

  • Download URL: cf_ui-0.4.0-py3-none-any.whl
  • Upload date:
  • Size: 192.2 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: twine/7.0.0 CPython/3.13.14

File hashes

Hashes for cf_ui-0.4.0-py3-none-any.whl
Algorithm Hash digest
SHA256 211dccc2ab96c8967020ddff90017f9645adc3be2464e6c42afeedff11f0b0e3
MD5 7905d726558ad01c1a4075bb4afddf04
BLAKE2b-256 76f9e99046040e31ed02e796f8353b907c32dfff1dc79915d8beb1845e2cb596

See more details on using hashes here.

Provenance

The following attestation bundles were made for cf_ui-0.4.0-py3-none-any.whl:

Publisher: release.yml on fsecada01/component-framework-ui

Attestations: Values shown here reflect the state when the release was signed and may no longer be current.

Release history Release notifications | RSS feed

This release

0.4.0 This release

2 files

0.3.1

2 files

0.3.0

2 files

0.2.0

2 files

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page