# [Callaloo](https://callaloo.dev/)

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.

<hr />

[![npm](https://img.shields.io/npm/v/%40codeandfunction%2Fcallaloo)](https://www.npmjs.com/package/@codeandfunction/callaloo)
[![npm](https://img.shields.io/npm/dm/%40codeandfunction%2Fcallaloo)](https://www.npmjs.com/package/@codeandfunction/callaloo)
[![Bundle Size](https://img.shields.io/bundlephobia/min/%40codeandfunction%2Fcallaloo)](https://bundlephobia.com/result?p=%40codeandfunction%2Fcallaloo)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/%40codeandfunction%2Fcallaloo)](https://bundlephobia.com/result?p=%40codeandfunction%2Fcallaloo)

<br />

## Installation

```bash
pnpm add @codeandfunction/callaloo
```

**or**

```bash
npm install @codeandfunction/callaloo
```

**or**

```bash
yarn add @codeandfunction/callaloo
```

## Example

The following example demonstrates how to use a Callaloo component in your Vue project.

```vue
<script setup lang="ts">
import CLThemeProvider from '@codeandfunction/callaloo/CLThemeProvider';
import CLButton from '@codeandfunction/callaloo/CLButton';
import { CLSizes } from '@codeandfunction/callaloo';

const onClickHandler = (evt?: Event) => {
  alert('Hello World!');
};
</script>

<template>
  <div class="my-awesome-app">
    <CLThemeProvider>
      <CLButton :on-click="onClickHandler" :size="CLSizes.Medium">Hello world</CLButton>
    </CLThemeProvider>
  </div>
</template>
```

## Usage via CDN

If you want to try Callaloo without a build step, you can load it directly from a CDN a detailed example is available in the [docs](https://callaloo.dev/#usage-via-cdn).

## Available components

Callaloo ships a growing set of production-ready Vue 3 components and composables. Core building blocks include:

- **Providers**
  - [CLThemeProvider](https://callaloo.dev/docs/getting-started/theming) – application-level theming and design tokens
  - [CLToastProvider](https://callaloo.dev/docs/providers/toast-provider) – toast notification provider

- **Layout & containers**
  - [CLCard](https://callaloo.dev/docs/components/card)
  - [CLDrawer](https://callaloo.dev/docs/components/drawer)
  - [CLCarousel](https://callaloo.dev/docs/components/carousel)
  - [CLDisclosure](https://callaloo.dev/docs/components/disclosure)
  - [CLTable](https://callaloo.dev/docs/components/table)
  - [CLModal](https://callaloo.dev/docs/components/modal)

- **Navigation & links**
  - [CLLink](https://callaloo.dev/docs/components/link)
  - [CLNavLink](https://callaloo.dev/docs/components/navlink)
  - [CLNavSection](https://callaloo.dev/docs/components/navsection)

- **Buttons & actions**
  - [CLButton](https://callaloo.dev/docs/components/button)
  - [CLA11yButton](https://callaloo.dev/docs/components/a11ybutton)

- **Form inputs**
  - [CLInput](https://callaloo.dev/docs/components/input)
  - [CLCheckbox](https://callaloo.dev/docs/components/checkbox)
  - [CLRadioButton](https://callaloo.dev/docs/components/radio)
  - [CLSelect](https://callaloo.dev/docs/components/select)
  - [CLTextArea](https://callaloo.dev/docs/components/textarea)

- **Typography & content**
  - [CLHeading](https://callaloo.dev/docs/components/heading)
  - [CLText](https://callaloo.dev/docs/components/text)

- **Feedback, status & overlays**
  - [CLBadge](https://callaloo.dev/docs/components/badge)
  - [CLBanner](https://callaloo.dev/docs/components/banner)
  - [CLPill](https://callaloo.dev/docs/components/pill)
  - [CLProgress](https://callaloo.dev/docs/components/progress)
  - [CLSpinner](https://callaloo.dev/docs/components/spinner)
  - [CLSkeleton](https://callaloo.dev/docs/components/skeleton)
  - [CLToast](https://callaloo.dev/docs/components/toast)
  - [CLDropdownMenu](https://callaloo.dev/docs/components/dropdown)

- **Icons**
  - [CLIcon](https://callaloo.dev/docs/components/icon) and the full Callaloo [icon set](https://callaloo.dev/docs/assets/icons)

- **Composables**
  - [useTheme](https://callaloo.dev/docs/getting-started/theming) – access and control theme state
  - [useToast](https://callaloo.dev/docs/providers/toast-provider) – trigger toasts from anywhere in your app

For detailed usage, props, and examples for each component, see https://callaloo.dev/docs/components/.

## Documentation

To learn more about how to theme components, and more detailed documentation and examples, please visit the [official documentation site](https://callaloo.dev/).

## License

[MIT](https://opensource.org/license/MIT)