Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Body text with bold, italic, links,
   highlighted, small, and inline code.

  "Design is not just what it looks like..."
  

  
Unordered item



  
Ordered item

your code here

{{ button("Primary") }}
{{ button("Secondary", variant="secondary") }}
{{ button("Outline", variant="outline") }}
{{ button("Contrast", variant="contrast") }}

{{ button("Go to dashboard", href="/dashboard", variant="secondary") }}

{{ button("Processing...", disabled=true) }}
{{ button("Disabled link", href="#", disabled=true) }}

{{ button("Delete", variant="outline",
         attrs={"hx-delete": "/items/1", "hx-confirm": "Are you sure?"}) }}

{{ input("email", type="email", label="Email address", placeholder="you@example.com") }}

{{ input("email", type="email", label="Email", value="not-an-email",
         error="Please enter a valid email address") }}

{{ input("password", type="password", label="Password", required=true) }}

{{ select("color", ["Red", "Green", "Blue"], label="Favorite color") }}

{{ select("role", [
    {"value": "admin", "label": "Administrator"},
    {"value": "editor", "label": "Editor"},
    {"value": "viewer", "label": "Viewer"}
  ], label="Role", selected="editor") }}

{{ select("plan", ["Free", "Pro"], label="Plan", error="Selection required") }}

{{ textarea("bio", label="Biography", placeholder="Tell us about yourself...") }}

{{ textarea("bio", label="Biography", error="Must be at least 20 characters", rows=3) }}

{% call form_group("Email address", for_id="email") %}
  {{ input("email", type="email", placeholder="you@example.com") }}
{% endcall %}

{% call form_group("Password", error="Password is required") %}
  {{ input("password", type="password") }}
{% endcall %}

{{ csrf_input(csrf_token) }}
{# Renders:  #}

{% call card() %}
  
A simple card with just content.
{% endcall %}

{% call card(title="User Profile", footer="Last updated: today") %}
  
Card body content goes here.
{% endcall %}

{{ nav(brand="MyApp", items=[
    {"href": "/about", "label": "About"},
    {"href": "/docs", "label": "Docs"}
  ]) }}

{{ nav(brand="MyApp",
       items=[{"href": "/dashboard", "label": "Dashboard", "active": true}],
       user="alice@example.com") }}

{{ 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") }}

{{ alert("You can close this alert.", variant="info", dismissible=true) }}

{{ data_table(
    ["Name", "Email", "Role"],
    [
      ["Alice Johnson", "alice@example.com", "Admin"],
      ["Bob Smith", "bob@example.com", "Editor"],
      ["Carol White", "carol@example.com", "Viewer"]
    ]
) }}

{{ data_table(["Name", "Email"], [], empty_message="No users found.") }}

{{ pagination(page=3, total_pages=7) }}

{{ pagination(page=1, total_pages=5) }}

{{ pagination(page=2, total_pages=10, base_url="/users?page=") }}

{{ empty_state() }}

{{ empty_state("No projects yet.",
             action_label="Create your first project",
             action_url="/projects/new") }}

{{ breadcrumbs([
    {"label": "Home", "href": "/"},
    {"label": "Users", "href": "/users"},
    {"label": "Alice"}
]) }}

{{ badge("Primary") }}
{{ badge("Secondary", variant="secondary") }}
{{ badge("Success", variant="success") }}
{{ badge("Warning", variant="warning") }}
{{ badge("Error", variant="error") }}
{{ badge("Info", variant="info") }}

Notifications {{ badge("3", variant="error") }}
Status: {{ badge("Active", variant="success") }}

{{ modal_trigger("confirm-dlg", "Open Modal") }}

{% call modal("confirm-dlg", title="Confirm Action") %}
  
Are you sure you want to proceed?
  
{% endcall %}

{{ loading_spinner() }}
{{ loading_spinner(size="2.5rem") }}

{{ loading_skeleton(lines=4) }}

  Load Data {{ loading_spinner(attrs={"id": "spinner"}) }}

{{ loading_skeleton(lines=3) }}