Colorffy UI

A modern Vue 3 component library and an expressive SCSS framework. 70+ headless UI components, a powerful tonal color system, and vivid theming — together or on their own.
pnpm add @colorffy/ui @colorffy/css

Everything you need

A complete toolkit for building polished, themeable interfaces.
70+ headless components
Accordions, dialogs, forms, tables, navigation, and more — accessible and unstyled.
Tonal color system
Adaptive --theme-* tones generated from your brand colors with color-mix().
Dark mode built in
Every component and color token adapts to light and dark automatically.
Fully typed
Complete TypeScript definitions for every component, prop, and composable.
Tree-shakeable
Import only what you use, or register everything globally — your call.
Vue 3 & Nuxt ready
Works in any Vue 3 app and drops into Nuxt 3/4 with a plugin or auto-imports.

A familiar, expressive API

Register once, then compose anywhere — style with Colorffy CSS or bring your own.
<template>
  <UiButton variant="filled" color="primary" text="Get started" />
  <UiBadge text="New" variant="accent" pill />
</template>

Works with your stack

Start building with Colorffy UI

Install the packages and ship a polished, themeable UI today.
Copyright © 2026