Getting Started
Introduction
Learn what Colorffy is and when to use it.
Colorffy helps you build vibrant, modern interfaces with a headless Vue 3 component library and an expressive SCSS framework that work great together — or independently.
What is Colorffy?
Colorffy is a monorepo with two complementary packages:
- @colorffy/ui — a Nuxt / Vue 3 component library of 70+ unstyled, headless components with full TypeScript support.
- @colorffy/css — an expressive SCSS framework featuring a powerful tonal color system, vivid gradients, dark mode, and utility classes.
Colorffy UI is style-agnostic: pair it with Colorffy CSS for instant styling, or bring your own.
What you can do
- Compose UIs fast — accordions, dialogs, forms, navigation, tables, and more.
- Theme expressively — tonal colors, gradients, and runtime CSS variables.
- Stay in control — headless components mean you own the markup and styles.
- Ship typed code — complete TypeScript definitions across the library.
When to use Colorffy
Use Colorffy when you need to:
- Build a Vue 3 or Nuxt 3 app with a consistent, themeable design system.
- Start from accessible, headless components without fighting opinionated styles.
- Apply a cohesive color system and utilities to an existing project.
This documentation includes AI integration with an MCP server and automatic
llms.txt generation.