A modern Vue 3 UI library focused on developer experience, accessibility, and comprehensive theming.
$ npm add @codeandfunction/callaloo$ pnpm add @codeandfunction/callaloo$ yarn add @codeandfunction/callaloo<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>If you want to try Callaloo without a build step, you can load it directly from a CDN:
Prefer a live example? Try the no-build demo at https://cdn-playground.callaloo.dev/ or see the CDN / No-build guide.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Callaloo CDN Example</title>
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- Callaloo CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/@codeandfunction/callaloo@latest/dist/styles.css"
/>
<!-- Callaloo JS -->
<script src="https://unpkg.com/@codeandfunction/callaloo@latest/dist/callaloo.global.js"></script>
</head>
<body>
<div id="app"></div>
<!-- App layout template -->
<template id="app-template">
<cl-theme-provider>
<cl-toast-provider>
<toast-button />
</cl-toast-provider>
</cl-theme-provider>
</template>
<!-- Toast button template -->
<template id="toast-button-template">
<cl-button :on-click="onClickHandler" :size="CLSizes.Medium">
Hello from CDN
</cl-button>
</template>
<script>
const { createApp } = Vue;
const {
CLThemeProvider,
CLToastProvider,
CLButton,
CLSizes,
useToast,
} = Callaloo;
const ToastButton = {
name: 'ToastButton',
components: {
'cl-button': CLButton,
},
setup() {
const { showToast } = useToast();
const onClickHandler = () => {
showToast({
title: 'Hello from CDN',
message: 'This is a toast from Callaloo.',
color: 'success',
});
};
return { CLSizes, onClickHandler };
},
template: '#toast-button-template',
};
const App = {
components: {
'cl-theme-provider': CLThemeProvider,
'cl-toast-provider': CLToastProvider,
'toast-button': ToastButton,
},
template: '#app-template',
};
const app = createApp(App);
app.use(Callaloo.default);
app.mount('#app');
</script>
</body>
</html>Ready to build something amazing?