Introduction

labb is a component library for Django. You build interfaces by writing HTML-like tags in your templates, and labb renders accessible, styled markup on the server. No JavaScript framework, no build step for components, and nothing ships to the browser unless you ask for it.

This page is a quick tour of how you build with labb. If you have not installed it yet, start with Installation.

Your first component

A component is a tag that starts with c-lb.. Drop it into any Django template:

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

Props control how it looks. Change the colour, the size, or add an icon by setting attributes:

<div class="flex flex-wrap gap-2">
  <c-lb.button variant="neutral">Neutral</c-lb.button>
  <c-lb.button variant="primary">Primary</c-lb.button>
  <c-lb.button variant="secondary">Secondary</c-lb.button>
  <c-lb.button variant="accent">Accent</c-lb.button>
  <c-lb.button variant="info">Info</c-lb.button>
  <c-lb.button variant="success">Success</c-lb.button>
  <c-lb.button variant="warning">Warning</c-lb.button>
  <c-lb.button variant="error">Error</c-lb.button>
</div>

Every component has a page in the component docs listing its props and examples. You can also inspect a component from the command line:

labb components inspect button

Compose components

Components nest. Build a card by combining the card pieces:

<c-lb.card class="w-80">
    <c-lb.card.body>
        <c-lb.card.title>Air Max Pro</c-lb.card.title>
        <p class="text-base-content/60">Lightweight. Fast. Built for the road.</p>
        <c-lb.button variant="primary">Add to cart</c-lb.button>
    </c-lb.card.body>
</c-lb.card>

When a piece of markup shows up more than once, move it into your own component and reuse it. Composition covers the habits, and Writing components covers how to build one.

Add an icon

Any component with an icon prop takes an icon name. Search for available icons from the command line, and use comma-separated list for multiple searches:

labb icons search "arrow"
labb icons search "arrow,heart,user"

<c-lb.button icon="rmx.arrow-right">Next</c-lb.button>

Icons come from the optional labbicons package. See the Icons page for install and usage, or browse them all in the icon browser.

Make it interactive

Pages are static HTML by default. When you need interactivity, prefix a prop with $ to bind it to a signal, and change that signal from the page. Here a button's colour and size are driven by the controls next to it:

<c-lbr.signals $btn.variant="" $btn.size="md" $btn.btnstyle="" />

<div class="flex flex-col gap-6 items-start w-full md:w-96">

    <c-lb.button variant="$btn.variant" size="$btn.size:md" btnStyle="$btn.btnstyle">
        Click me — <span data-text="$btn.variant || 'default'"></span>
    </c-lb.button>

    <c-lb.label floating class="w-full">
        <span>Variant</span>
        <c-lb.select bind="$btn.variant" size="sm" class="w-full">
            <option value="">Default</option>
            <option value="primary">Primary</option>
            <option value="secondary">Secondary</option>
            <option value="accent">Accent</option>
            <option value="success">Success</option>
            <option value="warning">Warning</option>
            <option value="error">Error</option>
        </c-lb.select>
    </c-lb.label>

    <c-lb.label floating class="w-full">
        <span>Size</span>
        <c-lb.select bind="$btn.size" size="sm" class="w-full">
            <option value="xs">xs</option>
            <option value="sm">sm</option>
            <option value="md">md</option>
            <option value="lg">lg</option>
            <option value="xl">xl</option>
        </c-lb.select>
    </c-lb.label>

    <c-lb.label floating class="w-full">
        <span>Style</span>
        <c-lb.select bind="$btn.btnstyle" size="sm" class="w-full">
            <option value="">Default</option>
            <option value="outline">Outline</option>
            <option value="soft">Soft</option>
            <option value="ghost">Ghost</option>
            <option value="link">Link</option>
        </c-lb.select>
    </c-lb.label>

</div>

The same idea powers server-driven interactions like search, forms, and inline editing, without writing separate JSON endpoints. The Reactivity guide walks through both.

What you get

• 50+ components covering buttons, cards, modals, drawers, forms, tables, charts, and more
• Live examples on every component page, ready to copy
• 2,800+ icons through the optional labbicons package
• Theming with light, dark, and custom themes out of the box
• Optional reactivity that loads only on the pages that use it
• A CLI for setup, component inspection, and AI-assisted development

Related