Skip to content

Getting started

Installation

uv add bluefox-components

Setup

Call setup_components(app) after creating your Bluefox app:

from bluefox_core import BluefoxSettings, create_bluefox_app
from bluefox_components import setup_components

settings = BluefoxSettings()
app = create_bluefox_app(settings)
setup_components(app)

This does two things:

  1. Registers the bfx/ template directory so Jinja2 can find component templates
  2. Mounts /static/bfx/ to serve the CSS theme file

Using the base layout

Create a template that extends bfx/base.html:

{% extends "bfx/base.html" %}

{% block title %}My Page{% endblock %}

{% block content %}
<h1>Hello, Bluefox!</h1>
<p>Your page content goes here.</p>
{% endblock %}

Available blocks

Block Description
title Page title (defaults to "Bluefox")
head Extra <head> content (CSS, meta tags)
nav Full navigation bar
brand Brand text inside nav (defaults to "Bluefox")
nav_items Navigation links
content Main page content
footer Footer content
scripts Scripts before </body>

Using macros

Import macros from the bfx/ namespace:

{% from "bfx/button.html" import button %}
{% from "bfx/input.html" import input %}

{{ button("Save") }}
{{ input(name="email", type="email", label="Email") }}

Every macro accepts an attrs parameter (a dict) for pass-through HTML attributes:

{{ button("Delete", attrs={"hx-delete": "/items/1", "hx-confirm": "Sure?"}) }}