### Initialize Labb Project

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Initializes a new Labb project by creating configuration files and project structure. Follow with `labb setup` to install dependencies.

```bash
# Initialize project (creates config + project structure)
labb init
```

```bash
# Just install dependencies (project already initialized)
labb setup
```

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

### Basic Dock Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/3_navigation/dock.md

Renders a standard dock component. Use this as a starting point for your bottom navigation.

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

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

### Explore Component Examples

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Explore available component examples in a tree format.

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

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

### View Labb Component Examples via CLI

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Retrieve working examples with correct syntax for Labb components. Supports viewing multiple examples by name.

```bash
# See working examples with correct syntax
labb components ex <component>

# View specific examples to copy exact syntax (supports multiple examples)
labb components ex <component> <example-name> <example-name> ...
```

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

### Setup Labb Dependencies

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

The `labb setup` command installs necessary dependencies like Tailwind CSS CLI and daisyUI. It supports interactive setup, automatic dependency installation, or skipping dependency installation.

```bash
labb setup
```

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

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

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

### Basic Indicator Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/indicator.md

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

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

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

### View Specific Component Examples

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

View specific examples for a component, such as 'badge' with 'basic' and 'color-variants'.

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

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

### Basic Bar Chart Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/8_charts/0_charts.md

Drop any chart component into your template and pass a JSON data string to render it. This example shows a basic bar chart.

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

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

### Install Labbstart for Project Scaffolding

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Install Labbstart to quickly scaffold a new Django project with Labb pre-configured. Use 'labbstart new' for interactive project creation.

```bash
pip install labbstart

```

```bash
poetry add labbstart

```

```bash
uv add labbstart

```

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

### Install labbstart

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

Use this command to install the labbstart package, which is used to scaffold new Django projects with Labb pre-configured.

```bash
pip install labbstart
```

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

### Explore All Labb Components and Examples via CLI

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Use this command to explore a tree view of all available Labb components and their examples.

```bash
# Explore all available components and examples
labb components ex --tree
```

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

### View Labb Component Examples

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Use to view and explore examples for Labb components. Options include listing all components with examples or displaying them in a tree format.

```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
labb components ex modal basic-modal
```

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

### Troubleshoot: package.json not found

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Initialize the project and then run setup if 'package.json' is missing.

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

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

### Gemini Integration - Example Prompt

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

An example of how to use the llms.txt URL with a prompt in Gemini to create a Labb card component.

```text
{{ llms_txt_url }} create a labb card component with image and description
```

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

### VSCode Editor Integration - Project Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

Download the llms.txt file using curl and save it to `.github/labb.instructions.md` for permanent workspace setup. This allows Copilot to use Labb's documentation by default.

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

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

### Labb CLI Help Commands

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Examples of Labb CLI commands for getting help, managing projects, building assets, inspecting components, and managing icons.

```bash
labb --help

```

```bash
labb <command> --help

```

```bash
labb init

```

```bash
labb setup --install-deps

```

```bash
labb dev

```

```bash
labb build

```

```bash
labb scan

```

```bash
labb components inspect <component>

```

```bash
labb components ex <component> [example1] [example2]

```

```bash
labb components ex --tree

```

```bash
labb icons search/packs/info

```

```bash
labb llms

```

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

### Install Labbstart with Pip

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

Install the labbstart package using pip. This is the standard way to add Python packages to your project.

```bash
pip install labbstart
```

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

### Windsurf Editor Integration - Project Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

Download the llms.txt file using curl and save it to `.windsurf/rules/labb.mdc` for project-level setup. This makes Labb's documentation available to Windsurf.

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

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

### Zed Editor Integration - Project Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

Download the llms.txt file using curl and save it to `.zed/rules/labb.mdc` for project-level setup. This integrates Labb's documentation into Zed.

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

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

### labb setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

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

```APIDOC
## labb setup

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

### Usage
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
```
```

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

### Basic List Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/list.md

Renders a simple unordered list using the `c-lb.list` component. No specific setup is required beyond including the component in your Django template.

```django
{% comment %}
This is a placeholder for the actual Django template code.
In a real scenario, this would involve the `c-lb.list` tag and `c-lb.list.row`.
{% endcomment %}
{% load lb %}

{% lb.list %}
  {% lb.list.row "Item 1" %}
  {% lb.list.row "Item 2" %}
  {% lb.list.row "Item 3" %}
{% endlb.list %}
```

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

### Install Labbstart with Uv

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

Add the labbstart package to your project using the uv package manager. Uv is a fast Python package installer and resolver.

```bash
uv add labbstart
```

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

### Install Labb UI

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Install the Labb UI package using pip or poetry.

```bash
pip install labbui

```

```bash
poetry add labbui

```

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

### Install Labb UI Component Library

Source: https://github.com/labbhq/labb/blob/main/README.md

Install the Labb UI component library using pip. For components that include icons, install with the 'icons' extra.

```bash
pip install labbui

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

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

### Basic Drawer Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/drawer.md

Demonstrates the fundamental usage of the Drawer component.

```html
<c-lb.drawer>
  <c-lb.drawer.side>
    <!-- Sidebar content -->
    <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
      <li><a>Sidebar Item 1</a></li>
      <li><a>Sidebar Item 2</a></li>
    </ul>
  </c-lb.drawer.side>
  <c-lb.drawer.content>
    <!-- Main page content -->
    <div class="p-4 flex flex-col items-center justify-center min-h-screen">
      <h1 class="text-4xl font-bold">Main Content Area</h1>
      <p class="text-lg">Click the button to open the drawer.</p>
      <label for="my-drawer" class="btn btn-primary drawer-button">Open Drawer</label>
    </div>
  </c-lb.drawer.content>
</c-lb.drawer>
```

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

### Cline Editor Integration - Project Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

Download the llms.txt file using curl and save it to `.cline/rules/labb.mdc` for project-level setup. This makes Labb's documentation available to Cline.

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

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

### Labb Quick Start Template

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

A basic HTML template demonstrating the quick start usage of Labb components. It includes loading Labb tags, setting the theme, and using dependency, button, and card components.

```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>

```

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

### Install labbui with Poetry

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

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

```bash
poetry add labbui
```

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

### Cursor Editor Integration - Project Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

Download the llms.txt file using curl and save it to `.cursor/rules/labb.mdc` for project-level setup. This makes Labb's documentation available to Cursor.

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

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

### Install Labbicons

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

Install the labbicons package separately or as part of the labbui installation to enable icon usage in Labb components.

```bash
pip install labbicons
```

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

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

### ChatGPT Integration - Example Prompt

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/6_llms.txt.md

An example of how to use the llms.txt URL with a prompt in ChatGPT to generate a Labb button component.

```text
{{ llms_txt_url }} give me a labb button component with primary variant
```

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

### Global Chart Defaults Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/8_charts/0_charts.md

To share global defaults across all charts on a page, place `<c-lb.chart />` once in your base template. This example shows setting grid and animation defaults.

```html
{# base.html — optional, for global defaults #}
<c-lb.chart grid animation="False" />

{# any page #}
<c-lb.chart.bar data="..." />
<c-lb.chart.line data="..." />
```

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

### Basic Modal Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/1_actions/modal.md

Demonstrates the fundamental structure of a modal. This example shows how to implement a basic modal dialog.

```html
<c-lb.modal>
  <c-lb.modal.action>
    <button class="btn">Open Modal</button>
  </c-lb.modal.action>
  <c-lb.modal.content>
    <h3 class="font-bold text-lg">Hello!</h3>
    <p class="py-4">This modal is opened by clicking the button above.</p>
    <c-lb.modal.close>
      <button class="btn">Close</button>
    </c-lb.modal.close>
  </c-lb.modal.content>
</c-lb.modal>
```

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

### Install Labb Icons Package

Source: https://github.com/labbhq/labb/blob/main/extras/icons/README.md

Install the labbicons package using pip. Alternatively, install labbui with icon support.

```bash
pip install labbicons
# or both labb and labbicons
pip install labbui[icons]
```

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

### Start Labb CSS Development Server

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

After creating your project, navigate to the project directory and run this command to start the CSS development server. This command is essential for live-reloading of CSS changes.

```bash
cd your-project-name
labb dev
```

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

### Form Example with Validator

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/5_data_input/validator.md

Presents a complete form example integrating the Validator component for various fields.

```html
<form method="post">
    {% csrf_token %}

    {% comment "Username field" %}
    <c-lb.validator.hint
        label="Username"
        field="username"
        state="success"
        message="Looks good!"
    >
        <input type="text" name="username" class="input input-bordered" />
    </c-lb.validator.hint>

    {% comment "Password field" %}
    <c-lb.validator.hint
        label="Password"
        field="password"
        state="error"
        message="Password is too short"
    >
        <input type="password" name="password" class="input input-bordered" />
    </c-lb.validator.hint>

    {% comment "Country select" %}
    <c-lb.validator.hint
        label="Country"
        field="country"
        state="warning"
        message="Please select a country"
    >
        <select name="country" class="select select-bordered">
            <option disabled selected>Select country</option>
            <option>United States</option>
            <option>Canada</option>
            <option>Mexico</option>
        </select>
    </c-lb.validator.hint>

    {% comment "Terms checkbox" %}
    <c-lb.validator.hint
        label="Agree to terms"
        field="terms"
        state="error"
        message="You must agree to the terms"
    >
        <input type="checkbox" name="terms" class="checkbox" />
    </c-lb.validator.hint>

    <button type="submit" class="btn btn-primary mt-4">Submit</button>
</form>
```

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

### Install labbui with pip

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

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

```bash
pip install labbui
```

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

### Chart Component Setup

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/8_charts/0_charts.md

Basic setup for a bar chart component, passing JSON data directly.

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

### Description

Vertical bar chart component.

### Usage

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

### Parameters

- **data** (string) - Required - JSON string representing the chart data.

### Example

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

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

### Troubleshoot: npx not available

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

If 'npx' is not available, install Node.js and npm from the official website.

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

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

### Start CSS Watcher and Django Server

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

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

```bash
cd your-project-name && labb dev
```

```bash
cd your-project-name && python manage.py runserver
```

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

### Simple Footer Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/footer.md

Presents a minimal and simple footer configuration.

```html
<c-lbdocs.component_example path="footer/simple" style="tab" previewStyle="block" />
```

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

### Start Labb Development Mode

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Starts Labb in development mode, which includes running CSS building and template scanning in watch mode.

```bash
# Start development mode
labb dev
```

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

### Basic Stack Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/stack.md

Demonstrates the basic usage of the Stack component for layering elements.

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

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

### Swap Basic Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/1_actions/swap.md

Demonstrates the basic usage of the Swap component for toggling between two states.

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

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

### Install Labbicons for Icon Support

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Install the labbicons package to enable icon support within Labb components. This is an optional step.

```bash
pip install labbicons

```

```bash
poetry add labbicons

```

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

### Install LabbIcons Package

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/icons/1_getting_started/1_introduction.md

Install the labbicons package using pip. For integration with Labb UI, use the optional icons extra.

```bash
pip install labbicons
# or install alongside labbui
pip install labbui[icons]
```

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

### Start Django Development Server

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

Run the Django development server to serve your web application. This command starts the Python-based server for your Django project.

```bash
cd your-project-name
python manage.py runserver
```

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

### Basic Footer Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/footer.md

Demonstrates the basic structure of the footer component.

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

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

### Basic Hover 3D Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/hover3d.md

Demonstrates the basic usage of the Hover 3D component.

```html
<c-lb.hover3d>
  <div class="w-48 h-48 bg-primary rounded-lg flex items-center justify-center text-white text-xl">Hover me</div>
</c-lb.hover3d>
```

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

### Swap with Icons Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/1_actions/swap.md

Shows how to use the Swap component with icons to indicate different states.

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

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

### Basic Bubble Chart Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/8_charts/bubble.md

This is a basic example of how to render a bubble chart. Ensure the 'chart/bubble' path is correctly configured in your Django project.

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

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

### Basic Browser Mockup Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/7_mockup/mockup-browser.md

Demonstrates the basic usage of the mockup-browser component to wrap content in a browser frame.

```django
{% load ui %}

{% mockup_browser %}
  {# Content to be displayed inside the browser frame #}
  <h1>Hello, World!</h1>
{% endmockup_browser %}
```

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

### Basic Timeline Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/timeline.md

Renders a standard vertical timeline. Ensure the `c-lb.timeline` and `c-lb.timeline.item` components are imported.

```html
<c-lb.timeline>
  <c-lb.timeline.item>
    <c-lb.timeline.start>10:00 AM</c-lb.timeline.start>
    <c-lb.timeline.middle />
    <c-lb.timeline.end>
      <div>
        <div class="font-medium">Event 1</div>
        <div class="text-sm">Details for event 1</div>
      </div>
    </c-lb.timeline.end>
  </c-lb.timeline.item>
  <c-lb.timeline.item>
    <c-lb.timeline.start>11:00 AM</c-lb.timeline.start>
    <c-lb.timeline.middle />
    <c-lb.timeline.end>
      <div>
        <div class="font-medium">Event 2</div>
        <div class="text-sm">Details for event 2</div>
      </div>
    </c-lb.timeline.end>
  </c-lb.timeline.item>
</c-lb.timeline>
```

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

### Basic Hover Gallery Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/hover-gallery.md

Demonstrates the fundamental usage of the hover gallery component.

```html
<c-lb.hover-gallery
  images=[
    "/static/images/gallery/image-1.jpg",
    "/static/images/gallery/image-2.jpg",
    "/static/images/gallery/image-3.jpg",
    "/static/images/gallery/image-4.jpg",
  ]
/>
```

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

### Join with Inputs Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/join.md

Illustrates using the Join component with input fields.

```html
<div class="join">
  <div>
    <div class="text-xs font-medium mb-1 px-1">First Name</div>
    <input class="input input-bordered join-item" placeholder="Search" />
  </div>
  <div>
    <div class="text-xs font-medium mb-1 px-1">Last Name</div>
    <input class="input input-bordered join-item" placeholder="Enter your email" />
  </div>
  <button class="btn join-item">Search</button>
</div>
```

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

### Initialize and Set Up Labb Project

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

Run these commands to initialize Labb's project configuration and structure, and then to install necessary Node.js dependencies.

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

```bash
labb setup
```

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

### Basic Diff Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/diff.md

Demonstrates the fundamental usage of the Diff component for side-by-side comparisons.

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

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

### Basic Join Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/join.md

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

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

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

### Advanced Usage: CI/CD Integration

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Perform non-interactive project initialization and setup, and build for production.

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

```bash
# Production build
labb build --minify
```

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

### Basic Radio Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/5_data_input/radio.md

Demonstrates the basic usage of the radio component in Django.

```html
{% load cotton %}
{% radioset 'options' %}
    {% radio 'option_1' label='Option 1' %}
    {% radio 'option_2' label='Option 2' %}
    {% radio 'option_3' label='Option 3' %}
{% endradioset %}
```

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

### Tab Sizes Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/3_navigation/tabs.md

Demonstrates how to control the size of tabs, allowing for different visual scales within the interface.

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

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

### Basic Collapse Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/collapse.md

Demonstrates the fundamental usage of the Collapse component to toggle content visibility.

```html
<c-lb.collapse title="Collapse Title">
  <p>This is the content that will be toggled.</p>
</c-lb.collapse>
```

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

### Styled Fieldset Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/5_data_input/fieldset.md

Shows how to apply custom styling to the Fieldset component.

```html
<c-lbdocs.component_example path="fieldset/styled" />
```

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

### Tabs with Icons Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/3_navigation/tabs.md

Shows how to integrate icons into tabs, enhancing visual cues and user experience.

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

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

### Labb Button Component with Icons

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Examples of using the Labb button component with various icon placements and styles. Icons can be added at the start, end, or with fill variants, and custom classes can be applied.

```html
<c-lb.button icon="rmx.home">Home</c-lb.button>

```

```html
<c-lb.button icon.fill="rmx.heart" variant="error">Like</c-lb.button>

```

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

```

```html
<c-lb.button icon.fill.end="rmx.check" variant="success">Done</c-lb.button>

```

```html
<c-lb.button icon="rmx.star" icon.class="text-warning">Favorite</c-lb.button>

```

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

### Stack Directions Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/stack.md

Illustrates how to control the direction of element stacking using the Stack component.

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

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

### Getting Help with Labb CLI

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Access general and command-specific help using the --help flag.

```bash
# Show general help
labb --help
```

```bash
# Show command-specific help
labb build --help
labb llms --help
```

```bash
# Show components help
labb components --help
```

```bash
# Show subcommand help
labb components inspect --help
labb components ex --help
```

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

### Initialize Labb Project

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Use `labb init` to start a new Labb project. It can be run interactively, with default settings, or to force overwrite existing files.

```bash
labb init
```

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

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

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

### Troubleshoot: Input CSS file not found

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Initialize the project to generate the necessary CSS files if they are not found.

```bash
# Initialize project (creates CSS files)
labb init
```

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

### Troubleshoot: Configuration file not found

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Initialize a new Labb project if the configuration file is not found.

```bash
# Initialize project
labb init
```

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

### Install Labbdocs Package

Source: https://github.com/labbhq/labb/blob/main/docs/README.md

Use pip to install the labbdocs package into your Python environment.

```bash
pip install labbdocs
```

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

### Using a Custom Configuration File

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/1_config_yaml.md

Demonstrates how to specify a custom configuration file using the `--config` flag or the `LABB_CONFIG_PATH` environment variable.

```bash
# Use specific config file
labb config --config /path/to/custom.yaml

# Set via environment variable
export LABB_CONFIG_PATH=/path/to/custom.yaml
labb build
```

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

### Basic Hero Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/hero.md

Renders a basic hero section. Use for simple, content-focused hero areas.

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

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

### Timeline with Start and End Content

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/timeline.md

Demonstrates using `c-lb.timeline.start` and `c-lb.timeline.end` slots for explicit content placement.

```html
<c-lb.timeline>
  <c-lb.timeline.item>
    <c-lb.timeline.start>
      <div class="text-lg font-bold">Start</div>
    </c-lb.timeline.start>
    <c-lb.timeline.middle />
    <c-lb.timeline.end>
      <div>
        <div class="font-medium">Event 1</div>
        <div class="text-sm">Details for event 1</div>
      </div>
    </c-lb.timeline.end>
  </c-lb.timeline.item>
  <c-lb.timeline.item>
    <c-lb.timeline.start>11:00 AM</c-lb.timeline.start>
    <c-lb.timeline.middle />
    <c-lb.timeline.end>
      <div class="text-lg font-bold">End</div>
    </c-lb.timeline.end>
  </c-lb.timeline.item>
</c-lb.timeline>
```

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

### Navbar Start Section API Reference

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/3_navigation/navbar.md

API reference for the start section of the Navbar component.

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

<c-lbdocs.api_table component_name="navbar.start" />
```

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

### Install Labb UI with pip

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/1_introduction.md

Use this command to install the Labb UI package in your Django project.

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

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

### Navbar Start Section

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/3_navigation/navbar.md

Places content in the start slot of the navbar. Typically used for branding or logos.

```html
<c-lb.navbar>
  <:start>
    <img src="/static/logo.svg" alt="Logo" />
  </:start>
  <:menu>
    <a href="#">Home</a>
    <a href="#">About</a>
  </:menu>
</c-lb.navbar>
```

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

### Responsive Modal Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/1_actions/modal.md

Demonstrates how to create modals that adapt their size and behavior based on screen size. This ensures a good user experience across devices.

```html
<c-lb.modal>
  <c-lb.modal.action>
    <button class="btn">Open Responsive Modal</button>
  </c-lb.modal.action>
  <c-lb.modal.content class="w-full max-w-sm md:max-w-md lg:max-w-lg">
    <h3 class="font-bold text-lg">Responsive Modal</h3>
    <p class="py-4">This modal adjusts its maximum width based on screen size.</p>
    <c-lb.modal.close>
      <button class="btn">Close</button>
    </c-lb.modal.close>
  </c-lb.modal.content>
</c-lb.modal>
```

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

### Install Labbstart with Poetry

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

Add the labbstart package to your project's dependencies using Poetry. This ensures dependency management within your project.

```bash
poetry add labbstart
```

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

### Create New Django Project with Labbstart (Non-Interactive)

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

Create a new Django project with specific configurations using flags. This mode is useful for scripting or when you know all the required parameters.

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

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

### Responsive Diff Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/diff.md

Demonstrates how the Diff component adapts to different screen sizes for a responsive user experience.

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

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

### Create New Django Project with Specific Options

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

Create a new Django project with specific configurations for Django version, package manager, starter kit, and app name.

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

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

### Create New Django Project with Labbstart (Interactive)

Source: https://github.com/labbhq/labb/blob/main/extras/start/README.md

Use the labbstart new command to interactively create a new Django project. You will be prompted for project details like name, Django version, package manager, and starter kit.

```bash
labbstart new
```

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

### Initialize Labb Project

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Initialize a new Django project with Labb pre-configured. This command sets up the necessary configurations and builds the CSS.

```bash
labb init --defaults

```

```bash
labb setup --install-deps

```

```bash
labb dev

```

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

### Build Labb Project for Production

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Builds the Labb project for production. Use the `--minify` flag for optimized output.

```bash
# Build for production
labb build --minify
```

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

### Scaffold a New Project with Labb CLI

Source: https://github.com/labbhq/labb/blob/main/README.md

Initialize a new Django project with Labb components using the CLI. This command sets up the project with default configurations.

```bash
labb init --defaults               # Scaffold a new project
```

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

### Basic Card Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/card.md

Demonstrates the fundamental structure of a card component.

```html
<c-lb.card>
  <c-lb.card.title>Card Title</c-lb.card.title>
  <c-lb.card.body>Card content goes here.</c-lb.card.body>
</c-lb.card>
```

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

### Centered Footer Layout

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/footer.md

Provides an example of a footer with centered content alignment.

```html
<c-lbdocs.component_example path="footer/centered" style="tab" previewStyle="block" />
```

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

### Create New Django Project with labbstart

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

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

```bash
labbstart new
```

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

### Vertical Join Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/join.md

Shows how to apply a vertical orientation to the Join component.

```html
<div class="join join-vertical">
  <button class="btn join-item">Button 1</button>
  <button class="btn join-item">Button 2</button>
  <button class="btn join-item">Button 3</button>
</div>
```

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

### Troubleshoot: No template files found

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Check the template patterns configured in 'labb.yaml' if no template files are found.

```bash
# Check template patterns in labb.yaml
labb config --validate
```

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

### Basic Badge Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/badge.md

Renders a simple badge. This is the most basic usage of the component.

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

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

### Build Documentation with Management Command

Source: https://github.com/labbhq/labb/blob/main/docs/README.md

Use the 'build_docs' management command to generate your documentation. You can specify specific documentation types (e.g., 'ui', 'icons') or build all.

```bash
# Build all documentation
python manage.py build_docs ui
python manage.py build_docs icons

# Or build with quiet output
python manage.py build_docs ui --quiet
```

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

### Add Labbicons to Django Settings

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/1_getting_started/2_installation.md

Include 'labbicons' in your INSTALLED_APPS if you have installed the labbicons package.

```python
INSTALLED_APPS = [
    # ... other apps
    'django_cotton',
    'labb',
    'labbicons',
]
```

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

### Create New Project with Labbstart

Source: https://github.com/labbhq/labb/blob/main/labb/llms/llms.txt

Create a new Django project using Labbstart. This command can be run interactively or with specific arguments for Django version, package manager, kit, and app name.

```bash
labbstart new

```

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

```

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

### Footer with Social Links

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/6_layout/footer.md

Shows an example of a footer incorporating social media links.

```html
<c-lbdocs.component_example path="footer/with-social" style="tab" previewStyle="block" />
```

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

### Compact Timeline Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/timeline.md

Renders a more condensed timeline. This layout is useful for saving space.

```html
<c-lb.timeline class="timeline-compact">
  <c-lb.timeline.item>
    <c-lb.timeline.start>10:00 AM</c-lb.timeline.start>
    <c-lb.timeline.middle />
    <c-lb.timeline.end>
      <div>
        <div class="font-medium">Event 1</div>
        <div class="text-sm">Details for event 1</div>
      </div>
    </c-lb.timeline.end>
  </c-lb.timeline.item>
  <c-lb.timeline.item>
    <c-lb.timeline.start>11:00 AM</c-lb.timeline.start>
    <c-lb.timeline.middle />
    <c-lb.timeline.end>
      <div>
        <div class="font-medium">Event 2</div>
        <div class="text-sm">Details for event 2</div>
      </div>
    </c-lb.timeline.end>
  </c-lb.timeline.item>
</c-lb.timeline>
```

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

### Basic Tooltip Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/4_feedback/tooltip.md

Demonstrates the basic usage of the tooltip component. Use the 'tip' prop to set the hover text.

```html
<c-lb.tooltip tip="This is a tooltip!">
  Hover over me
</c-lb.tooltip>
```

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

### Badge with Integrated Icons

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/badge.md

Example of a badge that includes an icon directly within its structure.

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

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

### Initially Open Collapse

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/collapse.md

Demonstrates how to configure the Collapse component to be open by default.

```APIDOC
## Initially Open Collapse

This example shows how to set up the Collapse component so that its content is visible by default when the page loads.
```

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

### Joined Accordion Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/accordion.md

Demonstrates a 'joined' Accordion style where items appear connected.

```django
{% c_lb.accordion type="joined" %}
  {% c_lb.accordion.item "Item 1" %}
    Content for item 1.
  {% endc_lb.accordion.item %}
  {% c_lb.accordion.item "Item 2" %}
    Content for item 2.
  {% endc_lb.accordion.item %}
{% endc_lb.accordion %}
```

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

### Basic Accordion Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/accordion.md

Demonstrates the basic usage of the Accordion component in Django templates.

```django
{% c_lb.accordion %}
  {% c_lb.accordion.item "Item 1" %}
    Content for item 1.
  {% endc_lb.accordion.item %}
  {% c_lb.accordion.item "Item 2" %}
    Content for item 2.
  {% endc_lb.accordion.item %}
{% endc_lb.accordion %}
```

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

### Labb Icons Usage

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/guide/3_references/0_labb_cli.md

Commands for managing and searching icons. Ensure 'labbicons' is installed first.

```bash
pip install labbicons
```

```bash
labb icons packs
```

```bash
labb icons search "arrow"
```

```bash
labb icons info rmx.arrow-down
```

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

### Table Sizes Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/2_data_display/table.md

Demonstrates different size variations for the table component. Choose a size that best fits your layout and content.

```html
<c-lbdocs.component_example path="table/sizes"  previewStyle="block" />
```

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

### Basic Pie Chart Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/8_charts/pie.md

Displays a basic pie chart. This component is server-rendered with django-cotton.

```django
{% include "c-lb/chart/pie.html" %}
```

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

### Custom Legend Slot Example

Source: https://github.com/labbhq/labb/blob/main/docs/labbdocs/content/ui/5_data_input/fieldset.md

Illustrates how to use a custom slot for the legend in the Fieldset component.

```html
<c-lbdocs.component_example path="fieldset/legend-slot" />
```