labb

https://labb.io
Admin
labb is a Django component library for building beautiful server-rendered interfaces with 50+...
Tokens:68,241
Snippets:985
Trust Score:4.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Setup Labb Project

Source: https://labb.io/docs/guide/references/labb-cli.md

Install project dependencies. Use this command after initialization or when joining an existing project.

```bash
labb setup
```

--------------------------------

### Get Installation Instructions from AI Documentation

Source: https://labb.io/docs/guide/references/labb-cli.md

This command filters the AI documentation output to specifically retrieve installation instructions.

```bash
# Get installation instructions
labb llms | grep -A 5 "## Installation"
```

--------------------------------

### Initialize and Setup Labb Project

Source: https://labb.io/docs/guide/references/labb-cli.md

To resolve 'package.json not found' errors, first initialize the project and then run the setup command, which may include installing dependencies.

```bash
# Initialize project first, then setup
labb init
labb setup
```

--------------------------------

### Initialize and Set Up labb

Source: https://labb.io/docs/guide/getting-started/installation.md

Run these commands to initialize project configuration and structure with 'labb init' and install necessary Node.js dependencies with 'labb setup'.

```bash
labb init --defaults
labb setup
```

--------------------------------

### Install Labbstart for Project Scaffolding

Source: https://labb.io/llms.txt

Install the labbstart package for scaffolding new Django projects with Labb pre-configured. Use pip, poetry, or uv for installation.

```bash
pip install labbstart
# or
poetry add labbstart
# or
uv add labbstart
```

--------------------------------

### Labb Quick Start Template

Source: https://labb.io/llms.txt

A basic HTML template demonstrating the quick start usage of Labb components, including loading Labb tags, theme setup, and basic components like button and card.

```html
{% load lb_tags %}
<!DOCTYPE html>
<html data-theme="{% labb_theme %}">
<head>
    <c-lb.m.dependencies />
</head>
<body>
    <c-lb.button variant="primary">Click me</c-lb.button>
    <c-lb.card>
        <c-lb.card.body>
            <c-lb.card.title>Card Title</c-lb.card.title>
            <p>Content here</p>
        </c-lb.card.body>
    </c-lb.card>
</body>
</html>
```

--------------------------------

### Basic Chat Example

Source: https://labb.io/docs/ui/data-display/chat.md

Demonstrates the basic usage of the chat component. No specific setup is required beyond including the component.

```html
<c-lbdocs.component_example path="chat/basic" style="tab" />
```

--------------------------------

### Initialize Labb Project

Source: https://labb.io/docs/guide/references/labb-cli.md

Initialize a new Labb project, which creates the configuration and project structure. This is typically followed by `labb setup` to install dependencies.

```bash
labb init
```

```bash
labb setup
```

--------------------------------

### View Labb Component Examples

Source: https://labb.io/docs/guide/references/labb-cli.md

Explore component examples. Use --list to see all components with examples, or --tree for a tree view. You can specify individual examples or multiple examples from different components.

```bash
labb components ex --list
```

```bash
labb components ex --tree
```

```bash
labb components ex badge
```

```bash
labb components ex badge basic
```

```bash
labb components ex badge basic color-variants sizes
```

```bash
labb components ex button primary-button
```

```bash
labb components ex modal basic-modal
```

--------------------------------

### Basic Mask Example

Source: https://labb.io/docs/ui/layout/mask.md

Demonstrates the basic usage of the Mask component. No specific setup or imports are required beyond the component itself.

```html
<c-lbdocs.component_example path="mask/basic" />
```

--------------------------------

### Explore Component Examples

Source: https://labb.io/docs/guide/references/labb-cli.md

This command allows you to explore available examples for components, with a tree view option.

```bash
labb components ex --tree
```

--------------------------------

### Setup Labb Dependencies

Source: https://labb.io/docs/guide/references/labb-cli.md

Installs Tailwind CSS CLI and daisyUI. Use `--install-deps` to automatically install Node.js dependencies or `--no-install-deps` to skip.

```bash
labb setup
```

```bash
labb setup --install-deps
```

```bash
labb setup --no-install-deps
```

--------------------------------

### Component List Example

Source: https://labb.io/

Provides an example of how components are listed, showcasing the naming convention used within the library. This helps in understanding the available components.

```html
c-lb.accordionc-lb.badgec-lb.browserc-lb.cardc-lb.chatc-lb.collapsec-lb.dockc-lb.dropdownc-lb.file-inputc-lb.heroc-lb.indicatorc-lb.kbdc-lb.linkc-lb.maskc-lb.navbarc-lb.pie-chartc-lb.radar-chartc-lb.rangec-lb.selectc-lb.statc-lb.swapc-lb.textc-lb.theme-controllerc-lb.togglec-lb.window c-lb.accordionc-lb.badgec-lb.browserc-lb.cardc-lb.chatc-lb.collapsec-lb.dockc-lb.dropdownc-lb.file-inputc-lb.heroc-lb.indicatorc-lb.kbdc-lb.linkc-lb.maskc-lb.navbarc-lb.pie-chartc-lb.radar-chartc-lb.rangec-lb.selectc-lb.statc-lb.swapc-lb.textc-lb.theme-controllerc-lb.togglec-lb.window

```

```html
c-lb.alertc-lb.bar-chartc-lb.bubble-chartc-lb.carouselc-lb.checkboxc-lb.diffc-lb.doughnut-chartc-lb.fab-speed-dialc-lb.filterc-lb.hover-3dc-lb.inputc-lb.labelc-lb.listc-lb.menuc-lb.paginationc-lb.polar-area-chartc-lb.radial-progressc-lb.ratingc-lb.skeletonc-lb.statusc-lb.tablec-lb.text-rotatec-lb.timelinec-lb.tooltip c-lb.alertc-lb.bar-chartc-lb.bubble-chartc-lb.carouselc-lb.checkboxc-lb.diffc-lb.doughnut-chartc-lb.fab-speed-dialc-lb.filterc-lb.hover-3dc-lb.inputc-lb.labelc-lb.listc-lb.menuc-lb.paginationc-lb.polar-area-chartc-lb.radial-progressc-lb.ratingc-lb.skeletonc-lb.statusc-lb.tablec-lb.text-rotatec-lb.timelinec-lb.tooltip

```

```html
c-lb.avatarc-lb.breadcrumbsc-lb.buttonc-lb.chartsc-lb.codec-lb.dividerc-lb.drawerc-lb.fieldsetc-lb.footerc-lb.hover-galleryc-lb.joinc-lb.line-chartc-lb.loadingc-lb.modalc-lb.phonec-lb.progressc-lb.radioc-lb.scatter-chartc-lb.stackc-lb.stepsc-lb.tabsc-lb.textareac-lb.toastc-lb.validator c-lb.avatarc-lb.breadcrumbsc-lb.buttonc-lb.chartsc-lb.codec-lb.dividerc-lb.drawerc-lb.fieldsetc-lb.footerc-lb.hover-galleryc-lb.joinc-lb.line-chartc-lb.loadingc-lb.modalc-lb.phonec-lb.progressc-lb.radioc-lb.scatter-chartc-lb.stackc-lb.stepsc-lb.tabsc-lb.textareac-lb.toastc-lb.validator

```

--------------------------------

### Install labbstart

Source: https://labb.io/docs/guide/getting-started/installation.md

Use this command to install the labbstart package, which helps scaffold new Django projects with labb pre-configured.

```bash
pip install labbstart
```

--------------------------------

### Setup Labb Project Dependencies

Source: https://labb.io/llms.txt

Install project dependencies after initializing Labb. This ensures all required packages are available for development.

```bash
labb setup --install-deps
```

--------------------------------

### View Specific Component Examples

Source: https://labb.io/docs/guide/references/labb-cli.md

Use this command to view specific examples for a component, such as color variants for a badge.

```bash
labb components ex badge basic color-variants
```

--------------------------------

### Initialize Labb Project

Source: https://labb.io/docs/guide/references/labb-cli.md

Use for interactive project setup or quick setup with defaults. The `--force` option overwrites existing files.

```bash
labb init
```

```bash
labb init --defaults
```

```bash
labb init --force
```

--------------------------------

### View Labb Component Examples

Source: https://labb.io/llms.txt

Retrieve working examples with correct syntax for a given component. This helps in understanding how to use components effectively and avoids syntax errors.

```bash
labb components ex <component>
```

--------------------------------

### Basic List Example

Source: https://labb.io/docs/ui/data-display/list.md

Renders a basic unordered list using the List component. No specific setup is required beyond including the component.

```django
<c-lbdocs.component_example path="list/basic" />
```

--------------------------------

### Kbd Full Keyboard (RGB) Example

Source: https://labb.io/docs/ui/data-display/kbd.md

A comprehensive example showcasing a full keyboard layout using Kbd components, potentially with RGB styling.

```html
<div class="flex gap-1">
  <kbd class="kbd">Esc</kbd>
  <kbd class="kbd">F1</kbd>
  <kbd class="kbd">F2</kbd>
  <kbd class="kbd">F3</kbd>
  <kbd class="kbd">F4</kbd>
  <kbd class="kbd">F5</kbd>
  <kbd class="kbd">F6</kbd>
  <kbd class="kbd">F7</kbd>
  <kbd class="kbd">F8</kbd>
  <kbd class="kbd">F9</kbd>
  <kbd class="kbd">F10</kbd>
  <kbd class="kbd">F11</kbd>
  <kbd class="kbd">F12</kbd>
  <kbd class="kbd">PrtSc</kbd>
  <kbd class="kbd">ScrLk</kbd>
  <kbd class="kbd">Pause</kbd>
</div>
<div class="flex gap-1">
  <kbd class="kbd">~</kbd>
  <kbd class="kbd">1</kbd>
  <kbd class="kbd">2</kbd>
  <kbd class="kbd">3</kbd>
  <kbd class="kbd">4</kbd>
  <kbd class="kbd">5</kbd>
  <kbd class="kbd">6</kbd>
  <kbd class="kbd">7</kbd>
  <kbd class="kbd">8</kbd>
  <kbd class="kbd">9</kbd>
  <kbd class="kbd">0</kbd>
  <kbd class="kbd">-</kbd>
  <kbd class="kbd">=</kbd>
  <kbd class="kbd">Bksp</kbd>
</div>
<div class="flex gap-1">
  <kbd class="kbd">Tab</kbd>
  <kbd class="kbd">Q</kbd>
  <kbd class="kbd">W</kbd>
  <kbd class="kbd">E</kbd>
  <kbd class="kbd">R</kbd>
  <kbd class="kbd">T</kbd>
  <kbd class="kbd">Y</kbd>
  <kbd class="kbd">U</kbd>
  <kbd class="kbd">I</kbd>
  <kbd class="kbd">O</kbd>
  <kbd class="kbd">P</kbd>
  <kbd class="kbd">[</kbd>
  <kbd class="kbd">]</kbd>
  <kbd class="kbd">\</kbd>
</div>
<div class="flex gap-1">
  <kbd class="kbd">Caps</kbd>
  <kbd class="kbd">A</kbd>
  <kbd class="kbd">S</kbd>
  <kbd class="kbd">D</kbd>
  <kbd class="kbd">F</kbd>
  <kbd class="kbd">G</kbd>
  <kbd class="kbd">H</kbd>
  <kbd class="kbd">J</kbd>
  <kbd class="kbd">K</kbd>
  <kbd class="kbd">L</kbd>
  <kbd class="kbd">;</kbd>
  <kbd class="kbd">'</kbd>
  <kbd class="kbd">Enter</kbd>
</div>
<div class="flex gap-1">
  <kbd class="kbd">Shift</kbd>
  <kbd class="kbd">Z</kbd>
  <kbd class="kbd">X</kbd>
  <kbd class="kbd">C</kbd>
  <kbd class="kbd">V</kbd>
  <kbd class="kbd">B</kbd>
  <kbd class="kbd">N</kbd>
  <kbd class="kbd">M</kbd>
  <kbd class="kbd">,</kbd>
  <kbd class="kbd">.</kbd>
  <kbd class="kbd">/</kbd>
  <kbd class="kbd">Shift</kbd>
</div>
<div class="flex gap-1">
  <kbd class="kbd">Ctrl</kbd>
  <kbd class="kbd">Win</kbd>
  <kbd class="kbd">Alt</kbd>
  <kbd class="kbd">Space</kbd>
  <kbd class="kbd">Alt</kbd>
  <kbd class="kbd">Win</kbd>
  <kbd class="kbd">Menu</kbd>
  <kbd class="kbd">Ctrl</kbd>
</div>
```

--------------------------------

### labb setup

Source: https://labb.io/docs/guide/references/labb-cli.md

Install labb dependencies, including Tailwind CSS CLI and daisyUI, in the current Django project. Options allow for automatic or skipped installation of Node.js dependencies.

```APIDOC
## labb setup

### Description
Install labb dependencies (Tailwind CSS CLI and daisyUI) in the current Django project.

### Usage
```bash
labb setup [OPTIONS]
```

### Options
- `--install-deps / --no-install-deps`: Install Node.js dependencies

### Examples
```bash
# Install dependencies (interactive)
labb setup

# Install dependencies automatically
labb setup --install-deps

# Skip dependency installation
labb setup --no-install-deps
```
```

--------------------------------

### ChatGPT Example Prompt

Source: https://labb.io/docs/guide/references/llms.txt.md

An example prompt for ChatGPT demonstrating how to request a specific component using labb's documentation.

```text
 give me a labb button component with primary variant
```

--------------------------------

### Install Node.js and npm

Source: https://labb.io/docs/guide/references/labb-cli.md

If you encounter the 'npx is not available' error, you need to install Node.js and npm. Visit the official Node.js website for instructions.

```bash
# Install Node.js and npm
# Visit https://nodejs.org/
```

--------------------------------

### View Specific Labb Component Examples

Source: https://labb.io/llms.txt

Copy exact syntax for specific examples of a component. Supports multiple example names for detailed usage.

```bash
labb components ex <component> <example-name> <example-name> ...
```

--------------------------------

### Install and Initialize Labb UI

Source: https://labb.io/

Install the labbui package and run initialization commands to set up default configurations and wire up URLs and settings for your Django project.

```bash
pip install labbui
labb init --defaults && labb setup
```

--------------------------------

### Swap with Icons Example

Source: https://labb.io/docs/ui/actions/swap.md

Demonstrates using the Swap component with icons.

```html
<c-lbdocs.component_example path="swap/with-icons" />
```

--------------------------------

### Non-interactive Labb Project Setup for CI/CD

Source: https://labb.io/docs/guide/references/labb-cli.md

These commands provide a non-interactive way to initialize and set up a Labb project, suitable for CI/CD pipelines. It uses default settings and installs dependencies.

```bash
# Non-interactive setup
labb init --defaults
labb setup --install-deps
```

--------------------------------

### Labb CLI Help Commands

Source: https://labb.io/llms.txt

Examples of Labb CLI commands for getting help, listing main commands, and performing development workflows like automatic rebuilding.

```bash
labb --help
labb <command> --help
labb dev
labb components inspect <component>
labb components ex <component> [example1] [example2]
labb components ex --tree
labb icons search/packs/info
```

--------------------------------

### Pie Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a pie chart.

```APIDOC
## `c-lb.chart.pie`

### Description

Pie chart component.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"labels": ["Red", "Blue", "Yellow"], "datasets": [{"data": [300, 50, 100]}]}`

### Request Example

```html
<c-lb.chart.pie data='{
    "labels": ["Red", "Blue", "Yellow"],
    "datasets": [{"data": [300, 50, 100]}]
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Basic Kbd Example

Source: https://labb.io/docs/ui/data-display/kbd.md

Displays a basic Kbd component. This is the default usage.

```html
<kbd>Ctrl</kbd>
```

--------------------------------

### Gemini Example Prompt

Source: https://labb.io/docs/guide/references/llms.txt.md

An example prompt for Gemini showing how to request a component with specific attributes using labb's documentation.

```text
 create a labb card component with image and description
```

--------------------------------

### Install labbui with Poetry

Source: https://labb.io/docs/guide/getting-started/installation.md

Install the labbui package for an existing Django project using Poetry.

```bash
poetry add labbui
```

--------------------------------

### Install Labb UI with pip

Source: https://labb.io/docs/guide/getting-started/introduction.md

Use this command to install the Labb UI package. Ensure you have pip installed.

```html
<c-lb.button
  variant="primary"
  icon="rmx.terminal"
  size="lg"
  class="shadow-xl"
>
    pip install labbui
</c-lb.button>
```

--------------------------------

### Start CSS Watcher and Django Server

Source: https://labb.io/docs/guide/getting-started/installation.md

After creating a project, use these commands in separate terminals to start the CSS watcher and the Django development server.

```bash
# Terminal 1 — CSS watcher
cd your-project-name && labb dev
```

```bash
# Terminal 2 — Django server
cd your-project-name && python manage.py runserver
```

--------------------------------

### Swap Basic Example

Source: https://labb.io/docs/ui/actions/swap.md

A basic implementation of the Swap component.

```html
<c-lbdocs.component_example path="swap/basic" />
```

--------------------------------

### Install Labbicons for Django

Source: https://labb.io/docs/icons/getting-started/introduction.md

Install the labbicons package using pip. If you are using labbui, install it with the icons extra.

```bash
pip install labbicons
```

```bash
pip install labbui[icons]
```

--------------------------------

### Doughnut Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a doughnut chart.

```APIDOC
## `c-lb.chart.doughnut`

### Description

Doughnut chart component.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"labels": ["North", "South", "East", "West"], "datasets": [{"data": [12, 19, 3, 17]}]}`

### Request Example

```html
<c-lb.chart.doughnut data='{
    "labels": ["North", "South", "East", "West"],
    "datasets": [{"data": [12, 19, 3, 17]}]
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Bubble Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a bubble chart.

```APIDOC
## `c-lb.chart.bubble`

### Description

Bubble chart with {x, y, r} point objects.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"datasets": [{"label": "My First dataset", "data": [{"x": 10, "y": 20, "r": 5}, {"x": 15, "y": 30, "r": 10}, {"x": 25, "y": 40, "r": 15}]}]}`

### Request Example

```html
<c-lb.chart.bubble data='{
    "datasets": [{"label": "My First dataset", "data": [{"x": 10, "y": 20, "r": 5}, {"x": 15, "y": 30, "r": 10}, {"x": 25, "y": 40, "r": 15}]}
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Basic Button Example

Source: https://labb.io/docs/ui/actions/button.md

Demonstrates the fundamental usage of the button component.

```html
<c-lbdocs.component_example path="button/basic" />
```

--------------------------------

### Basic Progress Example

Source: https://labb.io/docs/ui/feedback/progress.md

Renders a standard progress bar. Use this for simple progress indication.

```html
<progress class="progress" value="30" max="100">30%</progress>
```

--------------------------------

### Swap Hamburger Menu Example

Source: https://labb.io/docs/ui/actions/swap.md

An example of using the Swap component to create a hamburger menu icon.

```html
<c-lbdocs.component_example path="swap/hamburger-menu" />
```

--------------------------------

### Responsive Diff Example

Source: https://labb.io/docs/ui/data-display/diff.md

Demonstrates a responsive implementation of the Diff component that adapts to different screen sizes.

```html
<c-lbdocs.component_example path="diff/responsive" previewStyle="block" />
```

--------------------------------

### Install labbui with pip

Source: https://labb.io/docs/guide/getting-started/installation.md

Install the labbui package for an existing Django project using pip.

```bash
pip install labbui
```

--------------------------------

### Tab Sizes Example

Source: https://labb.io/docs/ui/navigation/tabs.md

Demonstrates different size variations for the tabs component.

```html
<c-lbdocs.component_example path="tabs/sizes"  style="stacked" />
```

--------------------------------

### Modal Placement Example

Source: https://labb.io/docs/ui/actions/modal.md

Shows various positioning options for the modal on the screen.

```html
<c-lbdocs.component_example path="modal/placement" style="tab" />
```

--------------------------------

### Modal Sizes Example

Source: https://labb.io/docs/ui/actions/modal.md

Demonstrates how to control the size of the modal component.

```html
<c-lbdocs.component_example path="modal/sizes" style="tab" />
```

--------------------------------

### Responsive Modal Example

Source: https://labb.io/docs/ui/actions/modal.md

Illustrates how the modal component adapts to different screen sizes.

```html
<c-lbdocs.component_example path="modal/responsive" style="tab" />
```

--------------------------------

### Line Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a line chart with optional fill areas.

```APIDOC
## `c-lb.chart.line`

### Description

Line chart with optional fill areas.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"labels": ["Jan", "Feb", "Mar"], "datasets": [{"label": "Sales", "data": [50, 70, 60]}]}`
- **grid** (boolean) - Optional - Whether to display grid lines.
- **animation** (boolean) - Optional - Whether to enable animations.

### Request Example

```html
<c-lb.chart.line data='{
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{"label": "Sales", "data": [50, 70, 60]}]
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Radar Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a radar (spider) chart.

```APIDOC
## `c-lb.chart.radar`

### Description

Radar / spider chart component.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"], "datasets": [{"label": "My First dataset", "data": [65, 59, 90, 81, 56, 55, 40]}]}`

### Request Example

```html
<c-lb.chart.radar data='{
    "labels": ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
    "datasets": [{"label": "My First dataset", "data": [65, 59, 90, 81, 56, 55, 40]}]
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Install Labb Icons Package

Source: https://labb.io/docs/guide/references/labb-cli.md

Before using icon commands, ensure the labbicons package is installed. This is an optional step.

```bash
pip install labbicons
```

--------------------------------

### Basic Drawer Example

Source: https://labb.io/docs/ui/layout/drawer.md

Demonstrates the fundamental usage of the Drawer component for creating a slide-out sidebar.

```html
<c-lbdocs.component_example path="drawer/basic" />
```

--------------------------------

### Install Labb UI

Source: https://labb.io/llms.txt

Install the labbui package using pip or poetry. Add 'django_cotton' and 'labb' to your Django project's INSTALLED_APPS.

```bash
pip install labbui
# or
poetry add labbui
```

```python
INSTALLED_APPS = [
    ...
    'django_cotton',
    'labb',
]
```

--------------------------------

### Basic Indicator Example

Source: https://labb.io/docs/ui/layout/indicator.md

Demonstrates the basic usage of the Indicator component.

```html
<div class="indicator">
  <span class="indicator-item badge badge-secondary"></span>
  <div class="grid w-32 h-32 bg-base-300 place-items-center">Content</div>
</div>
```

--------------------------------

### Reactive Doughnut Chart Example

Source: https://labb.io/docs/ui/charts/doughnut.md

Renders a reactive doughnut chart. This example likely involves dynamic data updates.

```html
<c-lbdocs.component_example path="chart/doughnut-reactive" />
```

--------------------------------

### Basic Collapse Example

Source: https://labb.io/docs/ui/data-display/collapse.md

Demonstrates the fundamental usage of the Collapse component to hide and show content.

```html
<c-lbdocs.component_example path="collapse/basic" />
```

--------------------------------

### Basic Tabs Example

Source: https://labb.io/docs/ui/navigation/tabs.md

Renders a simple set of tabs using the basic configuration.

```html
<c-lbdocs.component_example path="tabs/basic" style="stacked"/>
```

--------------------------------

### labb components

Source: https://labb.io/docs/guide/references/labb-cli.md

Inspect available components and view their examples.

```APIDOC
## labb components

### Description
Inspect available components and view their examples.

### Usage
```bash
labb components [OPTIONS]
```

### Examples
```bash
# Example usage (specific command details not provided in source)
labb components inspect --name "button"
```
```

--------------------------------

### Basic Stack Example

Source: https://labb.io/docs/ui/layout/stack.md

Demonstrates the default usage of the Stack component for creating a basic layered effect.

```html
<c-lbdocs.component_example path="stack/basic" />
```

--------------------------------

### Basic Join Example

Source: https://labb.io/docs/ui/layout/join.md

Demonstrates the basic usage of the Join component to group elements.

```html
<div class="join">
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
  <button class="btn join-item">Button</button>
</div>
```

--------------------------------

### Reactive Button Example

Source: https://labb.io/docs/ui/actions/button.md

Shows a button with reactive states. The 'block' previewStyle is applied.

```html
<c-lbdocs.component_example path="button/reactive" previewStyle="block" />
```

--------------------------------

### Basic Link Example

Source: https://labb.io/docs/ui/navigation/link.md

Demonstrates the basic usage of the Link component for a standard hyperlink.

```html
<c-lb.link href="#">Basic Link</c-lb.link>
```

--------------------------------

### Basic Modal Example

Source: https://labb.io/docs/ui/actions/modal.md

Demonstrates the fundamental structure and usage of the basic modal component.

```html
<c-lbdocs.component_example path="modal/basic" style="tab" />
```

--------------------------------

### Basic Radio Example

Source: https://labb.io/docs/ui/data-input/radio.md

Demonstrates the basic usage of the Radio component in Django.

```django
{% comment %}<c-lbdocs.component_example path="radio/basic" />{% endcomment %}
```

--------------------------------

### Basic Menu Example

Source: https://labb.io/docs/ui/navigation/menu.md

Renders a standard vertical menu. Use for sidebars or link lists.

```html
<c-lb.menu>
  <c-lb.menu.item href="#!">Item 1</c-lb.menu.item>
  <c-lb.menu.item href="#!">Item 2</c-lb.menu.item>
  <c-lb.menu.item href="#!">Item 3</c-lb.menu.item>
</c-lb.menu>
```

--------------------------------

### Join with Inputs Example

Source: https://labb.io/docs/ui/layout/join.md

Shows how to integrate input fields within the Join component for unified controls.

```html
<div class="join">
  <div>
    <input class="input input-bordered join-item" placeholder="Search"/>
  </div>
  <button class="btn join-item">Search</button>
</div>
```

--------------------------------

### VSCode Project-level Setup

Source: https://labb.io/docs/guide/references/llms.txt.md

Save the llms.txt file to `.github/labb.instructions.md` using this curl command to set up Copilot to use the file by default in your workspace.

```bash
curl -L  --create-dirs -o .github/labb.instructions.md
```

--------------------------------

### Basic Toggle Example

Source: https://labb.io/docs/ui/data-input/toggle.md

Demonstrates the default appearance of the toggle switch. Use this for simple on/off selections.

```html
<input type="checkbox" class="toggle" />
```

--------------------------------

### Basic Diff Example

Source: https://labb.io/docs/ui/data-display/diff.md

Demonstrates the basic usage of the Diff component for side-by-side content comparison.

```html
<c-lbdocs.component_example path="diff/basic" previewStyle="block" />
```

--------------------------------

### Menu Sizes Example

Source: https://labb.io/docs/ui/navigation/menu.md

Demonstrates different menu sizes using the `size` prop. Available sizes are `xs`, `sm`, `md`, `lg`.

```html
<c-lb.menu size="sm">
  <c-lb.menu.item href="#!">Small Item</c-lb.menu.item>
</c-lb.menu>
<c-lb.menu size="md">
  <c-lb.menu.item href="#!">Medium Item</c-lb.menu.item>
</c-lb.menu>
<c-lb.menu size="lg">
  <c-lb.menu.item href="#!">Large Item</c-lb.menu.item>
</c-lb.menu>
```

--------------------------------

### Tabs with Icons Example

Source: https://labb.io/docs/ui/navigation/tabs.md

Shows how to integrate icons within the tab handles for enhanced visual cues.

```html
<c-lbdocs.component_example path="tabs/with-icons" style="stacked" />
```

--------------------------------

### Kbd Sizes Example

Source: https://labb.io/docs/ui/data-display/kbd.md

Shows the different size variants available for the Kbd component, ranging from extra-small to extra-large.

```html
<kbd class="kbd xs">xs</kbd>
<kbd class="kbd sm">sm</kbd>
<kbd class="kbd">md</kbd>
<kbd class="kbd lg">lg</kbd>
<kbd class="kbd xl">xl</kbd>
```

--------------------------------

### Basic Hero Example

Source: https://labb.io/docs/ui/layout/hero.md

Renders a simple hero section. Use for foundational hero layouts.

```django
{% include "c-lb/hero/basic.html" %}
```

--------------------------------

### Get CSS Output Path with lb_css_path

Source: https://labb.io/docs/guide/references/lb-tags.md

Use the `lb_css_path` tag to retrieve the CSS output filename from your labb configuration. It falls back to 'css/output.css' if no configuration is found. This example demonstrates assigning the path to a variable and using it in a link tag.

```html
{% load lb_tags %}

{% lb_css_path as css_path %}
<link rel="stylesheet" href="{% static css_path %}">
```

--------------------------------

### Basic Timeline Example

Source: https://labb.io/docs/ui/data-display/timeline.md

Renders a default vertical timeline. Each item includes a connector and content.

```html
<c-lbdocs.component_example path="timeline/basic" />
```

--------------------------------

### Basic Card Example

Source: https://labb.io/docs/ui/data-display/card.md

Demonstrates the fundamental structure of a simple card component.

```html
<c-lbdocs.component_example path="card/basic" style="tab" />
```

--------------------------------

### Drawer with All Slots Custom

Source: https://labb.io/docs/ui/layout/drawer.md

Example showing customization of all available slots within the Drawer component.

```html
<c-lbdocs.component_example path="drawer/all-slots-custom" />
```

--------------------------------

### Checked Toggle Example

Source: https://labb.io/docs/ui/data-input/toggle.md

Shows how to render a toggle switch in its 'on' state. Useful for pre-selecting options.

```html
<input type="checkbox" class="toggle" checked />
```

--------------------------------

### Keyboard Shortcut Example

Source: https://labb.io/

Illustrates how to display keyboard shortcuts using the 'kbd' component. This is helpful for indicating common key combinations for actions.

```html
`⌘` `S`

```

```html
`⌘` `K`

```

--------------------------------

### Swap Checked State Example

Source: https://labb.io/docs/ui/actions/swap.md

Demonstrates how to set the checked state for the Swap component.

```html
<c-lbdocs.component_example path="swap/checked-state" />
```

--------------------------------

### Basic Divider Example

Source: https://labb.io/docs/ui/layout/divider.md

Demonstrates the default appearance of the Divider component. Use this for simple content separation.

```html
<c-lbdocs.component_example path="divider/basic" previewStyle="block" />
```

--------------------------------

### Swap Flip Effect Example

Source: https://labb.io/docs/ui/actions/swap.md

Illustrates the flip transition effect for the Swap component.

```html
<c-lbdocs.component_example path="swap/flip-effect" />
```

--------------------------------

### Basic Input Example

Source: https://labb.io/docs/ui/data-input/input.md

Renders a standard styled input field. This is the most basic usage of the component.

```html
<c-lbdocs.component_example path="input/basic" />
```

--------------------------------

### Scatter Plot Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a scatter plot.

```APIDOC
## `c-lb.chart.scatter`

### Description

Scatter plot with {x, y} point objects.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"datasets": [{"label": "My First dataset", "data": [{"x": 10, "y": 20}, {"x": 15, "y": 30}, {"x": 25, "y": 40}]}]}`

### Request Example

```html
<c-lb.chart.scatter data='{
    "datasets": [{"label": "My First dataset", "data": [{"x": 10, "y": 20}, {"x": 15, "y": 30}, {"x": 25, "y": 40}]}
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Basic Accordion Example

Source: https://labb.io/docs/ui/data-display/accordion.md

Demonstrates the fundamental usage of the Accordion component for creating collapsible content sections.

```django
{% load c_lb %}

{% c_lb.accordion %}
  {% c_lb.accordion.item "First Item" %}
    Content for the first item.
  {% end_c_lb.accordion.item %}
  {% c_lb.accordion.item "Second Item" %}
    Content for the second item.
  {% end_c_lb.accordion.item %}
{% end_c_lb.accordion %}
```

--------------------------------

### Stack Directions Example

Source: https://labb.io/docs/ui/layout/stack.md

Illustrates how to control the direction and offset of stacked elements using the Stack component.

```html
<c-lbdocs.component_example path="stack/directions" />
```

--------------------------------

### Styled Fieldset Example

Source: https://labb.io/docs/ui/data-input/fieldset.md

Shows how to apply styling to the Fieldset component for a more visually appealing layout.

```django
{% load cotton %}
{% lb.fieldset class="bg-base-100 p-4 rounded-lg shadow-md" %}
  {% lb.fieldset.legend "Styled Example" class="text-lg font-semibold mb-4" %}
  {% lb.input label="Username" name="username" %}
  {% lb.input label="Password" name="password" type="password" %}
{% endlb.fieldset %}
```

--------------------------------

### Polar Area Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a polar area chart.

```APIDOC
## `c-lb.chart.polar-area`

### Description

Polar area chart component.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"labels": ["Red", "Green", "Yellow", "Blue"], "datasets": [{"data": [11, 16, 7, 3], "backgroundColor": ["rgb(255, 99, 132)", "rgb(75, 192, 192)", "rgb(255, 205, 86)", "rgb(201, 203, 207)"]}]}`

### Request Example

```html
<c-lb.chart.polar-area data='{
    "labels": ["Red", "Green", "Yellow", "Blue"],
    "datasets": [{"data": [11, 16, 7, 3], "backgroundColor": ["rgb(255, 99, 132)", "rgb(75, 192, 192)", "rgb(255, 205, 86)", "rgb(201, 203, 207)"]}]
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Checkbox Validation Example

Source: https://labb.io/docs/ui/data-input/validator.md

Presents an example of using the Validator component with checkbox inputs.

```django
{% include "c-lb.validator.hint" with field=form.terms %}
```

--------------------------------

### Windsurf Project-level Setup

Source: https://labb.io/docs/guide/references/llms.txt.md

Save the llms.txt file to `.windsurf/rules/labb.mdc` using this curl command for project-specific documentation integration in Windsurf.

```bash
curl -L  --create-dirs -o .windsurf/rules/labb.mdc
```

--------------------------------

### Basic Menu Item Example

Source: https://labb.io/docs/ui/navigation/menu.md

Shows a standard menu item. Links are defined using the `href` attribute.

```html
<c-lb.menu.item href="#!">Basic Item</c-lb.menu.item>
```

--------------------------------

### Zed Project-level Setup

Source: https://labb.io/docs/guide/references/llms.txt.md

Save the llms.txt file to `.zed/rules/labb.mdc` using this curl command for project-specific documentation integration in Zed.

```bash
curl -L  --create-dirs -o .zed/rules/labb.mdc
```

--------------------------------

### Bar Chart Example

Source: https://labb.io/docs/ui/charts/charts.md

Example of how to render a vertical bar chart by passing JSON data.

```APIDOC
## `c-lb.chart.bar`

### Description

Vertical bar chart component.

### Method

N/A (Django Template Component)

### Endpoint

N/A (Django Template Component)

### Parameters

#### Attributes

- **data** (string) - Required - JSON string representing the chart data. Example: `{"labels": ["Jan", "Feb", "Mar"], "datasets": [{"label": "Revenue", "data": [120, 190, 150]}]}`
- **grid** (boolean) - Optional - Whether to display grid lines.
- **animation** (boolean) - Optional - Whether to enable animations.

### Request Example

```html
<c-lb.chart.bar data='{
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{"label": "Revenue", "data": [120, 190, 150]}]
}' />
```

### Response

N/A (Renders a chart directly in the HTML)
```

--------------------------------

### Cursor Project-level Setup

Source: https://labb.io/docs/guide/references/llms.txt.md

Save the llms.txt file to `.cursor/rules/labb.mdc` using this curl command for project-specific documentation integration.

```bash
curl -L  --create-dirs -o .cursor/rules/labb.mdc
```

--------------------------------

### Kbd Key Combination Example

Source: https://labb.io/docs/ui/data-display/kbd.md

Demonstrates how to display a combination of keys, such as a keyboard shortcut requiring multiple key presses.

```html
<kbd class="kbd">Ctrl</kbd>
<kbd class="kbd">Shift</kbd>
<kbd class="kbd">Del</kbd>
```

--------------------------------

### Navbar Start Section API Reference

Source: https://labb.io/docs/ui/navigation/navbar.md

API reference for the start section of the Navbar component.

```APIDOC
## `c-lb.navbar.start`

### Description

Represents the start section of the Navbar, typically used for placing brand logos or primary navigation elements.

### Parameters

This section does not have explicit parameters documented. Content is added via its slot.
```

--------------------------------

### Navbar Start Section

Source: https://labb.io/docs/ui/navigation/navbar.md

Configures the start section of the navbar, typically used for branding or logos.

```html
<c-lbdocs.component_example path="navbar/start-section" previewStyle="block" />
```

--------------------------------

### Labb Theming Quick Setup in Django

Source: https://labb.io/llms.txt

Integrate Labb's theming capabilities by loading Labb tags, including the `<c-lb.m.dependencies>` component in the head, and ensuring a CSRF token is present in the body.

```html
{% load lb_tags %}
<!-- Base template -->
<html {% labb_theme %}>
<head>
    <c-lb.m.dependencies setThemeEndpoint="{% url 'set_theme' %}" />
</head>
<body>
    {% csrf_token %}  <!-- REQUIRED: Add CSRF token for theme switching -->
    <!-- Your content here -->
</body>
```

--------------------------------

### Form Example with Validator

Source: https://labb.io/docs/ui/data-input/validator.md

A comprehensive example showcasing the Validator component within a full Django form.

```django
{% include "c-lb.validator.hint" with field=form.name %}
{% include "c-lb.validator.hint" with field=form.password %}
{% include "c-lb.validator.hint" with field=form.country %}
{% include "c-lb.validator.hint" with field=form.terms %}
```

--------------------------------

### Basic Rating Example

Source: https://labb.io/docs/ui/data-input/rating.md

Demonstrates the basic usage of the rating component. This renders a default row of star inputs.

```html
<c-lbdocs.component_example path="rating/basic" />
```

--------------------------------

### Kbd Inline Text Example

Source: https://labb.io/docs/ui/data-display/kbd.md

Shows how to use the Kbd component inline with text. This allows for seamless integration of keyboard shortcuts within sentences.

```html
Press <kbd class="kbd">Shift</kbd>+<kbd class="kbd">P</kbd> to open the print dialog.
```

--------------------------------

### Basic Pie Chart Example

Source: https://labb.io/docs/ui/charts/pie.md

Displays a basic pie chart. Ensure the component is correctly configured for rendering.

```html
<c-lbdocs.component_example path="chart/pie" />
```

--------------------------------

### Cline Project-level Setup

Source: https://labb.io/docs/guide/references/llms.txt.md

Save the llms.txt file to `.cline/rules/labb.mdc` using this curl command for project-specific documentation integration in Cline.

```bash
curl -L  --create-dirs -o .cline/rules/labb.mdc
```

--------------------------------

### Timeline with Start and End Content

Source: https://labb.io/docs/ui/data-display/timeline.md

Includes content in the start and end slots of timeline items, in addition to the middle content.

```html
<c-lbdocs.component_example path="timeline/with-start-end" />
```

--------------------------------

### Kbd With Icon Example

Source: https://labb.io/docs/ui/data-display/kbd.md

Illustrates how to include an icon within the Kbd component. This is useful for visually representing keys like the Windows key.

```html
<kbd><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-3 h-3">
  <path stroke-linecap="round" stroke-linejoin="round" d="M15 7a2.25 2.25 0 00-3.75 0m7.5 0a2.25 2.25 0 01-3.75 0m7.5 0a2.25 2.25 0 00-3.75 0m-3.75 0a2.25 2.25 0 01-3.75 0m-3.75 0a2.25 2.25 0 00-3.75 0m-3.75 0a2.25 2.25 0 01-3.75 0M4.5 17.25v-6a2.25 2.25 0 012.25-2.25h10.5a2.25 2.25 0 012.25 2.25v6a2.25 2.25 0 01-2.25 2.25H6.75a2.25 2.25 0 01-2.25-2.25z" />
</svg> Win</kbd>
```

--------------------------------

### Create New Project with Labbstart

Source: https://labb.io/llms.txt

Create a new Django project using labbstart. This can be done interactively or by providing specific arguments for project name, Django version, package manager, kit, and app name.

```bash
labbstart new
# or
labbstart new myproject --django-version 5 --package-manager poetry --kit welcome --app-name starter
```

--------------------------------

### Install Labb Icons

Source: https://labb.io/llms.txt

Install the labbicons package for icon support within Labb components. This package provides access to various icon sets.

```bash
pip install labbicons
# or
poetry add labbicons
```

--------------------------------

### List All Labb Components

Source: https://labb.io/docs/guide/references/labb-cli.md

A quick command to list all available components within the project.

```bash
labb components inspect --list
```

--------------------------------

### Kbd Arrow Keys Example

Source: https://labb.io/docs/ui/data-display/kbd.md

Illustrates the display of arrow keys using the Kbd component. This is helpful for documenting navigation shortcuts.

```html
<kbd class="kbd">↑</kbd>
<kbd class="kbd">↓</kbd>
<kbd class="kbd">←</kbd>
<kbd class="kbd">→</kbd>
```

--------------------------------

### Extracted Classes from Example Template

Source: https://labb.io/docs/guide/concepts/building-css.md

These are the CSS classes that `labb scan` extracts from the example HTML template. They represent the base classes and attribute-specific classes needed for styling the components.

```text
btn
btn-primary
btn-lg
card
card-body
card-title
```

--------------------------------

### Extracted CSS Classes Example

Source: https://labb.io/docs/guide/concepts/building-css.md

This is an example of CSS classes extracted by the `labb scan` command based on the provided HTML template structure. These classes are written to a text file (default: `static_src/labb-classes.txt`) for the CSS build process.

```text
/* Auto-generated by labb, do not edit */
/* Total classes: 15 */

btn
btn-primary
btn-lg
card
card-body
card-title
...
```

--------------------------------

### Basic Tooltip Example

Source: https://labb.io/docs/ui/feedback/tooltip.md

Demonstrates the basic usage of the Tooltip component. Add contextual hints and hover descriptions to any element.

```django
{% comment %}{% load c_lb %}{% endcomment %}
{% c_lb.tooltip "This is a basic tooltip" %}
  Hover over me
{% endc_lb.tooltip %}
```

--------------------------------

### Basic Hover Gallery Example

Source: https://labb.io/docs/ui/data-display/hover-gallery.md

Demonstrates the basic usage of the hover gallery component. This is the simplest way to implement the component.

```html
<c-lbdocs.component_example path="hover-gallery/basic" />
```

--------------------------------

### Icon at End

Source: https://labb.io/docs/ui/data-display/badge.md

Example of placing an icon at the end of the badge content.

```html
<c-lbdocs.component_example path="badge/icon-end" />
```

--------------------------------

### Basic Doughnut Chart Example

Source: https://labb.io/docs/ui/charts/doughnut.md

Renders a basic doughnut chart. Ensure the component path is correctly configured.

```html
<c-lbdocs.component_example path="chart/doughnut" />
```

--------------------------------

### Swap Disabled State Example

Source: https://labb.io/docs/ui/actions/swap.md

Shows how to disable the Swap component.

```html
<c-lbdocs.component_example path="swap/disabled-state" />
```

--------------------------------

### Initialize Labb Project

Source: https://labb.io/llms.txt

Initialize a new Django project with Labb defaults. This command sets up the necessary configurations for Labb components.

```bash
labb init --defaults
```

--------------------------------

### Scaffold New Django Project with labbstart

Source: https://labb.io/docs/guide/getting-started/installation.md

Run this command to initiate the creation of a new Django project using labbstart. It will interactively prompt for project details.

```bash
labbstart new
```

--------------------------------

### Basic Toast Example

Source: https://labb.io/docs/ui/feedback/toast.md

Demonstrates the basic usage of the Toast component. Place an alert inside a toast to show feedback messages.

```html
<div class="toast">
  <div class="alert alert-info">
    <span>New mail has been arrived.</span>
  </div>
</div>
```

--------------------------------

### Border Tabs Example

Source: https://labb.io/docs/ui/navigation/tabs.md

Displays tabs with a border style for visual separation.

```html
<c-lbdocs.component_example path="tabs/border" />
```

--------------------------------

### Show Labb Components Help

Source: https://labb.io/docs/guide/references/labb-cli.md

Displays help information specifically for the 'labb components' command and its subcommands.

```bash
labb components --help
```

--------------------------------

### Basic Pagination Example

Source: https://labb.io/docs/ui/navigation/pagination.md

Renders standard pagination controls. Pass current page, total pages, and a URL pattern.

```html
<c-lbdocs.component_example path="pagination/basic" />
```

--------------------------------

### Integrated Icons

Source: https://labb.io/docs/ui/data-display/badge.md

Example of badges with icons seamlessly integrated within the badge.

```html
<c-lbdocs.component_example path="badge/with-icons-integrated" />
```

--------------------------------

### Build Labb Project for Production

Source: https://labb.io/docs/guide/references/labb-cli.md

Generate a production-ready build of your Labb project. Use the --minify option to optimize the output.

```bash
labb build --minify
```
Tokens:
Raw