# Callaloo
> A modern Vue 3 UI library focused on developer experience, accessibility, and comprehensive theming.

## AI Guidelines
- **Component Prefix**: All components start with `CL` (e.g., `<CLButton />`).
- **Enums for Props**: Always use Enums for colors, sizes, and variants. Import them from `@codeandfunction/callaloo`.
- **Root Provider**: All application code MUST be wrapped in `<CLThemeProvider>`.
- **Form Bindings**: Prefer `v-model` for all form-related components (`CLInput`, `CLSelect`, `CLCheckbox`, etc.).
- **Slots**: Most components use slots for content. Check documentation for named slots like `#header`, `#footer`, or `#content`.

## No-Build / CDN Usage
- Access Callaloo via `window.Callaloo`.
- Register components globally: `app.use(window.Callaloo.default)`.
- Destructure constants from the global object: `const { CLColors, CLSizes } = window.Callaloo;`.
- Reference: [CDN Best Practices](https://callaloo.dev/docs/getting-started/cdn/best-practices)

# Full Documentation

## Getting Started

### Introduction
URL: https://callaloo.dev/docs/getting-started/introduction

# Introduction

Callaloo is a Vue UI library. It is easy to integrate into any Vue3+ project, has a small footprint, can be easily themed, and provides commonly used components.

Callaloo supports both standard installs (package manager + bundler) and no-build usage (CDN / script tag). See [Installation](./installation.md) or [CDN / No-build](./cdn/quickstart.md).

Callaloo is not concerned with providing a huge library of components for every use case. It is instead focused on providing components that can be used as building blocks for composing various patterns commonly used in UI.

## Features

- Dark mode support
- Bundled Icons
- Fully Typed
- Custom themes
- Small footprint
- WCAG 2.1 AA compliant

## Credits

- [floating-ui/floating-ui](https://github.com/floating-ui/floating-ui)
- [iconify/iconify](https://github.com/iconify/iconify)
- [perezd/node-murmurhash](https://github.com/perezd/node-murmurhash)
- [tabler/tabler-icons](https://github.com/tabler/tabler-icons)

---

### Installation
URL: https://callaloo.dev/docs/getting-started/installation

# Installation

## Setup

Add `@codeandfunction/callaloo` to your project

::: tip No-build / CDN
Want to try Callaloo without a build step? See [CDN / No-build](./cdn/quickstart.md) (or jump straight to the live demo at [`https://cdn-playground.callaloo.dev/`](https://cdn-playground.callaloo.dev/)).
:::

::: code-group

```sh [npm]
$ npm add @codeandfunction/callaloo
```

```sh [pnpm]
$ pnpm add @codeandfunction/callaloo
```

```sh [yarn]
$ yarn add @codeandfunction/callaloo
```

:::

## Usage

### Basic Setup

After installing Callaloo, wrap your application with the `CLThemeProvider` component:

```vue


<template>
  <div class="my-app">
    <CLThemeProvider>
      <!-- Your app content goes here -->
    </CLThemeProvider>
  </div>
</template>
```

### Using Components

Import and use Callaloo components in your Vue components:

```vue


<template>
  <div class="my-app">
    <CLThemeProvider>
      <CLCard>
        <h2>Welcome to Callaloo</h2>
        <CLInput v-model="inputValue" placeholder="Enter your name" />
        <CLButton :on-click="handleClick"> Say Hello </CLButton>
      </CLCard>
    </CLThemeProvider>
  </div>
</template>
```

### Component Colors and Variants

Callaloo components support semantic colors and visual variants:

```vue
<template>
  <CLThemeProvider>
    <!-- Different color variants -->
    <CLButton :color="CLColors.Primary">Primary Button</CLButton>
    <CLButton :color="CLColors.Success">Success Button</CLButton>
    <CLButton :color="CLColors.Danger">Danger Button</CLButton>

    <!-- Different visual variants -->
    <CLButton :variant="CLColorVariants.Solid">Solid Button</CLButton>
    <CLButton :variant="CLColorVariants.Outline">Outline Button</CLButton>
    <CLButton :variant="CLColorVariants.Ghost">Ghost Button</CLButton>
  </CLThemeProvider>
</template>
```

### Tree Shaking

Callaloo is built with tree shaking in mind. You can import only the components you need:

```typescript
// Import specific components to reduce bundle size
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLInput from '@codeandfunction/callaloo/CLInput';
```

### TypeScript Support

Callaloo is written in TypeScript and provides full type definitions:

```vue


<template>
  <CLButton :color="buttonColor" :variant="buttonVariant">
    Typed Button
  </CLButton>
</template>
```

### Next Steps

- Learn about [theming](./theming.md) to customize the appearance
- Explore individual [components](../components/a11ybutton.md) for detailed API documentation
- Check out the component examples and stories

## Requirements

- **Vue**: 3.0 or higher
- **Node.js**: 16 or higher
- **TypeScript**: 4.5 or higher (optional but recommended)

---

### Quickstart
URL: https://callaloo.dev/docs/getting-started/cdn/quickstart

# CDN / No-build Quickstart

Use Callaloo **without a build step** by loading it directly from a CDN. This is ideal for prototypes, demos, and static sites.

::: tip Try it live
See the no-build demo at [`https://cdn-playground.callaloo.dev/`](https://cdn-playground.callaloo.dev/).
:::

## HTML Template

Copy this into an `index.html` and open it in a browser. This setup uses **Vue 3**, **TailwindCSS**, and **Callaloo** all via CDN.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Callaloo CDN Quickstart</title>

  <!-- Vue 3 -->
  

  <!-- TailwindCSS (optional for layout) -->
  

  <!-- Callaloo CSS -->
  <link rel="stylesheet" href="https://unpkg.com/@codeandfunction/callaloo/dist/styles.css">

  <!-- Callaloo JS -->
  
</head>
<body class="bg-slate-50">
  <div id="app">
    <!-- Vue App Mount Point -->
  </div>

  <!-- Root: providers only -->
  <template id="root-template">
    <cl-theme-provider>
      <cl-toast-provider>
        <app />
      </cl-toast-provider>
    </cl-theme-provider>
  </template>

  <!-- App layout template -->
  <template id="app-template">
    <div class="p-8 flex flex-col items-center gap-4">
      <cl-heading :type="CLHeadingTypes.XL">Hello Callaloo!</cl-heading>
      <cl-button :on-click="notify">Click Me</cl-button>
    </div>
  </template>

  
</body>
</html>
```

## Tradeoffs

- **No tree-shaking**: you’re loading the global bundle.
- **Larger payload**: great for demos, less ideal for production apps.
- **Versioning**: this example uses the latest version for convenience; pin to a specific version (e.g., `https://unpkg.com/@codeandfunction/callaloo@1.0.0/dist/styles.css`) for stability in production.

## Prefer installing with a bundler?

If you’re using Vite/Nuxt/etc, follow the standard install guide: [Installation](../installation.md).

---

### Best practices
URL: https://callaloo.dev/docs/getting-started/cdn/best-practices

# CDN Development Guide

Building with Callaloo via CDN offers a rapid, no-build development experience. This guide outlines best practices and architectural patterns to keep your "no-build" applications clean, maintainable, and robust.

## Architectural Patterns

### Template Decoupling

Keep your HTML clean by separating Vue templates into their own `<template>` tags. This allows your JavaScript to focus on logic and state management while your HTML handles the structure.

```html
<!-- index.html -->
<div id="app"></div>

<template id="app-template">
  <cl-card>
    <cl-text>Hello from the template!</cl-text>
  </cl-card>
</template>


```

### The Provider Wrapper

Even in a CDN setup, you should wrap your core application in a `Root` component that provides global services like theming and toast notifications. This ensures these services are available throughout your app via Vue's Provide/Inject mechanism.

```javascript
const Root = {
  template: `
    <cl-theme-provider>
      <cl-toast-provider>
        <app />
      </cl-toast-provider>
    </cl-theme-provider>
  `,
  components: { app: App }
};
const app = Vue.createApp(Root);
```

## Working with Global Globals

### Accessing Callaloo Exports

In a CDN environment, everything is available on the `window.Callaloo` object. This includes components, composables, and constants.

```javascript
const { CLButton, CLColors, CLIconNames, useToast } = window.Callaloo;
```

### Global vs. Local Registration

Callaloo provides a `default` export that registers all components globally. This is convenient for CDN usage:

```javascript
const app = Vue.createApp(Root);
app.use(window.Callaloo.default);
app.mount('#app');
```

## Styling Strategies

### Hybrid Layouts

While Callaloo handles UI primitives (buttons, inputs, etc.), you can combine it with **TailwindCSS** for macro-layout (grid, flexbox, spacing) and responsive design.

```html
<header class="flex items-center justify-between p-4 bg-white border-b">
  <cl-heading :type="CLHeadingTypes.XL">Dashboard</cl-heading>
  <cl-button :variant="CLColorVariants.Ghost">Profile</cl-button>
</header>
```

### Prefer Parent Wrappers for Layout

Avoid applying structural or layout-related utility classes (like `w-full`, `mt-4`, `flex-1`) directly to Callaloo components. Instead, wrap the component in a parent element (e.g., a `div`) and apply the layout classes to that wrapper. This keeps the component's internal styles clean and prevents layout logic from interfering with the component's intended visual structure.

```html
<!-- Avoid this -->
<cl-button class="w-full mt-4">Submit</cl-button>

<!-- Prefer this -->
<div class="w-full mt-4">
  <cl-button>Submit</cl-button>
</div>
```

### Using Callaloo Constants

Always use the provided constants (`CLColors`, `CLSizes`, `CLIconNames`, etc.) to ensure consistency with the Callaloo design system. These are accessible from the `window.Callaloo` object.

## Interaction Best Practices

### State-Driven UI

Control complex components like Drawers, Modals, and Accordions using simple Vue `ref` or `reactive` state.

```javascript
const isDrawerOpen = Vue.ref(false);
const openDrawer = () => (isDrawerOpen.value = true);
const closeDrawer = () => (isDrawerOpen.value = false);
```

### Composable Usage

Callaloo composables like `useToast` work seamlessly in CDN environments as long as they are called within a `cl-toast-provider`.

```javascript
setup() {
  const { showToast } = useToast();
  // ...
}
```

## Third-Party Integration

When integrating third-party libraries (e.g., ApexCharts, Leaflet), initialize them inside the `onMounted` lifecycle hook to ensure the DOM is ready.

```javascript
onMounted(() => {
  const chartElement = document.getElementById('my-chart');
  if (chartElement && window.ApexCharts) {
    new ApexCharts(chartElement, options).render();
  }
});
```

## Accessibility

Building with a CDN doesn't excuse a lack of accessibility. Callaloo components are built with accessibility in mind, but you should still follow general web accessibility standards:

- Use semantic HTML (`<main>`, `<nav>`, `<header>`).
- Provide `aria-label` for buttons that only contain icons.
- Use skip links for keyboard-heavy interfaces.

---

### Theming
URL: https://callaloo.dev/docs/getting-started/theming

# Theming

The `CLThemeProvider` component is the foundation of Callaloo's theming system. It configures the visual appearance of your application and enables the use of custom themes. You should wrap your entire application with this component to ensure all Callaloo components receive proper styling.

## Basic Usage

### Default Theme

To use Callaloo with the default theme, wrap your application with the `CLThemeProvider` component:

```vue


<template>
  <div class="my-awesome-app">
    <CLThemeProvider>
      <!-- All of your components that contain any Callaloo components -->
    </CLThemeProvider>
  </div>
</template>
```

### Custom Theme

To use a custom theme configuration, pass a `themeConfig` prop to the `CLThemeProvider`:

```vue


<template>
  <div class="my-awesome-app">
    <CLThemeProvider :theme-config="themeConfig">
      <!-- All of your components that contain any Callaloo components -->
    </CLThemeProvider>
  </div>
</template>
```

## Component API

### CLThemeProvider

#### Props

**Optional:**
- `theme-config: CLThemeConfig` - A custom theme configuration that will be applied to all slotted content of the `CLThemeProvider` component.

**Required:**
- None

## Colors

The Callaloo design system uses a comprehensive color palette where each color has various shades represented from 100 to 900. The color system includes:

- **Primary colors** - Main brand colors
- **Neutral colors** - Grays and backgrounds  
- **Semantic colors** - Success, warning, error states
- **Interactive colors** - Hover, focus, and active states

Each color shade serves different purposes:
- **100-300**: Light tones for backgrounds and subtle elements
- **400-600**: Medium tones for borders and secondary elements  
- **700-900**: Dark tones for text and primary elements

### Default Color Palette

Here are the default color values included in Callaloo's theme:

#### Primary Colors
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #def5ff; border-radius: 4px; display: inline-block;"></div> | `#def5ff` | Light backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #b6eeff; border-radius: 4px; display: inline-block;"></div> | `#b6eeff` | Subtle elements |
| 300 | <div style="width: 20px; height: 20px; background-color: #75e3ff; border-radius: 4px; display: inline-block;"></div> | `#75e3ff` | Light accents |
| 400 | <div style="width: 20px; height: 20px; background-color: #2cd6ff; border-radius: 4px; display: inline-block;"></div> | `#2cd6ff` | Medium elements |
| 500 | <div style="width: 20px; height: 20px; background-color: #00c8ff; border-radius: 4px; display: inline-block;"></div> | `#00c8ff` | **Base primary** |
| 600 | <div style="width: 20px; height: 20px; background-color: #009cd4; border-radius: 4px; display: inline-block;"></div> | `#009cd4` | Interactive elements |
| 700 | <div style="width: 20px; height: 20px; background-color: #007cab; border-radius: 4px; display: inline-block;"></div> | `#007cab` | Text and borders |
| 800 | <div style="width: 20px; height: 20px; background-color: #00688d; border-radius: 4px; display: inline-block;"></div> | `#00688d` | Dark text |
| 900 | <div style="width: 20px; height: 20px; background-color: #065674; border-radius: 4px; display: inline-block;"></div> | `#065674` | Darkest shade |

#### Neutral Colors
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #F7F7F7; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#F7F7F7` | Light backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #F2F2F2; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#F2F2F2` | Subtle backgrounds |
| 300 | <div style="width: 20px; height: 20px; background-color: #EBEBEB; border-radius: 4px; display: inline-block;"></div> | `#EBEBEB` | Light borders |
| 400 | <div style="width: 20px; height: 20px; background-color: #E6E6E6; border-radius: 4px; display: inline-block;"></div> | `#E6E6E6` | Medium borders |
| 500 | <div style="width: 20px; height: 20px; background-color: #DEDEDE; border-radius: 4px; display: inline-block;"></div> | `#DEDEDE` | **Base neutral** |
| 600 | <div style="width: 20px; height: 20px; background-color: #B3B3B3; border-radius: 4px; display: inline-block;"></div> | `#B3B3B3` | Disabled elements |
| 700 | <div style="width: 20px; height: 20px; background-color: #858585; border-radius: 4px; display: inline-block;"></div> | `#858585` | Secondary text |
| 800 | <div style="width: 20px; height: 20px; background-color: #595959; border-radius: 4px; display: inline-block;"></div> | `#595959` | Primary text |
| 900 | <div style="width: 20px; height: 20px; background-color: #2B2B2B; border-radius: 4px; display: inline-block;"></div> | `#2B2B2B` | Darkest text |

#### Semantic Colors

**Success (Green)**
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #9effb2; border-radius: 4px; display: inline-block;"></div> | `#9effb2` | Light success backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #69f68d; border-radius: 4px; display: inline-block;"></div> | `#69f68d` | Success highlights |
| 300 | <div style="width: 20px; height: 20px; background-color: #56e57e; border-radius: 4px; display: inline-block;"></div> | `#56e57e` | Light success accents |
| 400 | <div style="width: 20px; height: 20px; background-color: #41d56e; border-radius: 4px; display: inline-block;"></div> | `#41d56e` | Medium success elements |
| 500 | <div style="width: 20px; height: 20px; background-color: #22c55d; border-radius: 4px; display: inline-block;"></div> | `#22c55d` | **Base success** |
| 600 | <div style="width: 20px; height: 20px; background-color: #00a147; border-radius: 4px; display: inline-block;"></div> | `#00a147` | Success interactions |
| 700 | <div style="width: 20px; height: 20px; background-color: #007230; border-radius: 4px; display: inline-block;"></div> | `#007230` | Success text |
| 800 | <div style="width: 20px; height: 20px; background-color: #00441a; border-radius: 4px; display: inline-block;"></div> | `#00441a` | Dark success |
| 900 | <div style="width: 20px; height: 20px; background-color: #001f08; border-radius: 4px; display: inline-block;"></div> | `#001f08` | Darkest success |

**Danger (Red)**
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #ffd3ce; border-radius: 4px; display: inline-block;"></div> | `#ffd3ce` | Light error backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #ffb2ac; border-radius: 4px; display: inline-block;"></div> | `#ffb2ac` | Error highlights |
| 300 | <div style="width: 20px; height: 20px; background-color: #ff8e88; border-radius: 4px; display: inline-block;"></div> | `#ff8e88` | Light error accents |
| 400 | <div style="width: 20px; height: 20px; background-color: #fe6561; border-radius: 4px; display: inline-block;"></div> | `#fe6561` | Medium error elements |
| 500 | <div style="width: 20px; height: 20px; background-color: #e74c4c; border-radius: 4px; display: inline-block;"></div> | `#e74c4c` | **Base danger** |
| 600 | <div style="width: 20px; height: 20px; background-color: #d20e27; border-radius: 4px; display: inline-block;"></div> | `#d20e27` | Error interactions |
| 700 | <div style="width: 20px; height: 20px; background-color: #9b0018; border-radius: 4px; display: inline-block;"></div> | `#9b0018` | Error text |
| 800 | <div style="width: 20px; height: 20px; background-color: #63000c; border-radius: 4px; display: inline-block;"></div> | `#63000c` | Dark error |
| 900 | <div style="width: 20px; height: 20px; background-color: #360003; border-radius: 4px; display: inline-block;"></div> | `#360003` | Darkest error |

**Warning (Yellow)**
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #ffeaba; border-radius: 4px; display: inline-block;"></div> | `#ffeaba` | Light warning backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #ffdf95; border-radius: 4px; display: inline-block;"></div> | `#ffdf95` | Warning highlights |
| 300 | <div style="width: 20px; height: 20px; background-color: #ffd36a; border-radius: 4px; display: inline-block;"></div> | `#ffd36a` | Light warning accents |
| 400 | <div style="width: 20px; height: 20px; background-color: #fdc836; border-radius: 4px; display: inline-block;"></div> | `#fdc836` | Medium warning elements |
| 500 | <div style="width: 20px; height: 20px; background-color: #f5be1a; border-radius: 4px; display: inline-block;"></div> | `#f5be1a` | **Base warning** |
| 600 | <div style="width: 20px; height: 20px; background-color: #c79800; border-radius: 4px; display: inline-block;"></div> | `#c79800` | Warning interactions |
| 700 | <div style="width: 20px; height: 20px; background-color: #8a6900; border-radius: 4px; display: inline-block;"></div> | `#8a6900` | Warning text |
| 800 | <div style="width: 20px; height: 20px; background-color: #4f3b00; border-radius: 4px; display: inline-block;"></div> | `#4f3b00` | Dark warning |
| 900 | <div style="width: 20px; height: 20px; background-color: #211700; border-radius: 4px; display: inline-block;"></div> | `#211700` | Darkest warning |

**Info (Blue)**
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #cfe2ff; border-radius: 4px; display: inline-block;"></div> | `#cfe2ff` | Light info backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #afceff; border-radius: 4px; display: inline-block;"></div> | `#afceff` | Info highlights |
| 300 | <div style="width: 20px; height: 20px; background-color: #8eb9ff; border-radius: 4px; display: inline-block;"></div> | `#8eb9ff` | Light info accents |
| 400 | <div style="width: 20px; height: 20px; background-color: #6ca4ff; border-radius: 4px; display: inline-block;"></div> | `#6ca4ff` | Medium info elements |
| 500 | <div style="width: 20px; height: 20px; background-color: #4e8ff8; border-radius: 4px; display: inline-block;"></div> | `#4e8ff8` | **Base info** |
| 600 | <div style="width: 20px; height: 20px; background-color: #2470e7; border-radius: 4px; display: inline-block;"></div> | `#2470e7` | Info interactions |
| 700 | <div style="width: 20px; height: 20px; background-color: #004cb5; border-radius: 4px; display: inline-block;"></div> | `#004cb5` | Info text |
| 800 | <div style="width: 20px; height: 20px; background-color: #002e73; border-radius: 4px; display: inline-block;"></div> | `#002e73` | Dark info |
| 900 | <div style="width: 20px; height: 20px; background-color: #00153e; border-radius: 4px; display: inline-block;"></div> | `#00153e` | Darkest info |

**Secondary (Gray-Blue)**
| Shade | Color | Hex Code | Usage |
|-------|-------|----------|-------|
| 0 | <div style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 4px; display: inline-block;"></div> | `#ffffff` | Pure white |
| 100 | <div style="width: 20px; height: 20px; background-color: #DEE2E8; border-radius: 4px; display: inline-block;"></div> | `#DEE2E8` | Light secondary backgrounds |
| 200 | <div style="width: 20px; height: 20px; background-color: #BFC7D4; border-radius: 4px; display: inline-block;"></div> | `#BFC7D4` | Secondary highlights |
| 300 | <div style="width: 20px; height: 20px; background-color: #9EAABD; border-radius: 4px; display: inline-block;"></div> | `#9EAABD` | Light secondary accents |
| 400 | <div style="width: 20px; height: 20px; background-color: #8090A8; border-radius: 4px; display: inline-block;"></div> | `#8090A8` | Medium secondary elements |
| 500 | <div style="width: 20px; height: 20px; background-color: #61738E; border-radius: 4px; display: inline-block;"></div> | `#61738E` | **Base secondary** |
| 600 | <div style="width: 20px; height: 20px; background-color: #4F5D73; border-radius: 4px; display: inline-block;"></div> | `#4F5D73` | Secondary interactions |
| 700 | <div style="width: 20px; height: 20px; background-color: #3A4555; border-radius: 4px; display: inline-block;"></div> | `#3A4555` | Secondary text |
| 800 | <div style="width: 20px; height: 20px; background-color: #272F3A; border-radius: 4px; display: inline-block;"></div> | `#272F3A` | Dark secondary |
| 900 | <div style="width: 20px; height: 20px; background-color: #13161B; border-radius: 4px; display: inline-block;"></div> | `#13161B` | Darkest secondary |

## Theme Configuration

The `CLThemeConfig` interface allows you to customize:

- **Colors**: Complete color palette with shades 100-900
- **Dark Mode**: Enable/disable dark mode styling
- **Font Family**: Set the primary font family for your application

## Best Practices

1. **Application Root**: Always place `CLThemeProvider` at the root of your application to ensure consistent theming across all components.

2. **Color Consistency**: When creating custom themes, maintain the 100-900 shade structure for consistent component behavior.

3. **Theme Switching**: You can dynamically change themes by updating the `theme-config` prop reactively.

---

## Components

### CLA11yButton
URL: https://callaloo.dev/docs/components/a11ybutton

<ComponentDescription component-name="CLA11yButton" />

## Usage

### Default

Wrap your content with the `<CLA11yButton />` component to make it accessible and interactive. The component provides keyboard support (Enter key) and proper focus management.



<ComponentExample component-name="CLA11yButton" :component-props="[{name:'enabled',defaultValue:'true'},{name:'rounded',defaultValue:'true'}]" :imports="['CLA11yButton']" slot='<div style="padding: 1rem; background: #f0f0f0;">Click or press Enter</div>' />

### Colors

Use the `color` prop to customize the focus outline color of the component.



<ComponentExample
  component-name="CLA11yButton"
  :component-props="[{name:'enabled',defaultValue:'true'},{name:'rounded',defaultValue:'true'},{name:'color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLA11yButton','CLColors']"
  slot='<div style="padding: 0.75rem; background: #f0f0f0; text-align: center;">Focus Me</div>' />

### Enabled State

Use the `enabled` prop to control whether the component is interactive. When set to `false`, it mimics the disabled state of a standard button.



```vue


<template>
  <CLA11yButton :color="CLColors.Primary" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Enabled
    </div>
  </CLA11yButton>
  <CLA11yButton :enabled="false" :color="CLColors.Primary" rounded>
    <div style="padding: 0.75rem; background: #f0f0f0; text-align: center; opacity: 0.6;">
      Disabled
    </div>
  </CLA11yButton>
</template>
```

### Rounded Corners

Use the `rounded` prop to control whether the component has rounded corners.



```vue


<template>
  <CLA11yButton :color="CLColors.Primary" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Rounded
    </div>
  </CLA11yButton>
  <CLA11yButton :color="CLColors.Primary" :rounded="false" enabled>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Square
    </div>
  </CLA11yButton>
</template>
```

### Fluid Width

Use the `fluid` prop to control whether the component takes up 100% of its parent's width. By default, this is set to `true`.



```vue


<template>
  <CLA11yButton :color="CLColors.Primary" :fluid="true" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Fluid (100% width)
    </div>
  </CLA11yButton>
  <CLA11yButton :color="CLColors.Primary" :fluid="false" enabled rounded>
    <div style="padding: 0.75rem; background: #e3f2fd; text-align: center;">
      Inline
    </div>
  </CLA11yButton>
</template>
```

### With Clickable Elements

The component intelligently handles clicks on nested clickable elements (like buttons or links). Add the `data-expand-click-area` attribute to elements that should be clickable within the A11y Button.



```vue


<template>
  <CLA11yButton :color="CLColors.Primary" enabled rounded>
    <div class="demo_inline_container rounded">
      <div style="display: flex; justify-content: space-between; align-items: center;">
        <span>Card with button</span>
        <CLButton :color="CLColors.Primary" data-expand-click-area>Action</CLButton>
      </div>
    </div>
  </CLA11yButton>
</template>
```

## Props

<ComponentProps component-name="CLA11yButton" />

## Slots

<ComponentSlots component-name="CLA11yButton" />

---

### CLButton
URL: https://callaloo.dev/docs/components/button

<ComponentDescription component-name="CLButton" />

## Usage

### Default

Use the default slot to set the text of the component.



<ComponentExample component-name="CLButton" :imports="['CLButton']" slot='Button' />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLButton"
  :component-props="[{name:'color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLButton','CLColors']"
  slot='Button' />

### Variants

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLButton"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'},{name:'variant',values:ColorVariantsProps}]"
  :examples="ColorVariantsOptions"
  :imports="['CLButton','CLColors','CLColorVariants']"
  slot='Button' />

### Sizes

Use the `size` prop to customize the component's size.



<ComponentExample
  component-name="CLButton"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'size',values:SizesProps}]"
  :examples="SizesOptions"
  :imports="['CLButton','CLColors','CLColorVariants','CLSizes']"
  slot='Button' />

### Rounded

Use the `border-radius` prop to customize the border radius.



<ComponentExample
  component-name="CLButton"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'border-radius',values:BorderRadiusProps}]"
  :examples="BorderRadiusOptions"
  :imports="['CLButton','CLBorderRadius','CLColors','CLColorVariants']"
  slot='Button' />

### Icons

Use the `icon-before` to position an icon before it's default slot or `icon-after` to position it after it's text. If the default slot has no content, it will render as an icon button.



```vue


<template>
  <CLButton :color="CLColors.Primary" :icon-before="CLIconNames.UserCircle" :variant="CLColorVariants.Soft">Before</CLButton>
  <CLButton :color="CLColors.Primary" :icon-before="CLIconNames.MoodTongueWink" :variant="CLColorVariants.Soft" />
  <CLButton :color="CLColors.Primary" :icon-after="CLIconNames.TrashCan" :variant="CLColorVariants.Soft">After</CLButton>
</template>
```

### States

A button can have various states, which can be set via the `active`, `busy` and `disabled` props.



```vue


<template>
  <CLButton :color="CLColors.Primary" busy>Waiting ...</CLButton>
  <CLButton :color="CLColors.Primary" busy />
  <CLButton :color="CLColors.Primary" active>Active</CLButton>
  <CLButton :color="CLColors.Primary" disabled>Disabled</CLButton>
</template>
```

## Props

<ComponentProps component-name="CLButton" />

## Slots

<ComponentSlots component-name="CLButton" />

---

### CLBadge
URL: https://callaloo.dev/docs/components/badge

<ComponentDescription component-name="CLBadge" />

## Usage

### Default

Use the `label` prop to set the text of the component.



<ComponentExample component-name="CLBadge" :imports="['CLBadge']"  slot="Badge" />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLBadge"
  :component-props="[{name:'color', values:ColorProps}, {name: 'label', defaultValue: '868'}]"
  :examples="ColorOptions"
  :imports="['CLBadge','CLColors']" 
  :supports-slots="false" />

### Variants

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLBadge"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'}, {name:'variant',values:ColorVariantsProps}, {name: 'label', defaultValue: '868'}]"
  :examples="ColorVariantsOptions"
  :imports="['CLBadge','CLColors','CLColorVariants']"
  :supports-slots="false" />

### Rounded

Use the `border-radius` prop to customize the border radius.



<ComponentExample
  component-name="CLBadge"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'border-radius',values:BorderRadiusProps}, {name:'label', defaultValue: '868'}]"
  :examples="BorderRadiusOptions"
  :imports="['CLBadge','CLColors','CLColorVariants']"
  :supports-slots="false" />

### Limit

Use the `limit` prop to set the maximum amount of characters to display. Once the amount characters goes beyond the limit, a plus sign is added after the displayed characters.



<ComponentExample
  component-name="CLBadge"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Contrast'},{name:'label', defaultValue: '868652'},{name:':limit', defaultValue: '4'}]"
  :imports="['CLBadge','CLColors','CLColorVariants']"
  :supports-slots="false" />

### Elevated

Use the `elevated` prop to add a drop shadow.



<ComponentExample
  component-name="CLBadge"
  :component-props="[{name:'color', defaultValue:'CLColors.Secondary'},{name:'variant',defaultValue:'CLColorVariants.Soft'},{name:'label', defaultValue: '868'},{name:'elevated', defaultValue: true}]"
  :imports="['CLBadge','CLColors','CLColorVariants']"
  :supports-slots="false" />

## Props

<ComponentProps component-name="CLBadge" />

---

### CLBanner
URL: https://callaloo.dev/docs/components/banner

<ComponentDescription component-name="CLBanner" />

## Usage

### Default

Use the `title` and `message` props to set the title and message of the banner.



<ComponentExample component-name="CLBanner" :imports="['CLBanner']" :component-props="[{name:'title', defaultValue:'New promotion'},{name:'message', defaultValue:'10% off all components, starting today.'}]" />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLBanner"
  :component-props="[{name:'color', values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLBanner','CLColors']" 
  :supports-slots="false" />

### Variants

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLBanner"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'},{name:'variant',values:ColorVariantsProps}]"
  :examples="ColorVariantsOptions"
  :imports="['CLBanner','CLColors','CLColorVariants']" />

### Busy

The busy state can be set via the `busy` prop. 



<ComponentExample component-name="CLBanner" :imports="['CLBanner']" :component-props="[{name:'busy', defaultValue:true},{name:'title', defaultValue:'New promotion'},{name:'message', defaultValue:'10% off all components, starting today.'}]" />

### Align

Use the `align` to set the horizontal alignment of content. 



<ComponentExample component-name="CLBanner" :imports="['CLBanner']" :component-props="[{name:':align', defaultValue: 'CLAlign.Center'},{name:'title', defaultValue:'New promotion'},{name:'message', defaultValue:'10% off all components, starting today.'}]" />

## Props

<ComponentProps component-name="CLBanner" />

---

### CLDropdownMenu
URL: https://callaloo.dev/docs/components/dropdown

<ComponentDescription component-name="CLDropdownMenu" />

## Usage

Use the `content` slot to add menu items or any custom content to be displayed when the dropdown is opened.

### Default

A basic dropdown menu with a trigger button and menu items. The `dropdownId` prop is required to uniquely identify each dropdown instance.



```vue


<template>
  <CLDropdownMenu
    dropdown-id="default-dropdown"
    button-aria-label="Open menu"
    label="Menu">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
</template>
```

### Button Colors

Use the `button-color` prop to customize the trigger button's color.



<ComponentExample
  component-name="CLDropdownMenu"
  :component-props="[{name:'dropdown-id',defaultValue:'color-dropdown-{{idx}}'},{name:'button-aria-label',defaultValue:'Open menu {{idx}}'},{name:'label',defaultValue:'Menu {{idx}}'},{name:'button-color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLDropdownMenu','CLColors','CLLink']"
  slot='<template #content><div style=&quot;padding: 0.5rem;&quot;><CLLink href=&quot;#&quot;>Menu Item 1</CLLink><CLLink href=&quot;#&quot;>Menu Item 2</CLLink></div></template>' />

### Button Variants

Use the `button-variant` prop to customize the trigger button's appearance.



<ComponentExample
  component-name="CLDropdownMenu"
  :component-props="[{name:'dropdown-id',defaultValue:'variant-dropdown-{{idx}}'},{name:'button-color',defaultValue:'CLColors.Primary'},{name:'button-aria-label',defaultValue:'Open menu {{idx}}'},{name:'label',defaultValue:'Menu {{idx}}'},{name:'button-variant',values:ColorVariantsProps}]"
  :examples="ColorVariantsOptions"
  :imports="['CLDropdownMenu','CLColors','CLColorVariants','CLLink']"
  slot='<template #content><div style=&quot;padding: 0.5rem;&quot;><CLLink href=&quot;#&quot;>Menu Item 1</CLLink><CLLink href=&quot;#&quot;>Menu Item 2</CLLink></div></template>' />

### Button Sizes

Use the `button-size` prop to customize the trigger button's size.



<ComponentExample
  component-name="CLDropdownMenu"
  :component-props="[{name:'dropdown-id',defaultValue:'size-dropdown-{{idx}}'},{name:'button-color',defaultValue:'CLColors.Neutral'},{name:'button-variant',defaultValue:'CLColorVariants.Outline'},{name:'button-aria-label',defaultValue:'Open menu {{idx}}'},{name:'label',defaultValue:'Menu {{idx}}'},{name:'button-size',values:SizesProps}]"
  :examples="SizesOptions"
  :imports="['CLDropdownMenu','CLColors','CLColorVariants','CLSizes','CLLink']"
  slot='<template #content><div style=&quot;padding: 0.5rem;&quot;><CLLink href=&quot;#&quot;>Menu Item 1</CLLink><CLLink href=&quot;#&quot;>Menu Item 2</CLLink></div></template>' />

### Button Icons

Use the `icon-before` prop to display an icon before the button label, or `icon-after` to display an icon after the label. Both props use the `CLIconNames` enum.



```vue


<template>
  <CLDropdownMenu
    dropdown-id="icon-before-dropdown"
    :button-color="CLColors.Primary"
    :button-variant="CLColorVariants.Soft"
    :icon-before="CLIconNames.Menu"
    button-aria-label="Open menu"
    label="Menu">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
  <CLDropdownMenu
    dropdown-id="icon-only-dropdown"
    :button-color="CLColors.Primary"
    :button-variant="CLColorVariants.Soft"
    :icon-before="CLIconNames.DotsVertical"
    :icon-after="undefined"
    button-aria-label="Open menu">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
  <CLDropdownMenu
    dropdown-id="icon-after-dropdown"
    :button-color="CLColors.Primary"
    :button-variant="CLColorVariants.Soft"
    :icon-after="CLIconNames.ChevronDown"
    button-aria-label="Open menu"
    label="Options">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
</template>
```

### Placement

Use the `placement` prop to control where the dropdown menu appears relative to the trigger button. The property accepts values from the `CLPlacement` enum.



```vue


<template>
  <CLDropdownMenu
    dropdown-id="placement-bottom-dropdown"
    :placement="CLPlacement.BottomStart"
    button-aria-label="Open menu"
    label="Bottom Start">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
  <CLDropdownMenu
    dropdown-id="placement-top-dropdown"
    :placement="CLPlacement.Top"
    button-aria-label="Open menu"
    label="Top">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
  <CLDropdownMenu
    dropdown-id="placement-right-dropdown"
    :placement="CLPlacement.Right"
    button-aria-label="Open menu"
    label="Right">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
</template>
```

### Custom Content

The dropdown menu can contain any custom content using the `content` slot. Use the `content-width` prop to control the width of the dropdown container.



```vue


<template>
  <CLDropdownMenu
    dropdown-id="custom-content-dropdown"
    :button-color="CLColors.Primary"
    button-aria-label="User settings"
    label="Settings"
    content-width="300px">
    <template #content>
      <div class="demo_dropdown_container">
        <CLText :type="CLTextTypes.Tiny">USER SETTINGS</CLText>
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
          <CLButton :align-content="CLAlign.Left" :color="CLColors.Primary" :variant="CLColorVariants.Text">Profile</CLButton>
          <CLButton :align-content="CLAlign.Left" :color="CLColors.Primary" :variant="CLColorVariants.Text">Preferences</CLButton>
          <CLButton :align-content="CLAlign.Left" :color="CLColors.Danger" :variant="CLColorVariants.Text">Logout</CLButton>
        </div>
      </div>
    </template>
  </CLDropdownMenu>
</template>
```

### Event Handlers

Use the `on-open-handler` and `on-close-handler` props to execute callbacks when the dropdown is opened or closed.



```vue


<template>
  <CLDropdownMenu
    dropdown-id="events-dropdown"
    button-aria-label="Open menu"
    label="Menu with Events"
    :on-open-handler="handleOpen"
    :on-close-handler="handleClose">
    <template #content>
      <div class="demo_dropdown_container">
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 1</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 2</CLLink>
        <CLLink href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Menu Item 3</CLLink>
      </div>
    </template>
  </CLDropdownMenu>
</template>
```

## Props

<ComponentProps component-name="CLDropdownMenu" />

## Slots

<ComponentSlots component-name="CLDropdownMenu" />

---

### CLPill
URL: https://callaloo.dev/docs/components/pill

<ComponentDescription component-name="CLPill" />

## Usage

### Default

Use the `label` prop to set the text of the component.



<ComponentExample component-name="CLPill" :imports="['CLPill']" :component-props="[{name:'label', defaultValue:'Tag'}]" :supports-slots="false" />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLPill"
  :component-props="[{name:'color', values:ColorProps}, {name: 'label', defaultValue: 'Tag'}]"
  :examples="ColorOptions"
  :imports="['CLPill','CLColors']"
  :supports-slots="false" />

### Variants

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLPill"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'}, {name:'variant',values:ColorVariantsProps}, {name: 'label', defaultValue: 'Tag'}]"
  :examples="ColorVariantsOptions"
  :imports="['CLPill','CLColors','CLColorVariants']"
  :supports-slots="false" />

### Icons

Use the `icon` prop to position an icon before the label.



```vue


<template>
  <CLPill :color="CLColors.Primary" :icon="CLIconNames.Tag" :variant="CLColorVariants.Soft" label="Tag" />
  <CLPill :color="CLColors.Success" :icon="CLIconNames.Check" :variant="CLColorVariants.Soft" label="Verified" />
  <CLPill :color="CLColors.Info" :icon="CLIconNames.InfoCircle" :variant="CLColorVariants.Soft" label="Info" />
</template>
```

### Count

Use the `count` prop to display a count value alongside the label.



<ComponentExample
  component-name="CLPill"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Contrast'},{name:'label', defaultValue: 'Items'},{name:'count', defaultValue: '42'}]"
  :imports="['CLPill','CLColors','CLColorVariants']"
  :supports-slots="false" />

### Rounded

Use the `rounded` prop to control the border radius. By default, pills are rounded.



```vue


<template>
  <CLPill :color="CLColors.Primary" label="Rounded" rounded />
  <CLPill :color="CLColors.Primary" :rounded="false" label="Not Rounded" />
</template>
```

### Elevated

Use the `elevated` prop to add a drop shadow.



<ComponentExample
  component-name="CLPill"
  :component-props="[{name:'color', defaultValue:'CLColors.Secondary'},{name:'variant',defaultValue:'CLColorVariants.Soft'},{name:'label', defaultValue: 'Elevated'},{name:'elevated', defaultValue: true}]"
  :imports="['CLPill','CLColors','CLColorVariants']"
  :supports-slots="false" />

### Clickable

Use the `onClick` prop to make the pill interactive. When a click handler is provided, the pill becomes clickable.



```vue


<template>
  <CLPill :color="CLColors.Primary" :variant="CLColorVariants.Soft" label="Click me" :onClick="handleClick" />
</template>
```

## Props

<ComponentProps component-name="CLPill" />

---

### CLProgress
URL: https://callaloo.dev/docs/components/progress

<ComponentDescription component-name="CLProgress" />

## Usage

### Default

Use the `v-model` to bind the progress value (0-100).



<ComponentExample component-name="CLProgress" :imports="['CLProgress']" :component-props="[{name:'v-model',defaultValue:'60'}]" />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLProgress"
  :component-props="[{name:'color',values:ColorProps},{name:'v-model',defaultValue:'60'}]"
  :examples="ColorOptions"
  :imports="['CLProgress','CLColors']" />

### Sizes

Use the `size` prop to customize the component's height.



<ComponentExample
  component-name="CLProgress"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'},{name:'size',values:SizesProps},{name:'v-model',defaultValue:'60'}]"
  :examples="SizesOptions"
  :imports="['CLProgress','CLColors','CLSizes']" />

### Rounded

Use the `rounded` prop to control the border radius of the progress bar.



```vue


<template>
  <CLProgress :color="CLColors.Primary" v-model="value" rounded />
  <CLProgress :color="CLColors.Primary" :rounded="false" v-model="value" />
</template>
```

### Status

Use the `status` prop to display the current progress value above the bar.



```vue


<template>
  <CLProgress :color="CLColors.Primary" :status="true" v-model="value" />
</template>
```

### Inverted

Use the `inverted` prop to reverse the direction of the progress bar.



```vue


<template>
  <CLProgress :color="CLColors.Primary" :inverted="false" v-model="value" />
  <CLProgress :color="CLColors.Primary" :inverted="true" v-model="value" />
</template>
```

### Progress Values

The progress bar can display any value from 0 to 100.



```vue


<template>
  <CLProgress :color="CLColors.Primary" v-model="25" />
  <CLProgress :color="CLColors.Success" v-model="50" />
  <CLProgress :color="CLColors.Warning" v-model="75" />
  <CLProgress :color="CLColors.Danger" v-model="100" />
</template>
```

## Props

<ComponentProps component-name="CLProgress" />

---

### CLSkeleton
URL: https://callaloo.dev/docs/components/skeleton

<ComponentDescription component-name="CLSkeleton" />

## Usage

### Default

Use the skeleton component to show a loading state for content.



<ComponentExample component-name="CLSkeleton" :imports="['CLSkeleton']" />

### Width and Height

Use the `width` and `height` props to customize the component's dimensions.



```vue


<template>
  <CLSkeleton width="200px" height="20px" />
</template>
```

### Rounded

Use the `rounded` prop to control whether the skeleton has rounded corners. By default, it is set to `true`.



```vue


<template>
  <CLSkeleton width="200px" height="20px" rounded />
  <CLSkeleton width="200px" height="20px" :rounded="false" />
</template>
```

### Border Radius

Use the `border-radius` prop to customize the border radius size.



<ComponentExample
  component-name="CLSkeleton"
  :component-props="[{name:'width', defaultValue:'150px'},{name:'height',defaultValue:'150px'},{name:'border-radius',values:BorderRadiusProps}]"
  :examples="BorderRadiusOptions"
  :imports="['CLSkeleton','CLBorderRadius']" />

### Common Use Cases

Here are some common patterns for using skeletons:



```vue


<template>
  <div class="flex-col">
    <CLSkeleton width="60px" height="60px" :border-radius="CLBorderRadius.Full" />
    <CLSkeleton width="100%" height="20px" style="margin-top: 12px;" />
    <CLSkeleton width="80%" height="20px" style="margin-top: 8px;" />
    <CLSkeleton width="90%" height="20px" style="margin-top: 8px;" />
  </div>
</template>
```

## Props

<ComponentProps component-name="CLSkeleton" />

---

### CLSpinner
URL: https://callaloo.dev/docs/components/spinner

<ComponentDescription component-name="CLSpinner" />

## Usage

### Default

The spinner displays a rotating animation by default.



<ComponentExample component-name="CLSpinner" :imports="['CLSpinner']" />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLSpinner"
  :component-props="[{name:'color',values:ColorProps},{name:'position',defaultValue:'CLPosition.Relative'}]"
  :examples="ColorOptions"
  :imports="['CLSpinner','CLColors','CLPosition']" />

### Sizes

Use the `size` prop to customize the component's size.



<ComponentExample
  component-name="CLSpinner"
  :component-props="[{name:'position',defaultValue:'CLPosition.Relative'},{name:'size',values:SizesProps}]"
  :examples="SizesOptions"
  :imports="['CLSpinner','CLPosition','CLSizes']" />

### Alignment

Use the `align` prop to customize the horizontal alignment of the spinner.



<ComponentExample
  component-name="CLSpinner"
  :component-props="[{name:'position',defaultValue:'CLPosition.Relative'},{name:'align',values:AlignProps}]"
  :examples="AlignOptions"
  :imports="['CLSpinner','CLAlign','CLPosition']" />

### Position

Use the `position` prop to control the CSS display property of the spinner. `CLPosition.Absolute` positions the spinner absolutely within its container, while `CLPosition.Relative` uses relative positioning.



<ComponentExample
  component-name="CLSpinner"
  :component-props="[{name:'position',values:PositionProps}]"
  :examples="PositionOptions"
  :imports="['CLSpinner','CLPosition']" />

## Props

<ComponentProps component-name="CLSpinner" />

---

### CLToast
URL: https://callaloo.dev/docs/components/toast

<ComponentDescription component-name="CLToast" />

For managing toast notifications globally in your application, use the [CLToastProvider](../providers/toast-provider.md).

## Usage

### Default

Use the `title` and `message` props to set the content of the toast notification.



```vue


<template>
  <CLButton :on-click="showToastHandler">Show Toast</CLButton>
  <CLToast
    v-if="showToast"
    title="Notification"
    message="This is a toast notification."
    :on-dismiss="handleDismiss" />
</template>
```

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLToast"
  :component-props="[{name:'color', values:ColorProps},{name:'title', defaultValue:'Notification'},{name:'message', defaultValue:'This is a toast notification.'},{name:':on-dismiss', defaultValue:'handleDismiss'}]"
  :examples="ColorOptions"
  :imports="['CLToast','CLColors']"
  :supports-slots="false" />

### Variants

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLToast"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'},{name:'variant', values:ColorVariantsProps},{name:'title', defaultValue:'Notification'},{name:'message', defaultValue:'This is a toast notification.'},{name:':on-dismiss', defaultValue:'handleDismiss'}]"
  :examples="ColorVariantsOptions"
  :imports="['CLToast','CLColors','CLColorVariants']"
  :supports-slots="false" />


### With Icon

Use the `icon` prop to display an icon in the toast notification.



```vue


<template>
  <CLButton :on-click="() => { showToast = true; }">Show Success Toast</CLButton>
  <CLToast
    v-if="showToast"
    :color="toastColor"
    :icon="toastIcon"
    title="Success"
    message="Operation completed successfully!"
    :on-dismiss="handleDismiss" />
</template>
```

### With Action

Use the `action-label` and `on-action` props to add an action button to the toast.



```vue


<template>
  <CLButton :on-click="() => { showToast = true; }">Show Toast</CLButton>
  <CLToast
    v-if="showToast"
    :color="CLColors.Primary"
    title="New message"
    message="You have a new message."
    action-label="View"
    :on-action="handleAction"
    :on-dismiss="handleDismiss" />
</template>
```

### Auto Dismiss

Use the `dismiss-timer` prop to automatically dismiss the toast after a specified number of seconds. Set to `0` to disable auto-dismiss.



```vue


<template>
  <CLButton :on-click="() => { showToast = true; }">Show Toast</CLButton>
  <CLToast
    v-if="showToast"
    :dismiss-timer="5"
    title="Auto-dismiss"
    message="This toast will automatically dismiss in 5 seconds."
    :on-dismiss="handleDismiss" />
</template>
```

### Border Radius

Use the `border-radius` prop to customize the border radius of the toast.



<ComponentExample
  component-name="CLToast"
  :component-props="[{name:'border-radius', values:BorderRadiusProps},{name:'title', defaultValue:'Notification'},{name:'message', defaultValue:'This is a toast notification.'},{name:':on-dismiss', defaultValue:'handleDismiss'}]"
  :examples="BorderRadiusOptions"
  :imports="['CLToast','CLBorderRadius']"
  :supports-slots="false" />

## Props

<ComponentProps component-name="CLToast" />

---

### CLCalendar
URL: https://callaloo.dev/docs/components/calendar

<ComponentDescription component-name="CLCalendar" />

## Usage

### Default

The calendar allows range selection by default. The selection is visual until confirmed (if used within a picker) or can be used directly.



<ComponentExample
  component-name="CLCalendar"
  :imports="['CLCalendar']"
  v-model="rangeValue"
/>

### Single Date

Set `is-range` to `false` to allow only single date selection.



<ComponentExample
  component-name="CLCalendar"
  :component-props="[{name:'is-range',defaultValue:false}]"
  :imports="['CLCalendar']"
  v-model="singleValue"
/>

### Disabled

Use the `disabled` prop to disable interaction.



<ComponentExample
  component-name="CLCalendar"
  :component-props="[{name:'disabled',defaultValue:true}]"
  :imports="['CLCalendar']"
/>

### Fluid

Use the `fluid` prop to make the calendar take up the full width of its container.



<ComponentExample
  component-name="CLCalendar"
  :component-props="[{name:'fluid',defaultValue:true}]"
  :imports="['CLCalendar']"
/>

## Props

<ComponentDescription component-name="CLCalendar" />
<ComponentProps component-name="CLCalendar" />

---

### CLCheckbox
URL: https://callaloo.dev/docs/components/checkbox

<ComponentDescription component-name="CLCheckbox" />

## Usage

### Default

Set the input's label by using the `label` prop.



<ComponentExample
  component-name="CLCheckbox"
  :imports="['CLCheckbox']"
  :component-props="[
    {name:'id', defaultValue:'default'},
    {name:'label', defaultValue:'I accept'},
    {name:'name', defaultValue:'default'}
  ]"
  :supports-slots="false" />

### Busy

A boolean value which dictates the busy state of the checkbox.



<ComponentExample
  component-name="CLCheckbox"
  :imports="['CLCheckbox']"
  :component-props="[
    {name:'busy', defaultValue:true},
    {name:'id', defaultValue:'default'},
    {name:'label', defaultValue:'I accept'},
    {name:'name', defaultValue:'default'}
  ]"
  :supports-slots="false" />

### Disabled

A boolean value which dictates the busy state of the checkbox.



<ComponentExample
  component-name="CLCheckbox"
  :imports="['CLCheckbox']"
  :component-props="[
    {name:'id', defaultValue:'default'},
    {name:'label', defaultValue:'I accept'},
    {name:'name', defaultValue:'default'}
  ]"
  :supports-slots="false" />

### Required

Use the `required` prop to display a red asterisk next to the input's label.



<ComponentExample
  component-name="CLCheckbox"
  :imports="['CLCheckbox']"
  :component-props="[
    {name:'id', defaultValue:'default'},
    {name:'label', defaultValue:'I accept'},
    {name:'name', defaultValue:'default'},
    {name:'required', defaultValue:true}
  ]"
  :supports-slots="false" />

### Messages

Set the input's label by using the `label` prop.



<ComponentExample
  component-name="CLCheckbox"
  :imports="['CLCheckbox']"
  :component-props="[
    {name:'id', defaultValue:'default'},
    {name:'label', defaultValue:'I accept'},
    {name:'name', defaultValue:'default'},
    {name:'required', defaultValue:true}
  ]"
  :supports-slots="false" />

## Props

<ComponentProps component-name="CLCheckbox" />

---

### CLInput
URL: https://callaloo.dev/docs/components/input

<ComponentDescription component-name="CLInput" />

## Usage

### Default

Use the `v-model` directive to bind the input value.



<ComponentExample component-name="CLInput" :component-props="[{name:'id',defaultValue:'default-input'},{name:'name',defaultValue:'default-input'},{name:'placeholder',defaultValue:'Enter text...'}]" :imports="['CLInput']" v-model='inputValue' />

### Input Types

The `type` prop supports various HTML5 input types.



```vue


<template>
  <CLInput id="text-input" name="text-input" :type="CLInputTypes.Text" placeholder="Text input" />
  <CLInput id="email-input" name="email-input" :type="CLInputTypes.Email" placeholder="Email input" />
  <CLInput id="password-input" name="password-input" :type="CLInputTypes.Password" placeholder="Password input" />
  <CLInput id="number-input" name="number-input" :type="CLInputTypes.Number" placeholder="Number input" />
  <CLInput id="tel-input" name="tel-input" :type="CLInputTypes.Tel" placeholder="Phone number" />
  <CLInput id="url-input" name="url-input" :type="CLInputTypes.Url" placeholder="Enter URL" />
</template>
```

### Colors

Use the `color` prop to customize the component's border color.



<ComponentExample
  component-name="CLInput"
  :component-props="[{name:'id',defaultValue:'input-id'},{name:'name',defaultValue:'input-name'},{name:'placeholder',defaultValue:'Enter text...'},{name:'color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLInput','CLColors']" />

### Variants

Use the `variant` prop to customize the component's appearance. The input supports `Outline` and `Ghost` variants.



```vue


<template>
  <CLInput id="outline-input" name="outline-input" :color="CLColors.Primary" :variant="CLColorVariants.Outline" placeholder="Outline variant" />
  <CLInput id="ghost-input" name="ghost-input" :color="CLColors.Primary" :variant="CLColorVariants.Ghost" placeholder="Ghost variant" />
</template>
```

### Sizes

Use the `size` prop to customize the component's size.



<ComponentExample
  component-name="CLInput"
  :component-props="[{name:'id',defaultValue:'input-id'},{name:'name',defaultValue:'input-name'},{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'size',values:SizesProps}]"
  :examples="SizesOptions"
  :imports="['CLInput','CLColors','CLColorVariants','CLSizes']"
  placeholder='Input' />

### Rounded

Use the `border-radius` prop to customize the border radius.



<ComponentExample
  component-name="CLInput"
  :component-props="[{name:'id',defaultValue:'input-id'},{name:'name',defaultValue:'input-name'},{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'border-radius',values:BorderRadiusProps}]"
  :examples="BorderRadiusOptions"
  :imports="['CLInput','CLBorderRadius','CLColors','CLColorVariants']"
  placeholder='Input' />

### With Label

Use the `label` prop to add a label to the input. The `required` prop adds a visual indicator for required fields.



```vue


<template>
  <CLInput id="label-input" name="label-input" label="First name" placeholder="Enter your first name" />
  <CLInput id="required-input" name="required-input" label="Email address" placeholder="Enter your email" required />
</template>
```

### Label Orientation

Use the `orientation` prop to position the label horizontally or vertically.



```vue


<template>
  <CLInput id="vertical-input" name="vertical-input" label="First name" :orientation="CLOrientation.Vertical" placeholder="Vertical label" />
  <CLInput id="horizontal-input" name="horizontal-input" label="Last name" :orientation="CLOrientation.Horizontal" placeholder="Horizontal label" />
</template>
```

### Prefix and Suffix

Use the `prefix` and `suffix` props to add icons or text before or after the input. These can be icon names or custom text strings.



```vue


<template>
  <CLInput id="icon-prefix" name="icon-prefix" :prefix="CLIconNames.Search" placeholder="Search..." />
  <CLInput id="icon-suffix" name="icon-suffix" :suffix="CLIconNames.Check" placeholder="Valid input" />
  <CLInput id="text-prefix" name="text-prefix" prefix="https://" placeholder="example.com" />
  <CLInput id="text-suffix" name="text-suffix" suffix=".com" placeholder="domain" />
</template>
```

### Grouped

Use the `grouped` prop to create a visually connected input with prefix or suffix elements.



```vue


<template>
  <CLInput id="grouped-1" name="grouped-1" :prefix="CLIconNames.WorldWww" suffix=".ly" grouped placeholder="subdomain" />
  <CLInput id="grouped-2" name="grouped-2" label="Domain name" :prefix="CLIconNames.Settings" suffix=".com" grouped />
</template>
```

### States

An input can have various states: `disabled`, `readonly`, `required`, and `busy`.



```vue


<template>
  <CLInput id="disabled-input" name="disabled-input" placeholder="Disabled input" disabled />
  <CLInput id="readonly-input" name="readonly-input" placeholder="Readonly input" readonly />
  <CLInput id="required-input" name="required-input" label="Required field" required />
  <CLInput id="busy-input" name="busy-input" placeholder="Loading..." busy />
</template>
```

### Messages

Use the `messages` and `messageType` props to display validation messages or hints below the input.



```vue


<template>
  <CLInput id="error-input" name="error-input" :type="CLInputTypes.Email" :messages="['This is not a valid email address']" :messageType="CLColors.Danger" :color="CLColors.Danger" placeholder="invalid@" />
  <CLInput id="success-input" name="success-input" :messages="['This is a valid email address']" :messageType="CLColors.Success" :color="CLColors.Success" placeholder="valid@email.com" />
  <CLInput id="warning-input" name="warning-input" :messages="['This username already exists']" :messageType="CLColors.Warning" :color="CLColors.Warning" placeholder="username" />
</template>
```

### Multiple Messages

You can display multiple messages by passing an array of strings.



```vue


<template>
  <CLInput
    id="multi-msg"
    name="multi-msg"
    placeholder="Enter username"
    :messages="['A username can only contain letters and numbers', 'A username must be at minimum 3 characters long']"
    :messageType="CLColors.Warning" />
</template>
```

### Pill

Use the `pill` prop to display a helpful hint or requirement below the input.



```vue


<template>
  <CLInput id="pill-input" name="pill-input" label="Password" :type="CLInputTypes.Password" pill="Min. 8 characters" required />
</template>
```

### Character Counter

Use the `charCounter` prop with `maxLength` to display a character count.



```vue


<template>
  <CLInput id="char-counter" name="char-counter" :charCounter="true" :maxLength="25" placeholder="Max 25 characters" />
</template>
```

### Color Picker

When using `type="color"`, the input renders as a color picker with additional functionality.



```vue


<template>
  <CLInput id="color-picker" name="color-picker" :type="CLInputTypes.Color" v-model="colorValue" />
</template>
```

### File Upload

Use the `File` input type for file uploads.



```vue


<template>
  <CLInput id="file-upload" name="file-upload" :type="CLInputTypes.File" />
</template>
```

### Fluid Width

Use the `fluid` prop to make the input take up 100% of its parent's width.



```vue


<template>
  <CLInput id="fluid-input" name="fluid-input" label="Full width input" placeholder="This input spans the full width" fluid />
</template>
```

## Props

<ComponentProps component-name="CLInput" />

---

### CLInputDatePicker
URL: https://callaloo.dev/docs/components/input-date-picker

<ComponentDescription component-name="CLInputDatePicker" />

## Usage

### Default (Range)

The input date picker allows range selection by default.



<ComponentExample
  component-name="CLInputDatePicker"
  :component-props="[{name:'id',defaultValue:'default-range'},{name:'name',defaultValue:'default-range'}]"
  :imports="['CLInputDatePicker']" />

### Single Date

Set `is-range` to `false` to allow only single date selection.



<ComponentExample
  component-name="CLInputDatePicker"
  :component-props="[{name:'id',defaultValue:'single-date'},{name:'name',defaultValue:'single-date'},{name:'is-range',defaultValue:false}]"
  :imports="['CLInputDatePicker']" />

## Props

<ComponentProps component-name="CLInputDatePicker" />

---

### CLModalDatePicker
URL: https://callaloo.dev/docs/components/modal-date-picker

<ComponentDescription component-name="CLModalDatePicker" />

## Usage

### Default (Range)

The modal date picker allows range selection by default.



<ComponentExample
  component-name="CLModalDatePicker"
  :component-props="[{name:'id',defaultValue:'default-modal-range'}]"
  :imports="['CLModalDatePicker']" />

### Single Date

Set `is-range` to `false` to allow only single date selection.



<ComponentExample
  component-name="CLModalDatePicker"
  :component-props="[{name:'id',defaultValue:'single-modal-date'},{name:'is-range',defaultValue:false},{name:'button-label',defaultValue:'Select Date'},{name:'title',defaultValue:'Select Date'}]"
  :imports="['CLModalDatePicker']" />

## Props

<ComponentProps component-name="CLModalDatePicker" />

---

### CLRadioButton
URL: https://callaloo.dev/docs/components/radio

<ComponentDescription component-name="CLRadioButton" />

## Usage

### Default

Set the input's label by using the `label` prop. Radio buttons with the same `name` attribute form a group where only one can be selected at a time.



<ComponentExample
  component-name="CLRadioButton"
  :imports="['CLRadioButton']"
  :component-props="[
    {name:'id', defaultValue:'option1'},
    {name:'label', defaultValue:'Option 1'},
    {name:'name', defaultValue:'default'},
    {name:'value', defaultValue:'option1'}
  ]"
  :supports-slots="false" />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLRadioButton"
  :component-props="[
    {name:'id', defaultValue:'color-option'},
    {name:'label', defaultValue:'Option'},
    {name:'name', defaultValue:'colors'},
    {name:'value', defaultValue:'option'},
    {name:'color',values:ColorProps}
  ]"
  :examples="ColorOptions"
  :imports="['CLRadioButton','CLColors']"
  :supports-slots="false" />

### Variants

Use the `variant` prop to customize the component's appearance. Available variants are `Outline` and `Ghost`.



```vue


<template>
  <CLRadioButton id="variant-outline" label="Outline" name="variants" value="outline" :color="CLColors.Primary" :variant="CLColorVariants.Outline" checked />
  <CLRadioButton id="variant-ghost" label="Ghost" name="variants" value="ghost" :color="CLColors.Primary" :variant="CLColorVariants.Ghost" />
</template>
```

### Sizes

Use the `size` prop to customize the component's size.



<ComponentExample
  component-name="CLRadioButton"
  :component-props="[
    {name:'id', defaultValue:'size-option'},
    {name:'label', defaultValue:'Option'},
    {name:'name', defaultValue:'sizes'},
    {name:'value', defaultValue:'option'},
    {name:'color', defaultValue:'CLColors.Primary'},
    {name:'size',values:SizesProps}
  ]"
  :examples="SizesOptions"
  :imports="['CLRadioButton','CLColors','CLSizes']"
  :supports-slots="false" />

### Rounded

Use the `border-radius` prop to customize the border radius. By default, radio buttons are rounded.



<ComponentExample
  component-name="CLRadioButton"
  :component-props="[
    {name:'id', defaultValue:'rounded-option'},
    {name:'label', defaultValue:'Option'},
    {name:'name', defaultValue:'rounded'},
    {name:'value', defaultValue:'option'},
    {name:'color', defaultValue:'CLColors.Primary'},
    {name:'border-radius',values:BorderRadiusProps}
  ]"
  :examples="BorderRadiusOptions"
  :imports="['CLRadioButton','CLBorderRadius','CLColors']"
  :supports-slots="false" />

### States

A radio button can have various states, which can be set via the `busy`, `disabled`, and `checked` props.



```vue


<template>
  <CLRadioButton id="state-checked" label="Checked" name="states-1" value="checked" :color="CLColors.Primary" checked />
  <CLRadioButton id="state-disabled" label="Disabled" name="states-2" value="disabled" :color="CLColors.Primary" disabled />
  <CLRadioButton id="state-busy" label="Busy" name="states-3" value="busy" :color="CLColors.Primary" busy />
</template>
```

### Required

Use the `required` prop to display a red asterisk next to the input's label, indicating that the field is required.



<ComponentExample
  component-name="CLRadioButton"
  :imports="['CLRadioButton','CLColors']"
  :component-props="[
    {name:'id', defaultValue:'required1'},
    {name:'label', defaultValue:'Required Option'},
    {name:'name', defaultValue:'required'},
    {name:'value', defaultValue:'option1'},
    {name:'color', defaultValue:'CLColors.Primary'},
    {name:'required', defaultValue:true}
  ]"
  :supports-slots="false" />

### Messages

Use the `messages` prop to display helpful information or validation messages. The `messageType` prop controls the message color.



```vue


<template>
  <CLRadioButton
    id="message1"
    label="Option 1"
    name="messages"
    value="option1"
    :color="CLColors.Primary"
    :messages="['Please select an option']"
    :message-type="CLColors.Info" />
  <CLRadioButton
    id="message2"
    label="Option 2"
    name="messages"
    value="option2"
    :color="CLColors.Primary"
    :messages="['This is required']"
    :message-type="CLColors.Danger" />
</template>
```

## Props

<ComponentProps component-name="CLRadioButton" />

---

### CLSelect
URL: https://callaloo.dev/docs/components/select

<ComponentDescription component-name="CLSelect" />

## Usage

### Default

Use the `options` prop to set the available options for the select component. The component requires `id` and `name` props to function properly.



```vue


<template>
  <CLSelect
    id="default-select"
    name="default-select"
    :options="selectOptions"
    v-model="selectedValue" />
</template>
```

### With Label

Use the `label` prop to add a descriptive label to the select component.



```vue


<template>
  <CLSelect
    id="labeled-select"
    name="labeled-select"
    label="Choose an option"
    :options="selectOptions"
    v-model="selectedValue" />
</template>
```

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLSelect"
  :component-props="[{name:'color',values:ColorProps},{name:'id',defaultValue:'select-example'},{name:'name',defaultValue:'select-example'},{name:'options',defaultValue:'selectOptions'}]"
  :examples="ColorOptions"
  :imports="['CLSelect','CLColors']" />

### Variants

Use the `variant` prop to customize the component's appearance. The select component supports `Outline` and `Ghost` variants.



```vue


<template>
  <CLSelect
    id="select-outline"
    name="select-outline"
    :color="CLColors.Primary"
    :variant="CLColorVariants.Outline"
    label="Outline"
    :options="selectOptions" />
  <CLSelect
    id="select-ghost"
    name="select-ghost"
    :color="CLColors.Primary"
    :variant="CLColorVariants.Ghost"
    label="Ghost"
    :options="selectOptions" />
</template>
```

### Sizes

Use the `size` prop to customize the component's size.



<ComponentExample
  component-name="CLSelect"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'size',values:SizesProps},{name:'id',defaultValue:'select-example'},{name:'name',defaultValue:'select-example'},{name:'options',defaultValue:'selectOptions'}]"
  :examples="SizesOptions"
  :imports="['CLSelect','CLColors','CLColorVariants','CLSizes']" />

### Rounded

Use the `border-radius` prop to customize the border radius.



<ComponentExample
  component-name="CLSelect"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'border-radius',values:BorderRadiusProps},{name:'id',defaultValue:'select-example'},{name:'name',defaultValue:'select-example'},{name:'options',defaultValue:'selectOptions'}]"
  :examples="BorderRadiusOptions"
  :imports="['CLSelect','CLBorderRadius','CLColors','CLColorVariants']" />

### Orientation

Use the `orientation` prop to set the label position to be above or to the left of the select element.



```vue


<template>
  <CLSelect
    id="select-vertical"
    name="select-vertical"
    :color="CLColors.Primary"
    :orientation="CLOrientation.Vertical"
    label="Vertical"
    :options="selectOptions" />
  <CLSelect
    id="select-horizontal"
    name="select-horizontal"
    :color="CLColors.Primary"
    :orientation="CLOrientation.Horizontal"
    label="Horizontal"
    fluid
    :options="selectOptions" />
</template>
```

### States

A select can have various states, which can be set via the `busy`, `disabled`, and `required` props.



```vue


<template>
  <CLSelect
    id="select-busy"
    name="select-busy"
    :color="CLColors.Primary"
    label="Busy"
    busy
    :options="selectOptions" />
  <CLSelect
    id="select-disabled"
    name="select-disabled"
    :color="CLColors.Primary"
    label="Disabled"
    disabled
    :options="selectOptions" />
  <CLSelect
    id="select-required"
    name="select-required"
    :color="CLColors.Primary"
    label="Required"
    required
    :options="selectOptions" />
</template>
```

### Messages

Use the `messages` and `message-type` props to display validation or helper messages below the select.



```vue


<template>
  <CLSelect
    id="select-success"
    name="select-success"
    :color="CLColors.Success"
    label="Success"
    :message-type="CLColors.Success"
    :messages="['Selection is valid']"
    :options="selectOptions" />
  <CLSelect
    id="select-error"
    name="select-error"
    :color="CLColors.Danger"
    label="Error"
    :message-type="CLColors.Danger"
    :messages="['Please select a valid option']"
    :options="selectOptions" />
</template>
```

## Props

<ComponentProps component-name="CLSelect" />

---

### CLTextArea
URL: https://callaloo.dev/docs/components/textarea

<ComponentDescription component-name="CLTextArea" />

## Usage

### Default

Use the `v-model` directive to bind the value of the component. The `id` and `name` props are required.



<ComponentExample
  component-name="CLTextArea"
  :component-props="[{name:'id',defaultValue:'default-textarea'},{name:'name',defaultValue:'default'},{name:'placeholder',defaultValue:'Enter your text here...'}]"
  :imports="['CLTextArea']" />

### With Label

Use the `label` prop to add a label to the textarea.



<ComponentExample
  component-name="CLTextArea"
  :component-props="[{name:'id',defaultValue:'labeled-textarea'},{name:'name',defaultValue:'labeled'},{name:'label',defaultValue:'Description'},{name:'placeholder',defaultValue:'Enter description...'}]"
  :imports="['CLTextArea']" />

### Colors

Use the `color` prop to customize the component's border color.



<ComponentExample
  component-name="CLTextArea"
  :component-props="[{name:'id',defaultValue:'textarea-color'},{name:'name',defaultValue:'textarea-color'},{name:'color',values:ColorProps},{name:'label',defaultValue:'Label'},{name:'placeholder',defaultValue:'Enter text...'}]"
  :examples="ColorOptions"
  :imports="['CLTextArea','CLColors']" />

### Variants

Use the `variant` prop to customize the component's appearance. TextArea supports `Outline` and `Ghost` variants.



<ComponentExample
  component-name="CLTextArea"
  :component-props="[{name:'id',defaultValue:'textarea-variant'},{name:'name',defaultValue:'textarea-variant'},{name:'color', defaultValue:'CLColors.Primary'},{name:'variant',values:['CLColorVariants.Outline','CLColorVariants.Ghost']},{name:'label',defaultValue:'Label'},{name:'placeholder',defaultValue:'Enter text...'}]"
  :examples="[{value:CLColorVariants.Outline,label:'Outline'},{value:CLColorVariants.Ghost,label:'Ghost'}]"
  :imports="['CLTextArea','CLColors','CLColorVariants']" />

### Sizes

Use the `size` prop to customize the component's size.



<ComponentExample
  component-name="CLTextArea"
  :component-props="[{name:'id',defaultValue:'textarea-size'},{name:'name',defaultValue:'textarea-size'},{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'size',values:SizesProps},{name:'label',defaultValue:'Label'},{name:'placeholder',defaultValue:'Enter text...'}]"
  :examples="SizesOptions"
  :imports="['CLTextArea','CLColors','CLColorVariants','CLSizes']" />

### Rounded

Use the `border-radius` prop to customize the border radius.



<ComponentExample
  component-name="CLTextArea"
  :component-props="[{name:'id',defaultValue:'textarea-rounded'},{name:'name',defaultValue:'textarea-rounded'},{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'border-radius',values:BorderRadiusProps},{name:'label',defaultValue:'Label'},{name:'placeholder',defaultValue:'Enter text...'}]"
  :examples="BorderRadiusOptions"
  :imports="['CLTextArea','CLBorderRadius','CLColors','CLColorVariants']" />

### Rows and Columns

Use the `rows` and `cols` props to specify the exact dimensions of the textarea.



```vue


<template>
  <CLTextArea id="textarea-rows-3" name="textarea-rows-3" :color="CLColors.Neutral" :rows="3" label="3 Rows" placeholder="Enter text..." />
  <CLTextArea id="textarea-rows-5" name="textarea-rows-5" :color="CLColors.Neutral" :rows="5" label="5 Rows" placeholder="Enter text..." />
  <CLTextArea id="textarea-cols-30" name="textarea-cols-30" :color="CLColors.Neutral" :cols="30" label="30 Columns" placeholder="Enter text..." />
</template>
```

### Character Counter

Use the `char-counter` prop along with `max-length` to display a character counter below the textarea.



```vue


<template>
  <CLTextArea
    id="textarea-counter"
    name="textarea-counter"
    :color="CLColors.Primary"
    :max-length="200"
    char-counter
    label="With Character Counter"
    placeholder="Type something..." />
</template>
```

### States

A textarea can have various states, which can be set via the `busy`, `disabled`, `readonly`, and `required` props.



```vue


<template>
  <CLTextArea id="textarea-busy" name="textarea-busy" :color="CLColors.Primary" busy label="Busy" placeholder="Loading..." />
  <CLTextArea id="textarea-disabled" name="textarea-disabled" :color="CLColors.Primary" disabled label="Disabled" placeholder="Disabled..." />
  <CLTextArea id="textarea-readonly" name="textarea-readonly" :color="CLColors.Primary" readonly label="Readonly" modelValue="This is readonly text" />
  <CLTextArea id="textarea-required" name="textarea-required" :color="CLColors.Primary" required label="Required" placeholder="Required field..." />
</template>
```

### Resizable

Use the `resizable` prop to allow the textarea to be resized by the user.



```vue


<template>
  <CLTextArea
    id="textarea-resizable"
    name="textarea-resizable"
    :color="CLColors.Primary"
    resizable
    label="Resizable TextArea"
    placeholder="You can resize me..." />
</template>
```

### Messages

Use the `messages` and `message-type` props to display validation or informational messages below the textarea.



```vue


<template>
  <CLTextArea
    id="textarea-error"
    name="textarea-error"
    :color="CLColors.Danger"
    :message-type="CLColors.Danger"
    :messages="['This field is required', 'Please enter at least 10 characters']"
    label="With Error Messages"
    placeholder="Enter text..." />
  <CLTextArea
    id="textarea-info"
    name="textarea-info"
    :color="CLColors.Info"
    :message-type="CLColors.Info"
    :messages="['This is an informational message']"
    label="With Info Message"
    placeholder="Enter text..." />
</template>
```

### Fluid

Use the `fluid` prop to make the textarea take up 100% of its parent container's width.



```vue


<template>
  <CLTextArea
    id="textarea-fluid"
    name="textarea-fluid"
    :color="CLColors.Primary"
    fluid
    label="Fluid TextArea"
    placeholder="This textarea is fluid..." />
</template>
```

## Props

<ComponentProps component-name="CLTextArea" />

---

### CLIcon
URL: https://callaloo.dev/docs/components/icon

<ComponentDescription component-name="CLIcon" />

To see all available icons, explore [Icons](../assets/icons.md).

## Usage

### Default

Use the `name` prop to specify which icon to display from the Tabler icon set.



<ComponentExample component-name="CLIcon" :imports="['CLIcon','CLIconNames']" :component-props="[{name:'name',defaultValue:'CLIconNames.Heart'}]" />

### Colors

Use the `color` prop to customize the icon's color.



<ComponentExample
  component-name="CLIcon"
  :component-props="[{name:'name',defaultValue:'CLIconNames.Heart'},{name:'color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLIcon','CLColors','CLIconNames']" />

### Sizes

Use the `size` prop to customize the icon's size.



<ComponentExample
  component-name="CLIcon"
  :component-props="[{name:'name',defaultValue:'CLIconNames.Heart'},{name:'color',defaultValue:'CLColors.Primary'},{name:'size',values:IconSizesProps}]"
  :examples="IconSizesOptions"
  :imports="['CLIcon','CLColors','CLIconNames','CLIconSizes']" />

### Different Icons

The component supports a wide variety of icons from the Tabler icon set. Here are some examples:



```vue


<template>
  <CLIcon :color="CLColors.Primary" :name="CLIconNames.Apps" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Success" :name="CLIconNames.Bell" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Warning" :name="CLIconNames.Ai" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Danger" :name="CLIconNames.Archive" :size="CLIconSizes.Large" />
  <CLIcon :color="CLColors.Info" :name="CLIconNames.Book" :size="CLIconSizes.Large" />
</template>
```

## Props

<ComponentProps component-name="CLIcon" />

---

### CLCard
URL: https://callaloo.dev/docs/components/card

<ComponentDescription component-name="CLCard" />

## Usage

### Default

Use the default slot to set the text of the component.



<ComponentExample
  component-name="CLCard"
  :component-props="[{name:'byline', defaultValue:'This is the byline'}, { name:'image', defaultValue: 'https://picsum.photos/200'}, { name: 'imageHeight', defaultValue: '200px' }, { name:'width', defaultValue: '200px'}, { name:'title', defaultValue:'This is the card title'}]"
  :imports="['CLCard']" slot='Card' />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLCard"
  :component-props="[{name:'color',values:ColorProps},{name:'title', defaultValue:'This is the card title'}]"
  :examples="ColorOptions"
  :imports="['CLCard','CLColors']"
  slot='Card' />

### Variants

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLCard"
  :component-props="[{name:'color', defaultValue:'CLColors.Primary'},{name:'variant',values:ColorVariantsProps},{name:'title', defaultValue:'This is the card title'},{name:'byline', values:ColorVariantsProps}]"
  :examples="ColorVariantsOptions"
  :imports="['CLCard','CLColors','CLColorVariants']"
  slot='Card' />

### Sizes

Use the `type` prop to customize the component's size.



<ComponentExample
  component-name="CLCard"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'type',values:CardTypesProps}]"
  :examples="CardTypesOptions"
  :imports="['CLCard','CLColors','CLColorVariants','CLCardTypes']"
  slot='Card' />

### Rounded

Use the `border-radius` prop to customize the border radius.



<ComponentExample
  component-name="CLCard"
  :component-props="[{name:'color', defaultValue:'CLColors.Neutral'},{name:'variant',defaultValue:'CLColorVariants.Outline'},{name:'border-radius',values:BorderRadiusProps}]"
  :examples="BorderRadiusOptions"
  :imports="['CLCard','CLBorderRadius','CLColors','CLColorVariants']"
  slot='Card' />

### States

#### Active

The active state can be set via the `active` prop.



```vue


<template>
  <CLCard :color="CLColors.Neutral" title="This card is active" width='250px' active>It has a drop shadow to indicate it is active.</CLCard>
</template>
```

#### Busy

The busy state can be set via the `busy` prop.



```vue


<template>
  <CLCard :color="CLColors.Neutral" title="This is the card title" width='250px' busy>The card's content</CLCard>
</template>
```

## Props

<ComponentProps component-name="CLCard" />

## Slots

<ComponentSlots component-name="CLCard" />

---

### CLCarousel
URL: https://callaloo.dev/docs/components/carousel

<ComponentDescription component-name="CLCarousel" />

## Usage

### Default

No props configured, default slides per page is `3`.



```vue


<template>
  <CLCarousel>
    <CLCarousel.Slide v-for="n in 20">
      <div class="carousel_slide">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>
```

### Pagination

#### Dots

Set the `paginationType` prop to `CLPaginationType.Dots`.



```vue


<template>
  <CLCarousel :pagination-type="CLPaginationType.Dots" :variant="CLColorVariants.Solid">
    <CLCarousel.Slide v-for="n in 20">
      <div class="carousel_slide">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>
```

#### Inline

Set the `paginationType` prop to `CLPaginationType.Inline`.



```vue


<template>
  <CLCarousel :pagination-type="CLPaginationType.Inline" :variant="CLColorVariants.Solid">
    <CLCarousel.Slide v-for="n in 20">
      <div class="carousel_slide">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>
```

#### Position

Use the `controlPosition` and `controlAlign` props to adjust the appearance of the pagination elements.



```vue


<template>
  <CLCarousel :control-align="CLAlign.Center" :control-position="CLOrder.After" :pagination-type="CLPaginationType.Dots" :variant="CLColorVariants.Solid">
    <CLCarousel.Slide v-for="n in 20">
      <div class="carousel_slide">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
        <div style='padding: 1rem 0;'>
          <CLText type="summary">Slide {{ n }}</CLText>
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>
```

### Single

Use the `perPage` prop to set the default slides to show per page.



```vue


<template>
  <CLCarousel more-label="See all" :on-show-more="onShowMoreHandler" title="My photos" :per-page="1">
    <CLCarousel.Slide v-for="n in 20">
      <div class="carousel_slide">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>
```

### Custom title

Use the `#title` slot to use a custom title.



```vue


<template>
  <CLCarousel more-label="See all" :on-show-more="onShowMoreHandler" :per-page="1">
   <template #title>
      <div style="display: flex; align-items: center;">
        <div style="margin-right: 1rem;">
          <CLIcon :name='CLIconNames.Image' :size='CLSizes.Large' />
        </div>
        <div>
          <CLHeading :type='CLHeadingTypes.Section'>My photos</CLHeading>
          <CLText :type='CLTextTypes.Summary'>Random shots from this summer</CLText>
        </div>
      </div>
    </template>
    <CLCarousel.Slide v-for="n in 20">
      <div class="carousel_slide">
        <div style="flex: 1; overflow: hidden; width: 100%;">
          <img :src="'https://picsum.photos/seed/' + n + '/768'" style="width: 100%; height:100%; object-fit: cover;" :alt="'Slide image ' + n" />
        </div>
      </div>
    </CLCarousel.Slide>
  </CLCarousel>
</template>
```

## Props

<ComponentProps component-name="CLCarousel" />

## Slots

<ComponentSlots component-name="CLCarousel" />

---

### CLDisclosure
URL: https://callaloo.dev/docs/components/disclosure

<ComponentDescription component-name="CLDisclosure" />

## Usage

Use the default slot to set the content to be displayed when the disclosure is expanded.

### Default



<ComponentExample
  component-name="CLDisclosure"
  :component-props="[
    { name: 'heading', defaultValue: 'Introduction' },
    { name: 'disclosure-id', defaultValue: 'default' }
  ]"
  :imports="['CLDisclosure','CLText','CLTextTypes']"
  slot='<CLText :type="CLTextTypes.Body">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</CLText>' />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLDisclosure"
  :component-props="[
    { name: 'color', values: ColorProps },
    { name: 'heading', defaultValue: 'Color {{label}}' },
    { name: 'disclosure-id', defaultValue: 'color-{{idx}}' }
  ]"
  :examples="ColorOptions"
  :imports="['CLDisclosure','CLColors','CLText','CLTextTypes']"
  slot='<CLText :type="CLTextTypes.Body">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</CLText>' />

### Variant

Use the `variant` prop to customize the component's appearance.



<ComponentExample
  component-name="CLDisclosure"
  :component-props="[
    { name: 'variant', values: ColorVariantsProps },
    { name: 'heading', defaultValue: 'Variant {{label}}' },
    { name: 'disclosure-id', defaultValue: 'variant-{{value}}' }
  ]"
  :examples="ColorVariantsOptions"
  :imports="['CLDisclosure','CLColorVariants','CLText','CLTextTypes']"
  slot='<CLText :type="CLTextTypes.Body">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</CLText>' />

### Subheading

Use the `sub-heading` prop to display additional text after the heading. The `sub-heading-type` prop can be used to customize the text type.



Alternatively, use the `trailing` slot for more flexibility, such as adding interactive elements or custom content aligned with the heading.



```vue


<template>
  <CLDisclosure
    heading="Introduction"
    sub-heading="Additional context or description"
    disclosure-id="trailing-slot">
    <template #trailing>
      <CLButton
        :color="CLColors.Primary"
        :size="CLSizes.Small"
        :variant="CLColorVariants.Soft"
        :on-click="handleButtonClick">
        Action
      </CLButton>
    </template>
    <CLText :type="CLTextTypes.Body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec finibus mi.
      Phasellus accumsan ligula diam, egestas convallis nulla auctor et. Cras malesuada
      sapien in lacus interdum, ut semper neque pharetra.
    </CLText>
  </CLDisclosure>
</template>
```

### Trailing

Use the `trailing` slot to add supplementary actions or custom content aligned with the heading while still leveraging the `sub-heading` prop for secondary text.



```vue


<template>
  <CLDisclosure
    heading="Introduction"
    sub-heading="Additional context or description"
    disclosure-id="trailing-example">
    <template #trailing>
      <CLButton
        :color="CLColors.Primary"
        :size="CLSizes.Small"
        :variant="CLColorVariants.Soft"
        :on-click="handleButtonClick">
        Action
      </CLButton>
    </template>
    <CLText :type="CLTextTypes.Body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec finibus mi.
      Phasellus accumsan ligula diam, egestas convallis nulla auctor et. Cras malesuada
      sapien in lacus interdum, ut semper neque pharetra.
    </CLText>
  </CLDisclosure>
</template>
```

### Icons

Use the `icon-before` prop to display an icon before the heading text and the `icon-after` prop to display an icon after the heading text. Both props use the `CLIconNames` enum values, and the `expanded-icon` prop can be used to customize the icon shown when the disclosure is expanded.



```vue


<template>
  <CLDisclosure
    heading="Introduction"
    disclosure-id="icons"
    :icon-before="CLIconNames.InfoCircle"
    :icon-after="CLIconNames.ChevronDown"
    :expanded-icon="CLIconNames.ChevronUp"
    :variant="CLColorVariants.Ghost">
    <CLText :type="CLTextTypes.Body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec finibus mi.
      Phasellus accumsan ligula diam, egestas convallis nulla auctor et. Cras malesuada
      sapien in lacus interdum, ut semper neque pharetra.
    </CLText>
  </CLDisclosure>
</template>
```

## Props

<ComponentProps component-name="CLDisclosure" />

## Slots

<ComponentSlots component-name="CLDisclosure" />

---

### CLDrawer
URL: https://callaloo.dev/docs/components/drawer

<ComponentDescription component-name="CLDrawer" />

## Usage

### Default

The drawer component uses `:is-open` prop with `:on-close` callback to control visibility. By default, it slides in from the left side of the screen.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false">
    <div style="padding: 24px;">
      <CLHeading type="section">Drawer Title</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This is the default drawer that slides in from the left. You can add any content here.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close Drawer</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### Left Position

Use the `position` prop set to `CLDrawerPosition.Left` to slide the drawer in from the left side.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Left Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :position="CLDrawerPosition.Left">
    <div style="padding: 24px;">
      <CLHeading type="section">Left Drawer</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer slides in from the left side of the screen. It takes the full height of the viewport.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### Right Position

Use the `position` prop set to `CLDrawerPosition.Right` to slide the drawer in from the right side.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Right Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :position="CLDrawerPosition.Right">
    <div style="padding: 24px;">
      <CLHeading type="section">Right Drawer</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer slides in from the right side of the screen. It takes the full height of the viewport.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### Top Position

Use the `position` prop set to `CLDrawerPosition.Top` to slide the drawer in from the top.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Top Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :position="CLDrawerPosition.Top">
    <div style="padding: 24px;">
      <CLHeading type="section">Top Drawer</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer slides in from the top of the screen. It takes the full width of the viewport.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### Bottom Position

Use the `position` prop set to `CLDrawerPosition.Bottom` to slide the drawer in from the bottom.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Bottom Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :position="CLDrawerPosition.Bottom">
    <div style="padding: 24px;">
      <CLHeading type="section">Bottom Drawer</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer slides in from the bottom of the screen. It takes the full width of the viewport.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### With Snap Point

Use the `snap-point` prop to control how much of the screen the drawer should open to. The value is a decimal from 0 to 1 (e.g., 0.3 means 30% of the screen). This only works when `auto-size` is `false`.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Drawer with Snap Point</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :snap-point="snapPoint"
    :auto-size="false"
    :position="CLDrawerPosition.Bottom">
    <div style="padding: 24px;">
      <CLHeading type="section">Drawer with Snap Point</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer opens to {{ (snapPoint * 100).toFixed(0) }}% of the screen height.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### Auto Size

Set `auto-size` to `true` to make the drawer automatically size based on its content. The drawer will respect the content size rather than using a percentage of the screen.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Auto-Size Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :auto-size="true"
    :position="CLDrawerPosition.Left">
    <div style="padding: 24px; width: 300px;">
      <CLHeading type="section">Auto-Size Drawer</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer automatically sizes based on its content width (300px in this case).
        The drawer will respect the content size rather than using a percentage of the screen.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

### Non-Dismissible

Set `dismissible` to `false` to prevent the drawer from closing when clicking outside or pressing ESC.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showDrawer = true">Open Non-Dismissible Drawer</CLButton>
  <CLDrawer
    :is-open="showDrawer"
    :on-close="() => showDrawer = false"
    :dismissible="false">
    <div style="padding: 24px;">
      <CLHeading type="section">Non-Dismissible Drawer</CLHeading>
      <CLText :type="CLTextTypes.Body" style="margin-top: 16px;">
        This drawer can only be closed using the close button or a programmatic action.
        Clicking outside or pressing ESC will not close it.
      </CLText>
      <div style="margin-top: 24px;">
        <CLButton @click="showDrawer = false">Close</CLButton>
      </div>
    </div>
  </CLDrawer>
</template>
```

## Props

<ComponentProps component-name="CLDrawer" />

## Slots

<ComponentSlots component-name="CLDrawer" />

---

### CLModal
URL: https://callaloo.dev/docs/components/modal

<ComponentDescription component-name="CLModal" />

## Usage

### Default

The modal component requires a unique `modal-id` prop and uses `:is-open` prop with `:on-close` callback to control visibility. Use the named slots (`header`, `body`, `footer`) to add content.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal</CLButton>
  <CLModal
    modal-id="default-modal"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This is the modal body content. Click outside the modal or press ESC to close it.
      </CLText>
    </template>
  </CLModal>
</template>
```

### With Title

Use the `title` prop to add a header to the modal.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Title</CLButton>
  <CLModal
    modal-id="title-modal"
    title="Modal Title"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal has a title in the header section.
      </CLText>
    </template>
  </CLModal>
</template>
```

### Custom Header, Body, and Footer

Use the `header`, `body`, and `footer` named slots to customize the modal content.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Custom Content</CLButton>
  <CLModal
    modal-id="custom-content-modal"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #header>
      <CLText :type="CLTextTypes.Heading">Custom Header Content</CLText>
    </template>
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal uses custom slots for header, body, and footer sections.
      </CLText>
    </template>
    <template #footer>
      <div class="flex-grid">
        <CLButton :color="CLColors.Neutral" :variant="CLColorVariants.Outline" @click="showModal = false">Cancel</CLButton>
        <CLButton :color="CLColors.Primary" @click="showModal = false">Confirm</CLButton>
      </div>
    </template>
  </CLModal>
</template>
```

### Fullscreen

Use the `fullscreen` prop to make the modal span the full width and height of the viewport.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Fullscreen Modal</CLButton>
  <CLModal
    modal-id="fullscreen-modal"
    title="Fullscreen Modal"
    :fullscreen="true"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal takes up the entire viewport.
      </CLText>
    </template>
  </CLModal>
</template>
```

### Non-Dismissible

Set `dismissible` to `false` to prevent the modal from closing when clicking outside or pressing ESC.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Non-Dismissible Modal</CLButton>
  <CLModal
    modal-id="non-dismissible-modal"
    title="Non-Dismissible Modal"
    :dismissible="false"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal can only be closed using the close button.
      </CLText>
    </template>
  </CLModal>
</template>
```

### Without Close Button

Set `close` to `false` to hide the close button.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal Without Close Button</CLButton>
  <CLModal
    modal-id="no-close-modal"
    title="No Close Button"
    :close="false"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal doesn't display a close button. Click outside to dismiss.
      </CLText>
    </template>
  </CLModal>
</template>
```

### Border Radius

Use the `border-radius` prop to customize the modal's border radius.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Custom Border Radius</CLButton>
  <CLModal
    modal-id="border-radius-modal"
    title="Custom Border Radius"
    :border-radius="CLBorderRadius.Large"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal has a large border radius.
      </CLText>
    </template>
  </CLModal>
</template>
```

### Max Width

Use the `max-width` prop to customize the modal's maximum width. The default is `640px`.



```vue


<template>
  <CLButton :color="CLColors.Primary" @click="showModal = true">Open Modal with Custom Max Width</CLButton>
  <CLModal
    modal-id="max-width-modal"
    title="Custom Max Width"
    max-width="900px"
    :is-open="showModal"
    :on-close="() => showModal = false">
    <template #body>
      <CLText :type="CLTextTypes.Body">
        This modal has a maximum width of 900px.
      </CLText>
    </template>
  </CLModal>
</template>
```

## Props

<ComponentProps component-name="CLModal" />

## Slots

<ComponentSlots component-name="CLModal" />

---

### CLTable
URL: https://callaloo.dev/docs/components/table

<ComponentDescription component-name="CLTable" />

## Usage

### Default

The CLTable component works together with related components to create a complete table structure: `CLTable.Header`, `CLTable.Body`, `CLTable.Row`, `CLTable.Cell`, `CLTable.Footer`, and `CLTable.NestedCell`.



```vue


<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Name</CLTable.Cell>
        <CLTable.Cell is-header>Email</CLTable.Cell>
        <CLTable.Cell is-header>Role</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>John Doe</CLTable.Cell>
        <CLTable.Cell>john@example.com</CLTable.Cell>
        <CLTable.Cell>Developer</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Jane Smith</CLTable.Cell>
        <CLTable.Cell>jane@example.com</CLTable.Cell>
        <CLTable.Cell>Designer</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Bob Johnson</CLTable.Cell>
        <CLTable.Cell>bob@example.com</CLTable.Cell>
        <CLTable.Cell>Manager</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

### Types

Use the `type` prop to customize the table's layout and spacing.



<ComponentExample
  component-name="CLTable"
  :component-props="[{name:'type',values:tableTypesProps}]"
  :examples="tableTypesOptions"
  :imports="['CLTable','CLTableTypes']">
  <template #default>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Name</CLTable.Cell>
        <CLTable.Cell is-header>Value</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Item 1</CLTable.Cell>
        <CLTable.Cell>100</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Item 2</CLTable.Cell>
        <CLTable.Cell>200</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </template>
</ComponentExample>

### Striped

Use the `striped` prop to add alternating background colors to table rows.



```vue


<template>
  <CLTable striped>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Product</CLTable.Cell>
        <CLTable.Cell is-header>Price</CLTable.Cell>
        <CLTable.Cell is-header>Stock</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Laptop</CLTable.Cell>
        <CLTable.Cell>$999</CLTable.Cell>
        <CLTable.Cell>15</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Mouse</CLTable.Cell>
        <CLTable.Cell>$29</CLTable.Cell>
        <CLTable.Cell>50</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Keyboard</CLTable.Cell>
        <CLTable.Cell>$79</CLTable.Cell>
        <CLTable.Cell>32</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Monitor</CLTable.Cell>
        <CLTable.Cell>$399</CLTable.Cell>
        <CLTable.Cell>8</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

### Bordered

Use the `bordered` prop to add borders to the entire table and its rows and columns.



```vue


<template>
  <CLTable bordered>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Name</CLTable.Cell>
        <CLTable.Cell is-header>Department</CLTable.Cell>
        <CLTable.Cell is-header>Status</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Alice Brown</CLTable.Cell>
        <CLTable.Cell>Engineering</CLTable.Cell>
        <CLTable.Cell>Active</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Charlie Davis</CLTable.Cell>
        <CLTable.Cell>Marketing</CLTable.Cell>
        <CLTable.Cell>Active</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Diana Evans</CLTable.Cell>
        <CLTable.Cell>Sales</CLTable.Cell>
        <CLTable.Cell>Inactive</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

### Rounded

Use the `border-radius` prop to customize the border radius when using the `bordered` prop.



<ComponentExample
  component-name="CLTable"
  :component-props="[{name:'bordered', defaultValue:true},{name:'border-radius',values:BorderRadiusProps}]"
  :examples="BorderRadiusOptions"
  :imports="['CLTable','CLBorderRadius']">
  <template #default>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Name</CLTable.Cell>
        <CLTable.Cell is-header>Value</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Item</CLTable.Cell>
        <CLTable.Cell>Data</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </template>
</ComponentExample>

### With Vertical Lines

Use the `with-vertical-lines` prop to add vertical separators between columns.



```vue


<template>
  <CLTable with-vertical-lines>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Column 1</CLTable.Cell>
        <CLTable.Cell is-header>Column 2</CLTable.Cell>
        <CLTable.Cell is-header>Column 3</CLTable.Cell>
        <CLTable.Cell is-header>Column 4</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Data 1</CLTable.Cell>
        <CLTable.Cell>Data 2</CLTable.Cell>
        <CLTable.Cell>Data 3</CLTable.Cell>
        <CLTable.Cell>Data 4</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Data 5</CLTable.Cell>
        <CLTable.Cell>Data 6</CLTable.Cell>
        <CLTable.Cell>Data 7</CLTable.Cell>
        <CLTable.Cell>Data 8</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

### With Footer

Use the `CLTable.Footer` component to add a footer section to your table.



```vue


<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Item</CLTable.Cell>
        <CLTable.Cell is-header is-number>Quantity</CLTable.Cell>
        <CLTable.Cell is-header is-number>Price</CLTable.Cell>
        <CLTable.Cell is-header is-number>Total</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Product A</CLTable.Cell>
        <CLTable.Cell is-number>2</CLTable.Cell>
        <CLTable.Cell is-number>$50.00</CLTable.Cell>
        <CLTable.Cell is-number>$100.00</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Product B</CLTable.Cell>
        <CLTable.Cell is-number>1</CLTable.Cell>
        <CLTable.Cell is-number>$75.00</CLTable.Cell>
        <CLTable.Cell is-number>$75.00</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Product C</CLTable.Cell>
        <CLTable.Cell is-number>3</CLTable.Cell>
        <CLTable.Cell is-number>$25.00</CLTable.Cell>
        <CLTable.Cell is-number>$75.00</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
    <CLTable.Footer>
      <CLTable.Row>
        <CLTable.Cell>Total</CLTable.Cell>
        <CLTable.Cell is-number>6</CLTable.Cell>
        <CLTable.Cell></CLTable.Cell>
        <CLTable.Cell is-number>$250.00</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Footer>
  </CLTable>
</template>
```

### Nested Cells

Use the `CLTable.NestedCell` component to display additional information within a cell.



```vue


<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Employee</CLTable.Cell>
        <CLTable.Cell is-header>Department</CLTable.Cell>
        <CLTable.Cell is-header>Contact</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>
          John Doe
          <CLTable.NestedCell>Senior Developer</CLTable.NestedCell>
        </CLTable.Cell>
        <CLTable.Cell>Engineering</CLTable.Cell>
        <CLTable.Cell>
          john@example.com
          <CLTable.NestedCell>+1 (555) 123-4567</CLTable.NestedCell>
        </CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>
          Jane Smith
          <CLTable.NestedCell>UX Designer</CLTable.NestedCell>
        </CLTable.Cell>
        <CLTable.Cell>Design</CLTable.Cell>
        <CLTable.Cell>
          jane@example.com
          <CLTable.NestedCell>+1 (555) 987-6543</CLTable.NestedCell>
        </CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>
          Bob Johnson
          <CLTable.NestedCell>Product Manager</CLTable.NestedCell>
        </CLTable.Cell>
        <CLTable.Cell>Product</CLTable.Cell>
        <CLTable.Cell>
          bob@example.com
          <CLTable.NestedCell>+1 (555) 246-8135</CLTable.NestedCell>
        </CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

### Column Widths

Use the `col-widths` prop to customize the width of each column.



```vue


<template>
  <CLTable :col-widths="['40%', '30%', '30%']">
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Description (40%)</CLTable.Cell>
        <CLTable.Cell is-header>Category (30%)</CLTable.Cell>
        <CLTable.Cell is-header>Status (30%)</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>This is a longer description that takes more space</CLTable.Cell>
        <CLTable.Cell>Type A</CLTable.Cell>
        <CLTable.Cell>Active</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Another description with more text content</CLTable.Cell>
        <CLTable.Cell>Type B</CLTable.Cell>
        <CLTable.Cell>Pending</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

### Cell Types

The `CLTable.Cell` component supports different cell types and modifiers.



```vue


<template>
  <CLTable>
    <CLTable.Header>
      <CLTable.Row>
        <CLTable.Cell is-header>Regular Cell</CLTable.Cell>
        <CLTable.Cell is-header is-number>Number Cell</CLTable.Cell>
        <CLTable.Cell is-header>Active Cell</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Header>
    <CLTable.Body>
      <CLTable.Row>
        <CLTable.Cell>Standard text</CLTable.Cell>
        <CLTable.Cell is-number>1,234.56</CLTable.Cell>
        <CLTable.Cell is-active>Highlighted</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>More text</CLTable.Cell>
        <CLTable.Cell is-number>789.00</CLTable.Cell>
        <CLTable.Cell>Normal cell</CLTable.Cell>
      </CLTable.Row>
      <CLTable.Row>
        <CLTable.Cell>Another row</CLTable.Cell>
        <CLTable.Cell is-number>456.78</CLTable.Cell>
        <CLTable.Cell is-active>Also highlighted</CLTable.Cell>
      </CLTable.Row>
    </CLTable.Body>
  </CLTable>
</template>
```

## Props

<ComponentProps component-name="CLTable" />

## Slots

<ComponentSlots component-name="CLTable" />

---

### CLLink
URL: https://callaloo.dev/docs/components/link

<ComponentDescription component-name="CLLink" />

## Usage

### Default

Use the default slot to set the text of the component.



<ComponentExample component-name="CLLink" :imports="['CLLink']" :component-props="[{name:'href',defaultValue:'\'#\''}]" slot='Link' />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLLink"
  :component-props="[{name:'href',defaultValue:'\'#\''},{name:'color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLLink','CLColors']"
  slot='Link' />

### Underline

Use the `underline` prop to control whether the link has an underline.



```vue


<template>
  <CLLink :color="CLColors.Primary" href="#" :underline="true">With Underline</CLLink>
  <CLLink :color="CLColors.Primary" href="#" :underline="false">Without Underline</CLLink>
</template>
```

### External Links

Use the `external` prop to indicate that the link opens in a new tab/window. This automatically adds an external link icon.



```vue


<template>
  <CLLink :color="CLColors.Primary" href="https://example.com" :external="true" :target="CLLinkTarget.Blank">External Link</CLLink>
  <CLLink :color="CLColors.Primary" href="#" :underline="false" :on-click="(evt) => evt?.preventDefault()">Internal Link</CLLink>
</template>
```

## Props

<ComponentProps component-name="CLLink" />

## Slots

<ComponentSlots component-name="CLLink" />

---

### CLNavLink
URL: https://callaloo.dev/docs/components/navlink

<ComponentDescription component-name="CLNavLink" />

## Usage

### Default

Use the default slot to set the text of the link.



<ComponentExample component-name="CLNavLink" :imports="['CLNavLink']" :component-props="[{name:'href',defaultValue:'#'}]" slot='NavLink' />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLNavLink"
  :component-props="[{name:'color',values:ColorProps},{name:'href',defaultValue:'#'}]"
  :examples="ColorOptions"
  :imports="['CLNavLink','CLColors']"
  slot='NavLink' />

### External Links

Use the `external` prop to indicate that the link will open a new tab/window. This automatically adds an external link icon.



```vue


<template>
  <CLNavLink href="#" external :underline="false" :on-click="(evt) => evt?.preventDefault()">External Link</CLNavLink>
</template>
```

### Target

Use the `target` prop to specify where to open the linked document.



```vue


<template>
  <CLNavLink href="#" :target="CLLinkTarget.Blank" :underline="false" :on-click="(evt) => evt?.preventDefault()">Open in New Tab</CLNavLink>
</template>
```

## Props

<ComponentProps component-name="CLNavLink" />

## Slots

<ComponentSlots component-name="CLNavLink" />

---

### CLNavSection
URL: https://callaloo.dev/docs/components/navsection

<ComponentDescription component-name="CLNavSection" />

## Usage

### Default

Pass an array of navigation items to the `navItems` prop. Each item should be a `CLNavItem` object with at minimum an `id` and `label` property.



```vue


<template>
  <CLNavSection :nav-items="navItems" />
</template>
```

### Colors

Use the `color` prop to customize the component's color. This color will be applied to all navigation links.



<ComponentExample
  component-name="CLNavSection"
  :component-props="[{name:'color',values:ColorProps},{name:'nav-items',defaultValue:'navItems'}]"
  :examples="ColorOptions"
  :imports="['CLNavSection','CLColors']" />

### Orientation

Use the `type` prop to set the orientation of the navigation section. The default orientation is horizontal.



```vue


<template>
  <CLNavSection :nav-items="navItems" :type="CLOrientation.Horizontal" />
  <CLNavSection :nav-items="navItems" :type="CLOrientation.Vertical" />
</template>
```

### External Links

Navigation items can be configured as external links by setting the `external` property to `true` and providing a `target`.



```vue


<template>
  <CLNavSection :nav-items="navItems" />
</template>
```

### With Click Handlers

Navigation items can include click handlers for handling navigation events.



```vue


<template>
  <CLNavSection :nav-items="navItems" />
</template>
```

## Props

<ComponentProps component-name="CLNavSection" />

---

### CLHeading
URL: https://callaloo.dev/docs/components/heading

<ComponentDescription component-name="CLHeading" />

## Usage

### Default

Use the default slot to set the text of the component.



<ComponentExample component-name="CLHeading" :imports="['CLHeading']" slot='Default Heading' />

### Types

Use the `type` prop to customize the heading's visual appearance and size.



<ComponentExample
  component-name="CLHeading"
  :component-props="[{name:'type',values:HeadingTypesProps}]"
  :examples="HeadingTypesOptions"
  :imports="['CLHeading','CLHeadingTypes']"
  slot='Heading' />

### Levels

Use the `level` prop to set the semantic heading level (h1-h6). By default, the level is automatically determined by the `type` prop.



<ComponentExample
  component-name="CLHeading"
  :component-props="[{name:'level',values:HeadingLevelsProps}]"
  :examples="HeadingLevelsOptions"
  :imports="['CLHeading','CLHeadingLevels']"
  slot='Heading Level' />

### Colors

Use the `color` prop to customize the component's color.



<ComponentExample
  component-name="CLHeading"
  :component-props="[{name:'color',values:ColorProps}]"
  :examples="ColorOptions"
  :imports="['CLHeading','CLColors']"
  slot='Heading' />

### Alignment

Use the `align` prop to set the horizontal alignment of the heading.



<ComponentExample
  component-name="CLHeading"
  :component-props="[{name:'align',values:AlignProps}]"
  :examples="AlignOptions"
  :imports="['CLHeading','CLAlign']"
  slot='Aligned Heading' />

### Bolder

Use the `bolder` prop to render text with a font-weight of 900.



```vue


<template>
  <CLHeading>Normal Weight</CLHeading>
  <CLHeading bolder>Bolder Weight</CLHeading>
</template>
```

### Truncate

Use the `truncate` prop to truncate the text if it overflows its container.



```vue


<template>
  <div style="max-width: 300px;">
    <CLHeading truncate>This is a very long heading that will be truncated when it overflows the container width</CLHeading>
  </div>
</template>
```

## Props

<ComponentProps component-name="CLHeading" />

## Slots

<ComponentSlots component-name="CLHeading" />

---

### CLText
URL: https://callaloo.dev/docs/components/text

<ComponentDescription component-name="CLText" />

## Usage

### Default

Use the default slot to set the text content of the component.



<ComponentExample component-name="CLText" :imports="['CLText']" slot='This is default text' />

### Colors

Use the `color` prop to customize the component's color.



```vue


<template>
  <CLText :color="CLColors.Primary">Primary text</CLText>
  <CLText :color="CLColors.Secondary">Secondary text</CLText>
  <CLText :color="CLColors.Danger">Danger text</CLText>
  <CLText :color="CLColors.Info">Info text</CLText>
  <CLText :color="CLColors.Neutral">Neutral text</CLText>
  <CLText :color="CLColors.Warning">Warning text</CLText>
  <CLText :color="CLColors.Success">Success text</CLText>
</template>
```

### Text Types

Use the `type` prop to customize the text size.



```vue


<template>
  <CLText :type="CLTextTypes.Tiny">Tiny text</CLText>
  <CLText :type="CLTextTypes.Small">Small text</CLText>
  <CLText :type="CLTextTypes.Medium">Medium text</CLText>
  <CLText :type="CLTextTypes.Body">Body text (default)</CLText>
  <CLText :type="CLTextTypes.Large">Large text</CLText>
  <CLText :type="CLTextTypes.XL">Extra large text</CLText>
</template>
```

### Alignment

Use the `align` prop to set the horizontal text alignment.



```vue


<template>
  <CLText :align="CLAlign.Left" :color="CLColors.Primary">Left aligned text</CLText>
  <CLText :align="CLAlign.Center" :color="CLColors.Primary">Center aligned text</CLText>
  <CLText :align="CLAlign.Right" :color="CLColors.Primary">Right aligned text</CLText>
</template>
```

### Font Weight

Use the `light`, `medium`, `bold`, or `bolder` props to customize the font weight.



```vue


<template>
  <CLText light :color="CLColors.Neutral">Light text (300)</CLText>
  <CLText :color="CLColors.Neutral">Normal text (400)</CLText>
  <CLText medium :color="CLColors.Neutral">Medium text (500)</CLText>
  <CLText bold :color="CLColors.Neutral">Bold text (700)</CLText>
  <CLText bolder :color="CLColors.Neutral">Bolder text (900)</CLText>
</template>
```

### Truncate

Use the `truncate` prop to truncate text that overflows its container.



```vue


<template>
  <div style="max-width: 300px;">
    <CLText truncate :color="CLColors.Primary">
      This is a very long text that will be truncated when it exceeds the width of its container
    </CLText>
    <CLText :color="CLColors.Neutral">
      This is a very long text that will wrap to multiple lines when it exceeds the width of its container
    </CLText>
  </div>
</template>
```

### HTML Tag

Use the `as` prop to customize the HTML tag that is rendered.



```vue


<template>
  <CLText as="p" :color="CLColors.Primary">Paragraph (default)</CLText>
  <CLText as="span" :color="CLColors.Info">Span element</CLText>
  <CLText as="div" :color="CLColors.Success">Div element</CLText>
</template>
```

## Props

<ComponentProps component-name="CLText" />

## Slots

<ComponentSlots component-name="CLText" />

---

## Patterns

### Introduction
URL: https://callaloo.dev/docs/patterns/introduction

# Patterns

Callaloo Patterns are high-fidelity, reusable compositions of components that solve common UI challenges. They demonstrate the library's versatility and provide production-ready starting points for your application.

## Core Principles

Every pattern in this section follows our core documentation standards:

- **Component-First**: We use Callaloo components for all UI elements.
- **Strictly Typed**: All examples use Enums and proper TypeScript types.
- **Functional**: Demos include reactive state and simulated interactions.
- **Copy-Paste Ready**: The implementation code is designed to be easily integrated into your project.

## Available Patterns

### Authentication
- **[Login Form](./login-form)**: A standard authentication card with email/password validation.
- **[Sign-Up Form](./signup-form)**: Comprehensive registration with terms acceptance.
- **[Multi-Step Form Wizard](./multi-step-wizard)**: Guided linear process for complex registrations.

### Application Structure
- **[Sidebar Navigation](./sidebar-navigation)**: Responsive navigation using drawers and vertical sections.
- **[Settings Layout](./settings-layout)**: A multi-category settings page with categorized form controls.
- **[Error Page](./error-page)**: Professional full-page layouts for 404s and access denials.

### Data & Feedback
- **[Data Management Table](./data-management-table)**: Rich administrative table with search, filtering, and row actions.
- **[Search & Filter Toolbar](./search-toolbar)**: Reusable control bar for lists and grids.
- **[Empty State](./empty-state)**: Clean placeholder for zero-data states or empty search results.
- **[Destructive Action Modal](./destructive-modal)**: Safety-focused confirmation dialogs for high-impact actions.
- **[Metrics Dashboard](./metrics-dashboard)**: KPI visualization using card grids and statistical highlights.

---

### Login Form
URL: https://callaloo.dev/docs/patterns/login-form

# Login Form

A common authentication pattern combining a card layout, input fields, and validation states.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    height: 100%;
    flex: 1;
  }
  .header-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
  }
  .footer-content {
    display: flex;
    justify-content: center;
  }
</style>


## Implementation

```vue


<template>
  <div class="pattern-preview">
    <CLThemeProvider>
      <CLCard :border-radius="CLBorderRadius.Small" :variant="CLColorVariants.Outline" elevated>
        <template #heading>
          <div class="header-content">
            <CLHeading :level="CLHeadingLevels.H2" :type="CLHeadingTypes.Large">Welcome Back</CLHeading>
            <CLText :color="CLColors.Neutral" :type="CLTextTypes.Small">Please sign in to your account</CLText>
          </div>
        </template>
        <form @submit.prevent="handleLogin" class="form-content">
          <CLInput
            id="email"
            name="email"
            label="Email"
            v-model="email"
            :prefix="CLIconNames.Mail"
            :type="CLInputTypes.Email"
            fluid
            required
          />
          <CLInput
            id="password"
            name="password"
            label="Password"
            v-model="password"
            :prefix="CLIconNames.Lock"
            :type="CLInputTypes.Password"
            fluid
            required
          />
          <CLButton
            :type="CLButtonTypes.Submit"
            :color="CLColors.Primary"
            :busy="isLoading"
            :disabled="isLoading"
            width="100%"
          >
            Sign In
          </CLButton>
        </form>
        <template #footer>
          <div class="footer-content">
            <CLText :type="CLTextTypes.Small">
              <CLLink href="#">Forgot Password?</CLLink>
            </CLText>
          </div>
        </template>
      </CLCard>
    </CLThemeProvider>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
  }
  .header-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
  }
  .footer-content {
    display: flex;
    justify-content: center;
  }
</style>
```

---

### Multi-Step Form Wizard
URL: https://callaloo.dev/docs/patterns/multi-step-wizard

# Multi-Step Form Wizard

A linear process for complex tasks, breaking down long forms into manageable steps to improve user completion rates and reduce cognitive load.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    flex: 1;
  }
  .step-header {
    margin-bottom: 2rem;
  }
  .step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .review-panel {
    background: var(--vp-c-bg-alt);
    border-radius: 8px;
    padding: 1rem;
  }
  .form-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 220px;
  }
  .form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vp-c-divider);
  }
  .success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <CLCard :variant="CLColorVariants.Ghost" :padded="true" width="300px" elevated>
      <div v-if="currentStep <= totalSteps">
        <div class="step-header">
          <div class="step-indicator">
            <CLText :type="CLTextTypes.Small" :color="CLColors.Neutral">Step {{ currentStep }} of {{ totalSteps }}</CLText>
            <CLText :type="CLTextTypes.Small" :color="CLColors.Primary" medium>
              {{ Math.round(progressValue) }}% Complete
            </CLText>
          </div>
          <CLProgress :model-value="progressValue" :color="CLColors.Primary" :rounded="true" />
        </div>
        <div class="form-body">
          <template v-if="currentStep === 1">
            <CLHeading :level="CLHeadingLevels.H3" :type="CLHeadingTypes.Large">Account Information</CLHeading>
            <CLInput id="email" name="email" label="Email Address" v-model="formData.email" placeholder="you@example.com" :type="CLInputTypes.Email" fluid />
            <CLInput id="pass" name="pass" label="Password" v-model="formData.password" :type="CLInputTypes.Password" fluid />
          </template>
          <template v-if="currentStep === 2">
            <CLHeading :level="CLHeadingLevels.H3" :type="CLHeadingTypes.Large">Profile Details</CLHeading>
            <CLInput id="name" name="name" label="Full Name" v-model="formData.fullName" placeholder="John Doe" fluid />
            <CLSelect id="plan" name="plan" label="Select Plan" v-model="formData.plan" :options="planOptions" fluid />
          </template>
          <template v-if="currentStep === 3">
            <CLHeading :level="CLHeadingLevels.H3" :type="CLHeadingTypes.Large">Review & Confirm</CLHeading>
            <div class="review-panel">
              <CLText :type="CLTextTypes.Small"><strong>Email:</strong> {{ formData.email || 'Not provided' }}</CLText>
              <CLText :type="CLTextTypes.Small"><strong>Name:</strong> {{ formData.fullName || 'Not provided' }}</CLText>
              <CLText :type="CLTextTypes.Small"><strong>Plan:</strong> {{ formData.plan }}</CLText>
            </div>
            <CLText :type="CLTextTypes.Small" :color="CLColors.Neutral">By clicking submit, you agree to our terms of service.</CLText>
          </template>
        </div>
        <div class="form-footer">
          <CLButton 
            :variant="CLColorVariants.Ghost" 
            :color="CLColors.Neutral"
            :type="CLButtonTypes.Button"
            :on-click="prevStep"
            :disabled="currentStep === 1 || isSubmitting">
            Previous
          </CLButton>
          <CLButton 
            v-if="currentStep < totalSteps"
            :color="CLColors.Primary" 
            :type="CLButtonTypes.Button"
            :on-click="nextStep">
            Continue
          </CLButton>
          <CLButton 
            v-else
            :color="CLColors.Success" 
            :type="CLButtonTypes.Button"
            :on-click="handleSubmit"
            :busy="isSubmitting">
            Create Account
          </CLButton>
        </div>
      </div>
      <div v-else class="success-state">
        <CLIcon :name="CLIconNames.CircleCheck" :size="64" :color="CLColors.Success" />
        <CLHeading :level="CLHeadingLevels.H3" :type="CLHeadingTypes.Large">Setup Complete!</CLHeading>
        <CLText :color="CLColors.Neutral">Your account has been successfully created. You can now start using Callaloo.</CLText>
        <CLButton :color="CLColors.Primary" :type="CLButtonTypes.Button" :on-click="resetWizard">Return to Start</CLButton>
      </div>
    </CLCard>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    flex: 1;
  }
  .step-header {
    margin-bottom: 2rem;
  }
  .step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .review-panel {
    background: var(--vp-c-bg-alt);
    border-radius: 8px;
    padding: 1rem;
  }
  .form-body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-height: 220px;
  }
  .form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--vp-c-divider);
  }
  .success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
  }
</style>
```

---

### Sign-Up Form
URL: https://callaloo.dev/docs/patterns/signup-form

# Sign-Up Form

A comprehensive registration pattern featuring multiple input types, validation simulation, and terms acceptance.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 300px;
    height: 100%;
    flex: 1;
  }
  .header-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
  }
  .terms-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .terms-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  .footer-content {
    display: flex;
    justify-content: center;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <CLCard :variant="CLColorVariants.Outline" elevated>
      <template #heading>
        <div class="header-content">
          <CLHeading :level="CLHeadingLevels.H2" :type="CLHeadingTypes.Large">Create Account</CLHeading>
          <CLText :color="CLColors.Neutral" :type="CLTextTypes.Small">Join our community today</CLText>
        </div>
      </template>
      <form @submit.prevent="handleRegister" class="form-content">
        <CLInput
          id="name"
          name="name"
          label="Full Name"
          v-model="name"
          :prefix="CLIconNames.User"
          fluid
          required
        />
        <CLInput
          id="email"
          name="email"
          label="Email"
          v-model="email"
          :prefix="CLIconNames.Mail"
          :type="CLInputTypes.Email"
          fluid
          required
        />
        <CLInput
          id="password"
          name="password"
          label="Password"
          v-model="password"
          :prefix="CLIconNames.Lock"
          :type="CLInputTypes.Password"
          fluid
          required
        />
        <CLInput
          id="confirm-password"
          name="confirm-password"
          label="Confirm Password"
          v-model="confirmPassword"
          :prefix="CLIconNames.Lock"
          :type="CLInputTypes.Password"
          fluid
          required
        />
        <div class="terms-check">
          <CLCheckbox 
            v-model="acceptTerms" 
            id="terms"
            name="terms"
            required
          />
          <label for="terms" class="terms-label">
            <CLText :type="CLTextTypes.Small" as="span">
              I accept the <CLLink href="#">Terms of Service</CLLink>
            </CLText>
          </label>
        </div>
        <CLButton
          :type="CLButtonTypes.Submit"
          :color="CLColors.Primary"
          :busy="isLoading"
          :disabled="isLoading || !acceptTerms"
          width="100%"
        >
          Create Account
        </CLButton>
      </form>
      <template #footer>
        <div class="footer-content">
          <CLText :type="CLTextTypes.Small">
            Already have an account? <CLLink href="./login-form">Sign In</CLLink>
          </CLText>
        </div>
      </template>
    </CLCard>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    margin: 0 auto;
    height: 100%;
  }
  .header-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .form-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
  }
  .terms-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .terms-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  .footer-content {
    display: flex;
    justify-content: center;
  }
</style>
```

---

### Error Page
URL: https://callaloo.dev/docs/patterns/error-page

# Error Page

A clean and helpful layout for handling 404 Not Found errors or access denials, providing clear navigation back to safety.

## Demo



<style scoped>
  .error-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 2rem;
    min-height: 400px;
  }
  .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    gap: 2rem;
  }
  .error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--vp-c-brand-1);
    opacity: 0.15;
    position: absolute;
    z-index: 0;
    user-select: none;
  }
  .error-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .actions {
    display: flex;
    gap: 1rem;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="error-page-container">
      <div class="error-code">404</div>
      <div class="error-content">
        <div class="error-main">
          <CLIcon :name="CLIconNames.AlertTriangle" :size="CLIconSizes.XXXL" :color="CLColors.Danger" />
          <CLHeading :level="CLHeadingLevels.H1" :type="CLHeadingTypes.Display">Page Not Found</CLHeading>
          <CLText :type="CLTextTypes.Body" :color="CLColors.Neutral" :align="CLAlign.Center">
            Sorry, we couldn't find the page you're looking for. It might have been moved or deleted.
          </CLText>
        </div>
        <div class="actions">
          <CLButton 
            :variant="CLColorVariants.Ghost" 
            :color="CLColors.Neutral"
            :type="CLButtonTypes.Button">
            Contact Support
          </CLButton>
          <CLButton 
            :color="CLColors.Primary" 
            :icon-before="CLIconNames.ArrowLeft"
            :type="CLButtonTypes.Button">
            Back to Dashboard
          </CLButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .error-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem 2rem;
    min-height: 400px;
  }
  .error-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 500px;
    gap: 2rem;
  }
  .error-code {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--vp-c-brand-1);
    opacity: 0.15;
    position: absolute;
    z-index: 0;
    user-select: none;
  }
  .error-main {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .actions {
    display: flex;
    gap: 1rem;
  }
</style>
```

---

### Settings Layout
URL: https://callaloo.dev/docs/patterns/settings-layout

# Settings Layout

A comprehensive settings page pattern featuring categorized sections, vertical navigation, and various form controls.

## Demo



<style scoped>
  .settings-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .settings-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  @media (min-width: 768px) {
    .settings-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 3rem;
    }
  }
  .settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .settings-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .card-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .terms-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .terms-label {
    cursor: pointer;
  }
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
  }
  .placeholder-section {
    padding: 2rem;
    text-align: center;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="settings-container">
      <div class="settings-layout">
        <aside class="settings-sidebar">
          <CLHeading :level="CLHeadingLevels.H3">Settings</CLHeading>
          <CLNavSection 
            :nav-items="categories" 
            :type="CLOrientation.Vertical"
            :color="CLColors.Primary"
          />
        </aside>
        <main class="settings-main">
          <CLCard :variant="CLColorVariants.Ghost" v-if="activeCategory === 'profile'" elevated>
            <template #heading>
              <div class="card-header-content">
                <CLHeading :level="CLHeadingLevels.H4" :type="CLHeadingTypes.XXXL">Profile Information</CLHeading>
                <CLText :type="CLTextTypes.Small" :color="CLColors.Neutral">Update your account's profile information and email address.</CLText>
              </div>
            </template>
            <form @submit.prevent="handleSave" class="form-grid">
              <CLInput
                id="full-name"
                name="full-name"
                label="Full Name"
                v-model="profileData.fullName"
                fluid
              />
              <CLInput
                id="email"
                name="email"
                label="Email Address"
                v-model="profileData.email"
                fluid
              />
              <CLSelect
                id="timezone"
                name="timezone"
                label="Timezone"
                v-model="profileData.timezone"
                :options="timezoneOptions"
                fluid
              />
              <div class="terms-check">
                <CLCheckbox 
                  v-model="profileData.marketingEmails" 
                  id="marketing"
                  name="marketing"
                />
                <label for="marketing" class="terms-label">
                  <CLText :type="CLTextTypes.Small" as="span">
                    Receive marketing emails and updates
                  </CLText>
                </label>
              </div>
              <div class="form-actions">
                <CLButton 
                  :type="CLButtonTypes.Submit" 
                  :color="CLColors.Primary"
                >
                  Save Changes
                </CLButton>
              </div>
            </form>
          </CLCard>
          <CLCard :variant="CLColorVariants.Ghost" v-else elevated>
            <template #heading>
              <CLHeading :level="CLHeadingLevels.H4" :type="CLHeadingTypes.XXXL">
                {{ categories.find(c => c.id === activeCategory)?.label }}
              </CLHeading>
            </template>
            <div class="placeholder-section">
              <CLText :align="CLAlign.Center">This section is currently under development.</CLText>
            </div>
          </CLCard>
        </main>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .settings-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .settings-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }
  @media (min-width: 768px) {
    .settings-layout {
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 3rem;
    }
  }
  .settings-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .settings-main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .card-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .terms-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .terms-label {
    cursor: pointer;
  }
  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
  }
  .placeholder-section {
    padding: 2rem;
    text-align: center;
  }
</style>
```

---

### Sidebar Navigation
URL: https://callaloo.dev/docs/patterns/sidebar-navigation

# Sidebar Navigation

A responsive navigation pattern using a drawer for mobile/compact views and a persistent section for larger layouts.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .sidebar-demo {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
    height: 100%;
  }
  .demo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--vp-c-divider);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
  }
  .sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    gap: 2rem;
    width: 280px;
  }
  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clll-divider-color, #eee);
  }
  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--clll-divider-color, #eee);
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="sidebar-demo">
      <div class="demo-toolbar">
        <CLButton 
          @click="toggleDrawer" 
          :color="CLColors.Primary"
          :icon-before="CLIconNames.Menu"
          :type="CLButtonTypes.Button"
        >
          Open Navigation
        </CLButton>
      </div>
      <div class="demo-content">
        <CLHeading :level="CLHeadingLevels.H3">Main Application Area</CLHeading>
        <CLText :type="CLTextTypes.Body">
          Click the button above to toggle the sidebar navigation drawer.
        </CLText>
      </div>
      <CLDrawer 
        :is-open="isDrawerOpen" 
        :on-close="closeDrawer"
        :position="CLDrawerPosition.Left"
        auto-size
      >
        <div class="sidebar-content">
          <div class="sidebar-header">
            <CLHeading :level="CLHeadingLevels.H4">Callaloo App</CLHeading>
          </div>
          <div class="nav-group">
            <CLText :type="CLTextTypes.Tiny" :color="CLColors.Neutral">MAIN MENU</CLText>
            <CLNavSection 
              :nav-items="mainNavItems" 
              :type="CLOrientation.Vertical" 
              :color="CLColors.Primary"
            />
          </div>
          <div class="nav-group">
            <CLText :type="CLTextTypes.Tiny" :color="CLColors.Neutral">SYSTEM</CLText>
            <CLNavSection 
              :nav-items="secondaryNavItems" 
              :type="CLOrientation.Vertical" 
              :color="CLColors.Neutral"
            />
          </div>
          <div class="sidebar-footer">
            <CLNavLink href="#" :color="CLColors.Danger">
              Logout
            </CLNavLink>
          </div>
        </div>
      </CLDrawer>
    </div>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .sidebar-demo {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
    height: 100%;
  }
  .demo-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--vp-c-divider);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
  }
  .sidebar-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
    gap: 2rem;
    width: 280px;
  }
  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clll-divider-color, #eee);
  }
  .nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--clll-divider-color, #eee);
  }
</style>
```

---

### Data Management Table
URL: https://callaloo.dev/docs/patterns/data-management-table

# Data Management Table

A feature-rich interface for managing data records, featuring search, status filtering, and row-level actions.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .table-pattern {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .toolbar {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
  }
  .search-input {
    min-width: 250px;
    flex: 1;
  }
  .status-select {
    min-width: 180px;
  }
  .actions-cell {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .empty-row {
    padding: 2rem;
    text-align: center;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="header-section">
      <CLHeading :level="CLHeadingLevels.H2" :type="CLHeadingTypes.Large">User Management</CLHeading>
      <CLText :color="CLColors.Neutral" :type="CLTextTypes.Small">Manage system users, their roles, and account statuses.</CLText>
    </div>
    <div class="table-pattern">
      <div class="toolbar">
        <div class="filters">
          <div class="search-input">
            <CLInput
              id="user-search"
              name="user-search"
              v-model="searchQuery"
              placeholder="Search by name or email..."
              :prefix="CLIconNames.Search"
              fluid
            />
          </div>
          <div class="status-select">
            <CLSelect
              id="status-filter"
              name="status-filter"
              v-model="statusFilter"
              :options="statusOptions"
              fluid
            />
          </div>
        </div>
        <CLButton
          :color="CLColors.Primary"
          :icon-before="CLIconNames.Plus"
          :type="CLButtonTypes.Button">
          Add User
        </CLButton>
      </div>
      <CLTable :col-widths="['180px', 'auto', 'auto', 'auto', 'auto']" :type="CLTableTypes.Default" striped>
        <CLTable.Header>
          <CLTable.Row>
            <CLTable.Cell is-header>User</CLTable.Cell>
            <CLTable.Cell is-header>Role</CLTable.Cell>
            <CLTable.Cell is-header>Status</CLTable.Cell>
            <CLTable.Cell is-header>Last Login</CLTable.Cell>
            <CLTable.Cell is-header></CLTable.Cell>
          </CLTable.Row>
        </CLTable.Header>
        <CLTable.Body>
          <CLTable.Row v-for="user in filteredUsers" :key="user.id">
            <CLTable.Cell>
              {{ user.name }}
              <CLTable.NestedCell>{{ user.email }}</CLTable.NestedCell>
            </CLTable.Cell>
            <CLTable.Cell>
              <CLText :type="CLTextTypes.Small" truncate>{{ user.role }}</CLText>
            </CLTable.Cell>
            <CLTable.Cell>
              <CLPill 
                :color="getStatusColor(user.status)" 
                :label="user.status" 
                :variant="CLColorVariants.Soft" 
              />
            </CLTable.Cell>
            <CLTable.Cell>
              <CLText :type="CLTextTypes.Small" truncate>{{ user.lastLogin }}</CLText>
            </CLTable.Cell>
            <CLTable.Cell>
              <div class="actions-cell">
                <CLButton 
                  :variant="CLColorVariants.Ghost" 
                  :border-radius="CLBorderRadius.Full"
                  :color="CLColors.Neutral"
                  :icon-before="CLIconNames.EditPencil"
                  :type="CLButtonTypes.Button"
                  :aria-label="`Edit ${user.name}`"
                />
              </div>
            </CLTable.Cell>
          </CLTable.Row>
          <CLTable.Row v-if="filteredUsers.length === 0">
            <CLTable.Cell colspan="5">
              <div class="empty-row">
                <CLText :color="CLColors.Neutral">No users found matching your criteria.</CLText>
              </div>
            </CLTable.Cell>
          </CLTable.Row>
        </CLTable.Body>
      </CLTable>
    </div>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .table-pattern {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  .toolbar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 640px) {
    .toolbar {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
  }
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    flex: 1;
  }
  .search-input {
    min-width: 250px;
    flex: 1;
  }
  .status-select {
    min-width: 180px;
  }
  .actions-cell {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .empty-row {
    padding: 2rem;
    text-align: center;
  }
</style>
```

---

### Destructive Action Modal
URL: https://callaloo.dev/docs/patterns/destructive-modal

# Destructive Action Modal

A safety-first pattern for confirming irreversible or high-impact actions using a modal and clear visual warnings.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .modal-demo-container {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding: 4rem 2rem;
  }
  .modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    width: 100%;
  }
  .warning-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="modal-demo-container">
      <CLButton 
        :color="CLColors.Danger" 
        :icon-before="CLIconNames.Trash"
        :type="CLButtonTypes.Button"
        :on-click="openModal">
        Delete Project
      </CLButton>
      <CLModal
        modal-id="delete-confirmation"
        :is-open="isModalOpen"
        title="Confirm Deletion"
        :on-close="closeModal"
        max-width="450px"
        :border-radius="CLBorderRadius.Medium">
        <template #body>
          <div class="warning-content">
            <CLText :type="CLTextTypes.Body">Are you sure you want to delete the project <strong>"Callaloo Documentation"</strong>? 
              This action cannot be undone.
            </CLText>
            <CLText :type="CLTextTypes.Small" :color="CLColors.Neutral">All associated data, including components, assets, and version history, will be permanently removed.
            </CLText>
          </div>
        </template>
        <template #footer>
          <div class="modal-footer-actions">
            <CLButton 
              :variant="CLColorVariants.Ghost" 
              :color="CLColors.Neutral"
              :type="CLButtonTypes.Button"
              :on-click="closeModal"
              :disabled="isDeleting">
              Cancel
            </CLButton>
            <CLButton 
              :color="CLColors.Danger"
              :type="CLButtonTypes.Button"
              :on-click="handleDelete"
              :busy="isDeleting"
              :disabled="isDeleting">
              Delete Permanently
            </CLButton>
          </div>
        </template>
      </CLModal>
    </div>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
.modal-demo-container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 4rem 2rem;
}
.modal-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  width: 100%;
}
.warning-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>
```

---

### Empty State
URL: https://callaloo.dev/docs/patterns/empty-state

# Empty State

A user-friendly layout displayed when no data exists or a search yields no results, guiding users toward their next action.

## Demo



<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  .empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
    gap: 1.5rem;
  }
  .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="empty-state-content">
      <div class="icon-wrapper">
        <CLIcon :name="CLIconNames.Folder" :size="CLIconSizes.XXXL" :color="CLColors.Neutral" />
      </div>
      <div class="text-group">
        <CLHeading :align="CLAlign.Center" :level="CLHeadingLevels.H3">No Projects Found</CLHeading>
        <CLText :color="CLColors.Neutral" :align="CLAlign.Center">
          You haven't created any projects yet. Start by creating your first project to organize your work.
        </CLText>
      </div>
      <CLButton 
        :color="CLColors.Primary" 
        :icon-before="CLIconNames.Plus"
        :type="CLButtonTypes.Button">
        Create First Project
      </CLButton>
    </div>
  </div>
</template>

<style scoped>
  .pattern-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
  }
  .empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 400px;
    gap: 1.5rem;
  }
  .icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .text-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
</style>
```

---

### Metrics Dashboard
URL: https://callaloo.dev/docs/patterns/metrics-dashboard

# Metrics Dashboard

A data-focused pattern for displaying key performance indicators (KPIs) and system statistics using a grid of cards.

## Demo



<style scoped>
  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
  }
  .metric-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    min-height: 9rem;
    background-color: var(--vp-c-bg, #fff);
  }
  .metric-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .metric-left {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }
  .metric-right {
    margin-left: 1rem;
    display: flex;
    align-items: flex-start;
  }
  .metric-value {
    font-weight: 700;
  }
  .metric-bottom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .activity-section {
    margin-top: 2rem;
  }
  .activity-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background-color: var(--vp-c-bg, #fff);
  }
  .activity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
  }
  .activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--vp-c-divider, #e5e7eb);
  }
  .activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .activity-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
  }
  .activity-topline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="dashboard-demo">
      <div class="metrics-grid">
        <CLCard
          v-for="metric in metrics"
          :key="metric.label"
          :color="CLColors.Neutral"
          :variant="CLColorVariants.Outline"
          :padded="false"
        >
          <div class="metric-card">
            <div class="metric-top">
              <div class="metric-left">
                <CLText :type="CLTextTypes.Small" :color="CLColors.Secondary">
                  {{ metric.label }}
                </CLText>
                <div class="metric-value">
                  <CLHeading
                    :level="CLHeadingLevels.H3"
                    :type="CLHeadingTypes.Section"
                  >
                    {{ metric.value }}
                  </CLHeading>
                </div>
              </div>
              <div class="metric-right">
                <CLIcon
                  :name="metric.icon"
                  :color="metric.color"
                />
              </div>
            </div>
            <div class="metric-bottom">
              <CLPill
                :color="metric.changeColor"
                :icon="metric.changeIcon"
                :label="metric.change"
                :variant="CLColorVariants.Soft"
              />
              <CLText :type="CLTextTypes.Tiny" :color="CLColors.Secondary">
                {{ metric.changeLabel }}
              </CLText>
            </div>
          </div>
        </CLCard>
      </div>
      <div class="activity-section">
        <CLCard
          width="100%"
          :color="CLColors.Neutral"
          :variant="CLColorVariants.Outline"
          :padded="false"
        >
          <div class="activity-card">
            <CLHeading :level="CLHeadingLevels.H4" :type="CLHeadingTypes.Section">
              Recent Activity
            </CLHeading>
            <div class="activity-list">
              <div
                v-for="activity in activities"
                :key="`${activity.user}-${activity.timestamp}`"
                class="activity-item"
              >
                <CLIcon :name="activity.icon" :color="activity.iconColor" />
                <div class="activity-main">
                  <div class="activity-topline">
                    <CLText :type="CLTextTypes.Small" :color="CLColors.Neutral">
                      {{ activity.user }}
                    </CLText>
                    <CLPill
                      :color="activity.labelColor"
                      :label="activity.label"
                      :variant="CLColorVariants.Soft"
                    />
                  </div>
                  <CLText :type="CLTextTypes.Body" :color="CLColors.Secondary">
                    {{ activity.description }}
                  </CLText>
                  <CLText :type="CLTextTypes.Tiny" :color="CLColors.Secondary">
                    {{ activity.timestamp }}
                  </CLText>
                </div>
              </div>
            </div>
          </div>
        </CLCard>
      </div>
    </div>
  </div>
</template>

<style scoped>
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.metric-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  min-height: 9rem;
  background-color: var(--vp-c-bg, #fff);
}
.metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metric-left {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.metric-right {
  margin-left: 1rem;
  display: flex;
  align-items: flex-start;
}
.metric-value {
  font-weight: 700;
}
.metric-bottom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.activity-section {
  margin-top: 2rem;
}
.activity-card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--vp-c-bg, #fff);
}
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--vp-c-divider, #e5e7eb);
}
.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.activity-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}
.activity-topline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
</style>
```

---

### Search & Filter Toolbar
URL: https://callaloo.dev/docs/patterns/search-toolbar

# Search and Filter Toolbar

A dedicated control bar pattern for lists and grids, providing standardized search and filtering capabilities.

## Demo



<style scoped>
  .toolbar-demo {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .result-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    border: 2px dashed var(--vp-c-divider);
    border-radius: 8px;
    color: var(--vp-c-text-2);
  }
  .toolbar-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .toolbar-container {
      flex-direction: row;
      align-items: flex-end;
    }
    .search-group {
      flex: 2;
    }
    .filter-group {
      flex: 1;
      min-width: 160px;
    }
    .action-group {
      display: flex;
      gap: 0.5rem;
    }
  }
</style>



## Implementation

```vue


<template>
  <div class="pattern-preview">
    <div class="toolbar-demo">
      <CLCard :variant="CLColorVariants.Ghost" :padded="true" elevated>
        <div class="toolbar-container">
          <div class="search-group">
            <CLInput
              id="search"
              name="search"
              label="Search"
              v-model="searchQuery"
              placeholder="Search items..."
              :prefix="CLIconNames.Search"
              fluid
            />
          </div>
          <div class="filter-group">
            <CLSelect
              id="category"
              name="category"
              label="Category"
              v-model="category"
              :options="categoryOptions"
              fluid
            />
          </div>
          <div class="filter-group">
            <CLSelect
              id="date"
              name="date"
              label="Time Range"
              v-model="dateRange"
              :options="dateOptions"
              fluid
            />
          </div>
          <div class="action-group">
            <CLButton 
              :color="CLColors.Primary" 
              :type="CLButtonTypes.Button">
              Apply
            </CLButton>
            <CLButton 
              :variant="CLColorVariants.Ghost" 
              :color="CLColors.Neutral" 
              :on-click="handleReset"
              :type="CLButtonTypes.Button"
              aria-label="Reset Filters">
              <CLIcon :name="CLIconNames.X" />
            </CLButton>
          </div>
        </div>
      </CLCard>
      <div class="result-area">
        <CLText :type="CLTextTypes.Small">Results will appear here...</CLText>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .toolbar-demo {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  .result-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    border: 2px dashed var(--vp-c-divider);
    border-radius: 8px;
    color: var(--vp-c-text-2);
  }
  .toolbar-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  @media (min-width: 768px) {
    .toolbar-container {
      flex-direction: row;
      align-items: flex-end;
    }
    .search-group {
      flex: 2;
    }
    .filter-group {
      flex: 1;
      min-width: 160px;
    }
    .action-group {
      display: flex;
      gap: 0.5rem;
    }
  }
</style>
```

---

## Providers

### CLToastProvider
URL: https://callaloo.dev/docs/providers/toast-provider

# Toast Provider

For managing toast notifications globally in your application, use the `<CLToastProvider />` component in combination with the `useToast` composable. This provides a convenient way to show toast notifications from anywhere in your application without managing the toast state manually.

## Usage

```vue
<!-- Root component -->


<template>
  <div class="my-app">
    <CLThemeProvider>
      <CLToastProvider>
        <ChildComponent />
      </CLToastProvider>
    </CLThemeProvider>
  </div>
</template>

<!-- Child component -->


<template>
  <CLButton @click="showSuccessToast">Show Success Toast</CLButton>
</template>
```

## Props

<ComponentProps component-name="CLToastProvider" />

---

## Assets

### Icons
URL: https://callaloo.dev/docs/assets/icons

# All Icons




<div style="margin-top: 3rem; margin-bottom: 3rem;">
  <div style="margin-bottom: 2rem;">
    <CLInput
      id="icon-search"
      name="icon-search"
      :prefix="CLIconNames.Search"
      placeholder="Search icons..."
      v-model="searchQuery"
      :type="CLInputTypes.Search"
    />
  </div>
  <div class="grid">
    <div
      v-for="(item, idx) in filteredIcons"
      :key="`${item.name}-icon-${idx}`"
      class="box"
    >
      <div class="cell">
        <CLIcon :color="CLColors.Secondary" :name="item.icon" :size="size" />
        <CLText :color="CLColors.Neutral" :type="CLTextTypes.Tiny">{{ item.name }}</CLText>
      </div>
    </div>
  </div>
</div>

<style scoped>
.grid {
  p {
    margin: 0;
  }
}
</style>

---