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 Jul 31, 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:
Newer release available (0.4.0)

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 Jul 31, 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.2.0.tar.gz (59.3 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.2.0-py3-none-any.whl (127.3 kB view details)

Uploaded Python 3

File details

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

File metadata

  • Download URL: cf_ui-0.2.0.tar.gz
  • Upload date:
  • Size: 59.3 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.2.0.tar.gz
Algorithm Hash digest
SHA256 737f8e7f7f8d003b3b1dc15017e66a645fc173d1df3e10b57c0f207c8395dd45
MD5 bbfa351cfe7b3827c822d579e499c491
BLAKE2b-256 f88470fb598eeda51545c70d08731a46c53e0dce051e88ed31fb28d9a73494f3

See more details on using hashes here.

Provenance

The following attestation bundles were made for cf_ui-0.2.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.2.0-py3-none-any.whl.

File metadata

  • Download URL: cf_ui-0.2.0-py3-none-any.whl
  • Upload date:
  • Size: 127.3 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.2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 ec2c61087423ad77901624c776d1cf22d20c630bddb238e85042c4ec2f241201
MD5 ac4687c7ea2597cf4c7726cf0f11a181
BLAKE2b-256 5ac634fb83dc4734a226e65bc9a8ff6c734f483db8af0217571bbe733fd4b654

See more details on using hashes here.

Provenance

The following attestation bundles were made for cf_ui-0.2.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

0.4.0

2 files

0.3.1

2 files

0.3.0

2 files

This release

0.2.0 This release

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