https://github.com/labbhq/labb
UI for Django perfectionists with deadlines
https://github.com/labbhq/labb
component-library daisyui django django-cotton tailwindcss ui
Last synced: about 2 months ago
JSON representation
UI for Django perfectionists with deadlines
- Host: GitHub
- URL: https://github.com/labbhq/labb
- Owner: labbhq
- License: mit
- Created: 2025-12-26T08:38:36.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-04-19T22:58:51.000Z (about 2 months ago)
- Last Synced: 2026-04-20T00:36:01.428Z (about 2 months ago)
- Topics: component-library, daisyui, django, django-cotton, tailwindcss, ui
- Language: HTML
- Homepage: https://labb.io
- Size: 1.77 MB
- Stars: 50
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# labb — Django UI Component Library
**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.
## Table of contents
- [Why labb](#why-labb-for-your-django-ui)
- [Installation](#installing-labb-in-your-django-project)
- [Quick start](#quick-start-using-labb-components-in-django-templates)
- [Component catalog](#django-ui-components-included-in-labb)
- [CLI](#labb-cli-for-django-developers)
- [FAQ](#django-component-library-faq)
- [Documentation](#documentation)
## Why labb for your Django UI?
Django templates are powerful, but building a consistent UI means repeating markup on every page. **labb components** feel like native HTML tags (``, ``, ``) 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 ``, ``, `` 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+**.
```html
Save changes
Django components, done right
Composable, themeable, and fully server-rendered.
Get started
Are you sure?
This action cannot be undone.
Delete
```
## Installing labb in your Django project
The fastest way to start a new Django project with this **django component library** is `labbstart`:
```bash
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.
### Adding labb to an existing Django project
```bash
pip install labbui
# With icons (Remix, Heroicons, Lucide, and more)
pip install labbui[icons]
```
Add to your Django settings:
```python
INSTALLED_APPS = [
"django_cotton",
"labb",
# ...
]
```
## Quick start: using labb components in Django templates
### Buttons
```html
Default
Large primary
Delete
Link styled as button
Confirm
```
### Dropdown
```html
Options
Edit
Duplicate
Archive
```
### Tabs
```html
Overview content here.
Settings content here.
```
### Alert with icon
```html
Your changes have been saved.
```
## Django UI components included in labb
labb ships with 70+ **Django UI components** across eight categories. Every component is a [django-cotton](https://django-cotton.com/) tag you drop into any Django template.
### Actions
`button`, `dropdown`, `fab`, `modal`, `swap`, `theme-controller`
### Data display
`accordion`, `avatar`, `badge`, `card`, `carousel`, `chat`, `collapse`, `diff`, `hover-gallery`, `hover3d`, `kbd`, `list`, `stat`, `table`, `text`, `text-rotate`, `timeline`
### Navigation
`breadcrumbs`, `dock`, `link`, `menu`, `navbar`, `pagination`, `steps`, `tabs`
### Feedback
`alert`, `loading`, `progress`, `radial-progress`, `skeleton`, `status`, `toast`, `tooltip`
### Data input (Django forms)
`checkbox`, `fieldset`, `file-input`, `filter`, `input`, `label`, `radio`, `range`, `rating`, `select`, `textarea`, `toggle`, `validator`
### Layout
`divider`, `drawer`, `footer`, `hero`, `indicator`, `join`, `mask`, `stack`
### Mockup
`mockup-browser`, `mockup-code`, `mockup-phone`, `mockup-window`
### Charts (Chart.js + daisyUI theming)
`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](https://labb.io/docs/ui/)**.
## Features of the labb component library
- **Variant-driven API** — control style through props like `variant`, `size`, and `btnStyle`, not CSS class strings.
- **Composable slots** — nest components naturally with named slots (``, ``).
- **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 (``).
- **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 CLI for Django developers
labb ships with a CLI for inspecting components, searching icons, and managing your build:
```bash
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
```
## Django component library FAQ
### Does labb work with HTMX?
Yes. labb renders plain HTML, so HTMX swaps drop in without any special configuration. Pair `hx-get` / `hx-post` with any `` component.
### Do I need Alpine.js to use labb?
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.
### How is labb different from other Django component libraries?
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.
### Can I use labb with my existing Tailwind config?
Yes. labb ships a content path you add to your Tailwind config. Your existing utilities, themes, and customizations keep working.
### Which Django and Python versions are supported?
Python 3.10 – 3.13 and Django 4.2+.
### Is labb production-ready?
Yes. labb is MIT-licensed and used in production Django apps. See **[labb.io](https://labb.io/)** for live examples and case studies.
## Documentation
Browse components, guides, and the blog at **[labb.io](https://labb.io/)** — the official **django ui components** reference for labb, django-cotton, Tailwind CSS, and daisyUI 5.
- Component reference: [labb.io/docs/ui](https://labb.io/docs/ui/)
- Getting started guide: [labb.io/docs/guide](https://labb.io/docs/guide/)
- Blog and tutorials: [labb.io/blog](https://labb.io/blog/)
## Keywords
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.
## License
MIT License