Installation

Setup

Add @codeandfunction/callaloo to your project

npm

$ npm add @codeandfunction/callaloo

pnpm

$ pnpm add @codeandfunction/callaloo

yarn

$ yarn add @codeandfunction/callaloo

Usage

Basic Setup

After installing Callaloo, you need to import the CSS styles and wrap your application with the CLThemeProvider component:

<script setup lang="ts">
import '@codeandfunction/callaloo/styles.css';
import { CLThemeProvider } from '@codeandfunction/callaloo';
</script>

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

<script setup lang="ts">
import '@codeandfunction/callaloo/styles.css';
import { 
  CLButton, 
  CLInput, 
  CLCard, 
  CLThemeProvider,
  CLColors,
  CLColorVariants 
} from '@codeandfunction/callaloo';

const handleClick = () => {
  console.log('Button clicked!');
};

const inputValue = ref('');
</script>

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

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

// Import specific components to reduce bundle size
import { CLButton } from '@codeandfunction/callaloo/components/Button';
import { CLInput } from '@codeandfunction/callaloo/components/Input';

// Or import everything (less efficient but convenient)
import { CLButton, CLInput } from '@codeandfunction/callaloo';

TypeScript Support

Callaloo is written in TypeScript and provides full type definitions:

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

// Type-safe component props
const buttonColor: CLColors = CLColors.Primary;
const buttonVariant: CLColorVariants = CLColorVariants.Solid;
</script>

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

Next Steps

• Learn about theming to customize the appearance
• Explore individual components 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)