{% load theme_tags theme_components %} Theme Editor {% theme_head %}

Preview

{# ---- Typography ---- #}

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Body text - The quick brown fox jumps over the lazy dog. This paragraph demonstrates the body font, base size, line height, and letter spacing of your current theme configuration.

Small text - Secondary information that uses the muted foreground color and smaller text size.

{# ---- Button ---- #}

Button

{% theme_button "Primary" variant="primary" %} {% theme_button "Secondary" variant="secondary" %} {% theme_button "Destructive" variant="destructive" %} {% theme_button "Ghost" variant="ghost" %} {% theme_button "Link" variant="link" %}
{% theme_button "Small" variant="primary" size="sm" %} {% theme_button "Medium" variant="primary" size="md" %} {% theme_button "Large" variant="primary" size="lg" %}
{# ---- Card ---- #}

Card

{% theme_card title="Card Title" footer="Card footer" %} {% theme_card title="No Footer" %}
{# ---- Alert ---- #}

Alert

{% theme_alert "Default alert." variant="default" title="Default" %} {% theme_alert "Success!" variant="success" title="Success" %} {% theme_alert "Warning." variant="warning" title="Warning" %} {% theme_alert "Error." variant="destructive" title="Error" %}
{# ---- Badge ---- #}

Badge

{% theme_badge "Default" variant="default" %} {% theme_badge "Secondary" variant="secondary" %} {% theme_badge "Success" variant="success" %} {% theme_badge "Warning" variant="warning" %} {% theme_badge "Destructive" variant="destructive" %}
{# ---- Input ---- #}

Input

{% theme_input "editor_text" label="Text Input" placeholder="Enter text..." type="text" %} {% theme_input "editor_email" label="Email" placeholder="you@example.com" type="email" %}
{# ---- Table ---- #}

Table

{% theme_table headers=table_headers rows=table_rows variant="striped" caption="Striped Table" %}
{# ---- Tabs ---- #}

Tabs

{% theme_tabs id="editor-tabs" tabs=tab_data active=0 %}
{# ---- Progress ---- #}

Progress

{% theme_progress value=50 max=100 label="50%" %} {% theme_progress value=75 max=100 label="75%" %}
{# ---- Toast ---- #}

Toast

{% theme_toast "Success toast" variant="success" %} {% theme_toast "Error toast" variant="error" %}
{# ---- Animation ---- #}

Animation

Hover Lift
translateY + scale
Hover Scale
scale transform
Hover Glow
box-shadow glow
Click to see speed
{# ---- Radius & Shadow ---- #}

Radius & Shadow

sm
md
lg
xl
full
shadow-sm
shadow-md
shadow-lg
shadow-xl
{# ---- Spacing ---- #}

Spacing Scale

1 2 3 4 6 8 12 16 24