Every bfx/ macro rendered live with copy-paste Jinja2 code. Import, pass your data, ship.
{% raw %}Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
{% endraw %}This is a paragraph of body text. The default Bluefox theme uses DM Sans for body copy and JetBrains Mono for code. Each theme variant overrides the font stack — try switching themes with the picker in the bottom right.
Text can include bold, italic, links, highlighted, small text, and inline code.
{% raw %}Body text with bold, italic, links,
highlighted, small, and inline code.
{% endraw %}"Design is not just what it looks like and feels like. Design is how it works."
{% raw %}
"Design is not just what it looks like..."
{% endraw %}{% raw %}
- Unordered item
- Ordered item
{% endraw %}from bluefox_components import setup_components
app = create_bluefox_app(settings)
setup_components(app){% raw %}your code here
{% endraw %}{% raw %}{{ input("email", type="email", label="Email address", placeholder="you@example.com") }}{% endraw %}{% raw %}{{ input("email", type="email", label="Email", value="not-an-email",
error="Please enter a valid email address") }}{% endraw %}{% raw %}{{ input("password", type="password", label="Password", required=true) }}{% endraw %}{% raw %}{{ select("color", ["Red", "Green", "Blue"], label="Favorite color") }}{% endraw %}{% raw %}{{ select("role", [
{"value": "admin", "label": "Administrator"},
{"value": "editor", "label": "Editor"},
{"value": "viewer", "label": "Viewer"}
], label="Role", selected="editor") }}{% endraw %}{% raw %}{{ select("plan", ["Free", "Pro"], label="Plan", error="Selection required") }}{% endraw %}{% raw %}{{ textarea("bio", label="Biography", placeholder="Tell us about yourself...") }}{% endraw %}{% raw %}{{ textarea("bio", label="Biography", error="Must be at least 20 characters", rows=3) }}{% endraw %}{% raw %}{% call form_group("Email address", for_id="email") %}
{{ input("email", type="email", placeholder="you@example.com") }}
{% endcall %}{% endraw %}{% raw %}{% call form_group("Password", error="Password is required") %}
{{ input("password", type="password") }}
{% endcall %}{% endraw %}{% raw %}{{ csrf_input(csrf_token) }}
{# Renders: #}{% endraw %}A simple card with just content. Uses Pico's <article> element.
{% raw %}{% call card() %}
A simple card with just content.
{% endcall %}{% endraw %}Card body content goes here. The title renders in a <header> and footer in a <footer>.
{% raw %}{% call card(title="User Profile", footer="Last updated: today") %}
Card body content goes here.
{% endcall %}{% endraw %}{% raw %}{{ alert("This is an informational message.", variant="info") }}
{{ alert("Operation completed successfully!", variant="success") }}
{{ alert("Please check your input.", variant="warning") }}
{{ alert("Something went wrong.", variant="error") }}{% endraw %}{% raw %}{{ alert("You can close this alert.", variant="info", dismissible=true) }}{% endraw %}{% raw %}{{ data_table(
["Name", "Email", "Role"],
[
["Alice Johnson", "alice@example.com", "Admin"],
["Bob Smith", "bob@example.com", "Editor"],
["Carol White", "carol@example.com", "Viewer"]
]
) }}{% endraw %}{% raw %}{{ data_table(["Name", "Email"], [], empty_message="No users found.") }}{% endraw %}{% raw %}{{ pagination(page=3, total_pages=7) }}{% endraw %}{% raw %}{{ pagination(page=1, total_pages=5) }}{% endraw %}{% raw %}{{ pagination(page=2, total_pages=10, base_url="/users?page=") }}{% endraw %}{% raw %}{{ empty_state() }}{% endraw %}{% raw %}{{ empty_state("No projects yet.",
action_label="Create your first project",
action_url="/projects/new") }}{% endraw %}{% raw %}{{ badge("Primary") }}
{{ badge("Secondary", variant="secondary") }}
{{ badge("Success", variant="success") }}
{{ badge("Warning", variant="warning") }}
{{ badge("Error", variant="error") }}
{{ badge("Info", variant="info") }}{% endraw %}{% raw %}Notifications {{ badge("3", variant="error") }}
Status: {{ badge("Active", variant="success") }}
{% endraw %}Are you sure you want to proceed? This action cannot be undone.
{% endcall %}{% raw %}{{ modal_trigger("confirm-dlg", "Open Modal") }}
{% call modal("confirm-dlg", title="Confirm Action") %}
Are you sure you want to proceed?
{% endcall %}{% endraw %}{% raw %}{{ loading_spinner() }}
{{ loading_spinner(size="2.5rem") }}{% endraw %}{% raw %}{{ loading_skeleton(lines=4) }}{% endraw %}{% raw %}
{{ loading_skeleton(lines=3) }}{% endraw %}