Callaloo

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.

Installation

pnpm add @codeandfunction/callaloo

or

npm install @codeandfunction/callaloo

or

yarn add @codeandfunction/callaloo

Example

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

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

Customizing typography and sizing

Fonts, letter-spacing and the base size are CSS variables, so you can override them from your own stylesheet without any JavaScript configuration.

:root {
  --clll-base-size: 16px; /* all spacing, font sizes and control heights derive from this */
  --clll-font-family: 'Inter', sans-serif;
  --clll-font-family-heading: 'Playfair Display', serif;
  --clll-font-family-label: 'Inter', sans-serif;
  --clll-font-family-mono: 'JetBrains Mono', monospace;
  --clll-letter-spacing: normal;
  --clll-letter-spacing-heading: -0.02em;
  --clll-letter-spacing-label: 0.04em;
  --clll-letter-spacing-mono: 0;
}

See the theming docs for every variable and which components use it.

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.

Available components

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

• Providers

  • CLThemeProvider – application-level theming and design tokens
  • CLToastProvider – toast notification provider

• Layout & containers

  • CLCard
  • CLDrawer
  • CLCarousel
  • CLDisclosure
  • CLTable
  • CLModal

• Navigation & links

  • CLLink
  • CLNavLink
  • CLNavSection

• Buttons & actions

  • CLButton
  • CLA11yButton

• Form inputs

  • CLInput
  • CLCheckbox
  • CLRadioButton
  • CLSelect
  • CLTextArea

• Typography & content

  • CLHeading
  • CLMaskedText
  • CLText

• Feedback, status & overlays

  • CLBadge
  • CLBanner
  • CLPill
  • CLProgress
  • CLSpinner
  • CLSkeleton
  • CLToast
  • CLDropdownMenu

• Icons

  • CLIcon and the full Callaloo icon set

• Composables

  • useTheme – access and control theme state
  • useToast – 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.

License

MIT