{% dj_button label="Primary" variant="primary" %}
{% dj_button label="Done" variant="primary" icon="✓" %}
{% dj_button label="Loading" loading=True %}
{% dj_button label="Small" size="sm" %}

Badges

Default Success Warning Error Info Live

{% badge label="Success" status="success" %}
{% badge label="Live" status="success" pulse=True %}

Form Controls

Full Name

Role

Bio

I agree to the terms

Starter

Pro

{% dj_input name="email" label="Email" input_type="email" %}
{% dj_select name="role" options="admin:Admin,editor:Editor" %}
{% dj_textarea name="bio" rows=3 %}
{% dj_checkbox name="agree" label="I agree" %}
{% dj_radio name="plan" label="Pro" value="pro" %}

Install djust-components and start building themed Django applications with ready-to-use components.

All components use CSS custom properties from djust-theming. Switch packs and watch every component adapt.

Accessible, responsive, and performant. Built for real Django applications with HTMX and LiveView support.

{% card title="Title" subtitle="Subtitle" footer_text="Footer" %}
    <!-- card body content -->
{% endcard %}
{% card title="Elevated" variant="elevated" %} ... {% endcard %}
{% card title="Outlined" variant="outlined" %} ... {% endcard %}

ℹ

Information

djust-components provides 171 themed UI components for Django templates.

✓

Success

Theme pack successfully applied. All components have adapted to the new design system.

⚠

Warning

Some components may render differently across design systems. Test thoroughly.

Error

Failed to load custom theme pack. Falling back to default.

{% alert variant="success" title="Success" %}
    Theme pack applied successfully.
{% endalert %}
{% alert variant="error" title="Error" %} ... {% endalert %}

Avatars

{% avatar initials="AB" size="md" status="online" %}

Skeleton

{% skeleton skeleton_type="text" lines=3 %}

Progress

{% progress value=72 label="Upload" %}
{% progress value=35 color="success" %}

Interactive Components

Tabs

This is the overview tab content. Tabs adapt their styling to the active theme pack.

Accordion

{% tabs id="my-tabs" active="overview" %}
    {% tab id="overview" label="Overview" %} ... {% endtab %}
{% endtabs %}

{% accordion id="faq" %}
    {% accordion_item id="q1" title="Question?" %} ... {% endaccordion_item %}
{% endaccordion %}

Additional Components

Breadcrumb

Stat Card

Total Users

12,847

+14% from last month

Revenue

$48.2k

+7% from last month

Uptime

99.9%

Last 30 days

Code Block

python

INSTALLED_APPS = ["djust_components", "djust_theming"]

Spinner

Empty State

No results found

Try adjusting your search or filter criteria.

{# Breadcrumb — pass a Python list of dicts #}
{% breadcrumb items=breadcrumb_items %}

{# Stat card #}
{% stat_card label="Users" value="12,847" change="+14%" %}

{# Code block #}
{% code_block language="python" %}print("hello"){% endcode_block %}

{% spinner size="md" %}
{% empty_state title="No results" message="Try again." %}

Component Library

All 177 Components by Category

Buttons