Colorffy UI
Usage
Register and use Colorffy UI components in Vue 3 and Nuxt 3.
@colorffy/ui gives you 70+ headless Vue 3 components. Register them all globally, or import only what you need.
Register globally (Vue 3)
main.ts
import ColorffyUI from '@colorffy/ui'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(ColorffyUI).mount('#app')
Then use components anywhere — no imports needed:
<template>
<UiButton variant="filled" color="primary" text="Click me!" />
<UiCard>
<template #body>
<h2>Card content</h2>
</template>
</UiCard>
</template>
Import individually (tree-shaking)
<script setup lang="ts">
import { UiAlert, UiButton, UiCard } from '@colorffy/ui'
</script>
<template>
<UiButton variant="filled" color="primary" text="Click me!" />
<UiAlert type="banner" variant="success" message="Operation successful!" />
</template>
Register globally (Nuxt 3)
plugins/colorffy-ui.ts
import ColorffyUI from '@colorffy/ui'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(ColorffyUI)
})
Enable auto-imports (optional)
nuxt.config.ts
export default defineNuxtConfig({
components: [
{
path: 'node_modules/@colorffy/ui/dist',
pattern: '**/*.vue',
pathPrefix: false,
},
],
})
Use composables
useToast takes a Ref to a mounted UiAlertToast instance and returns variant helpers plus a generic onToastMessage:
<script setup lang="ts">
import { useToast } from '@colorffy/ui'
import { ref } from 'vue'
const toastRef = ref(null)
const toast = useToast(toastRef)
toast.success('Saved!')
toast.warning('Check the form for errors.')
toast.danger('Something went wrong.')
toast.info('New updates are available.')
toast.primary('Welcome back!')
</script>
<template>
<UiAlertToast ref="toastRef" />
</template>
Use with TypeScript
import type { ButtonColor, ButtonVariant, FloatingPlacement, SizeLevel, ThemeColor } from '@colorffy/ui'
const variant: ButtonVariant = 'filled'
const color: ButtonColor = 'primary'
// Canonical shared unions used across components — narrow them with
// `Extract<>` where a component only supports a subset.
const themeColor: ThemeColor = 'accent'
const size: SizeLevel = 'md'
const placement: FloatingPlacement = 'top-start'
INavigationItem and IMenuItem were removed — use INavItem for navbar, sidebar, and popover-menu items.