CallalooBuild beautiful Vue interfaces

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

🎨

Comprehensive Theming

Built-in dark mode support, customizable color palettes, and flexible design tokens. Create your brand's unique look effortlessly.

♿

Accessibility First

Every component follows WCAG guidelines with proper ARIA attributes, keyboard navigation, and screen reader support out of the box.

🚀

Developer Experience

TypeScript support, tree-shakable components, comprehensive documentation, and Storybook integration for rapid development.

📦

Lightweight & Modular

Import only what you need. Small bundle size with zero dependencies beyond Vue 3. Perfect for performance-conscious applications.

🔧

Flexible & Customizable

Six visual variants (solid, soft, outline, ghost, contrast, text) and semantic color system that adapts to any design requirements.

🎯

Production Ready

Battle-tested components with comprehensive testing, detailed documentation, and active maintenance. Used in real-world applications.

💨

Modern Vue 3

Built with Composition API, supports Vue 3.x+, and leverages modern JavaScript features for optimal performance and maintainability.

📚

Rich Component Library

25+ carefully crafted components including buttons, forms, navigation, data display, and feedback components for complete UI coverage.

🌈

Design System Ready

Consistent spacing, typography, and color systems that scale. Perfect foundation for building comprehensive design systems.

Quick Start

Install Callaloo

npmpnpmyarn

$ npm add @codeandfunction/callaloo

$ pnpm add @codeandfunction/callaloo

$ yarn add @codeandfunction/callaloo

Add to your Vue 3 project

vue

<script setup lang="ts">
import CLButton from '@codeandfunction/callaloo/CLButton'
import CLThemeProvider from '@codeandfunction/callaloo/CLThemeProvider'
import { CLColors } from '@codeandfunction/callaloo'
</script>

<template>
  <CLThemeProvider>
    <CLButton :color="CLColors.Primary">
      Hello Callaloo! 👋
    </CLButton>
  </CLThemeProvider>
</template>

Ready to build something amazing?

Get Started →