labb is a Django UI component library for building modern web interfaces with django-cotton, Tailwind CSS, and daisyUI 5. Pages render server-side with zero JavaScript by default; add Alpine.js interactivity on demand via the .x variants.

If you want a django component library that feels like writing HTML — not a React rewrite of your Django app — labb gives you 70+ production-ready django ui components you compose in templates: buttons, forms, modals, charts, navigation, data tables, and more.

Build Django frontends fast, without a SPA. Server-rendered HTML, themeable design tokens, and composable components — all from your existing Django templates.

• Why labb
• Installation
• Quick start
• Component catalog
• CLI
• FAQ
• Community
• Documentation

Django templates are powerful, but building a consistent UI means repeating markup on every page. labb components feel like native HTML tags (<c-lb.button>, <c-lb.card>, <c-lb.modal>) so you get a coherent design system without leaving Django.

• Server-side rendering Django, not an SPA: no virtual DOM, no hydration, no client bundle for the default API.
• Tailwind CSS and daisyUI 5 under the hood: themeable with CSS variables, not overridden through class soup.
• Composable slots: nest <c-lb.card.body>, <c-lb.modal.action>, <c-lb.tabs.content> the way HTML is meant to be written.
• Alpine.js on demand: static by default; opt into reactivity with .x variants (e.g. c-lb.button.x).
• Python 3.10 – 3.13, Django 4.2+.

<c-lb.button variant="primary">Save changes</c-lb.button>

<c-lb.card border>
    <c-lb.card.body>
        <c-lb.card.title>Django components, done right</c-lb.card.title>
        <p>Composable, themeable, and fully server-rendered.</p>
        <c-lb.card.actions>
            <c-lb.button variant="primary">Get started</c-lb.button>
        </c-lb.card.actions>
    </c-lb.card.body>
</c-lb.card>

<c-lb.modal id="confirm" withBackdrop withCloseBtn>
    <h3>Are you sure?</h3>
    <p>This action cannot be undone.</p>
    <c-lb.modal.action>
        <c-lb.button variant="error">Delete</c-lb.button>
    </c-lb.modal.action>
</c-lb.modal>

The fastest way to start a new Django project with this django component library is labbstart:

pip install labbstart
labbstart new myproject

This scaffolds a complete Django project with labb, Tailwind CSS, and daisyUI pre-configured and ready to run in one command. It supports Poetry, pip, and uv, and includes a welcome page to get you oriented.

pip install labbui

# With icons (Remix, Heroicons, Lucide, and more)
pip install labbui[icons]

Add to your Django settings:

INSTALLED_APPS = [
    "django_cotton",
    "labb",
    # ...
]

<c-lb.button>Default</c-lb.button>
<c-lb.button variant="primary" size="lg">Large primary</c-lb.button>
<c-lb.button variant="error" btnStyle="outline">Delete</c-lb.button>
<c-lb.button as="a" href="/docs">Link styled as button</c-lb.button>
<c-lb.button variant="success" icon="rmx.check-line">Confirm</c-lb.button>

<c-lb.dropdown>
    <c-lb.dropdown.trigger>
        <c-lb.button>Options</c-lb.button>
    </c-lb.dropdown.trigger>
    <c-lb.dropdown.content>
        <c-lb.menu>
            <c-lb.menu.item>Edit</c-lb.menu.item>
            <c-lb.menu.item>Duplicate</c-lb.menu.item>
            <c-lb.menu.item>Archive</c-lb.menu.item>
        </c-lb.menu>
    </c-lb.dropdown.content>
</c-lb.dropdown>

<c-lb.tabs variant="bordered">
    <c-lb.tabs.content label="Overview" checked>
        <p>Overview content here.</p>
    </c-lb.tabs.content>
    <c-lb.tabs.content label="Settings">
        <p>Settings content here.</p>
    </c-lb.tabs.content>
</c-lb.tabs>

<c-lb.alert variant="info" icon="rmx.information-line">
    Your changes have been saved.
</c-lb.alert>

labb ships with 70+ Django UI components across eight categories. Every component is a django-cotton tag you drop into any Django template.

button, dropdown, fab, modal, swap, theme-controller

accordion, avatar, badge, card, carousel, chat, collapse, diff, hover-gallery, hover3d, kbd, list, stat, table, text, text-rotate, timeline

breadcrumbs, dock, link, menu, navbar, pagination, steps, tabs

alert, loading, progress, radial-progress, skeleton, status, toast, tooltip

checkbox, fieldset, file-input, filter, input, label, radio, range, rating, select, textarea, toggle, validator

divider, drawer, footer, hero, indicator, join, mask, stack

mockup-browser, mockup-code, mockup-phone, mockup-window

bar, bubble, doughnut, line, pie, polar-area, radar, scatter

Full API references, live examples, and copy-paste snippets for every component: labb.io/docs/ui.

• Variant-driven API — control style through props like variant, size, and btnStyle, not CSS class strings.
• Composable slots — nest components naturally with named slots (<c-lb.card.body>, <c-lb.modal.action>).
• Server-rendered by default — no JavaScript runtime, no client bundle, just Django templates and HTML.
• Optional Alpine.js reactivity — .x variants add client-side behaviour only where you need it.
• Icon support — labbui[icons] adds multiple icon packs with a single tag (<c-lbi n="rmx.heart" />).
• CLI tooling — inspect components, search icons, build CSS, and scaffold projects from the terminal.
• Theme-aware — daisyUI 5 themes, CSS variables, and dark mode work out of the box.
• Tested: 70+ components, production-tested on real Django apps.

labb ships with a CLI for inspecting components, searching icons, and managing your build:

labb components inspect --list     # List all available components
labb components inspect button -v  # Inspect a component's API
labb components ex button          # View component examples
labb icons search "arrow"          # Search icon packs
labb build -w                      # Watch and build Tailwind/daisyUI CSS
labb init --defaults               # Scaffold a new project

Yes. labb renders plain HTML, so HTMX swaps drop in without any special configuration. Pair hx-get / hx-post with any <c-lb.*> component.

No. The default components are static HTML with CSS. Alpine.js is only loaded when you use .x variants (e.g. c-lb.tabs.x) or reactive form wire components.

labb pairs django-cotton's HTML-first syntax with daisyUI 5's themeable design system and Tailwind CSS utilities. You get a fully themeable design system instead of a bag of unstyled primitives.

Yes. labb ships a content path you add to your Tailwind config. Your existing utilities, themes, and customizations keep working.

Python 3.10 – 3.13 and Django 4.2+.

Yes. labb is MIT-licensed and used in production Django apps. See labb.io for live examples and case studies.

BugBytes — overview of labb on YouTube.

Browse components, guides, and the blog at labb.io — the official django ui components reference for labb, django-cotton, Tailwind CSS, and daisyUI 5.

• Component reference: labb.io/docs/ui
• Getting started guide: labb.io/docs/guide
• Blog and tutorials: labb.io/blog

Django UI components, Django component library, django-cotton, Tailwind CSS Django, daisyUI Django, Alpine.js Django, server-side rendering Django, Django frontend, Python UI library, Django HTMX components, Django design system.

MIT License