Colorffy

Complete framework for building Vue 3 and Nuxt 3 applications with Colorffy UI (component library) and Colorffy CSS (utility framework).

Quick Reference Index

Framework Overview

Colorffy UI (@colorffy/ui)

• 70+ Vue 3 components (buttons, forms, cards, dialogs, navigation, tables, etc.)
• Unstyled/headless by default - full control over styling
• TypeScript support, tree-shakeable
• Works with any styling approach

Colorffy CSS (@colorffy/css)

• Expressive SCSS framework with tonal color system
• Complete utility class library
• Flexible grid and flexbox layouts
• Dark mode support, customizable via SCSS variables

Key Insight: Colorffy UI components are unstyled by default. Style with Colorffy CSS, custom CSS, or any CSS framework.

Quick Start

Vue 3

npm install @colorffy/ui @colorffy/css
npm install @vueuse/components floating-vue

// main.ts
import { createApp } from 'vue'
import ColorffyUI from '@colorffy/ui'
import '@colorffy/css'

const app = createApp(App)
app.use(ColorffyUI)
app.mount('#app')

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['@colorffy/css']
})

// plugins/colorffy-ui.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(ColorffyUI)
})

See complete installation guide →

Usage Example

<script setup lang="ts">
import { ref } from 'vue'
import { UiButton, UiCard, UiInputText, UiModal } from '@colorffy/ui'

const isOpen = ref(false)
const name = ref('')
</script>

<template>
  <!-- Components with Colorffy CSS styling -->
  <UiCard class="shadow-lg rounded-lg">
    <template #body>
      <h2 class="text-primary fw-bold mb-3">Welcome</h2>
      <UiInputText 
        v-model="name" 
        label="Name"
        placeholder="Enter your name"
        class="mb-3"
      />
      <UiButton 
        variant="filled" 
        color="primary"
        text="Open Modal"
        @click="isOpen = true"
      />
    </template>
  </UiCard>

  <UiModal v-model="isOpen" title="Hello">
    <template #body>
      <p>Hello, {{ name }}!</p>
    </template>
  </UiModal>
</template>

When to Read Each Guide

Installation & Setup - When you need to:

• Install Colorffy in Vue 3 or Nuxt 3
• Configure SCSS customization
• Setup auto-imports
• Troubleshoot installation issues

Component Selection Guide - When you need to:

• Choose the right component for a UI pattern
• Understand when to use one component vs another
• Find components by use case (forms, navigation, feedback, etc.)
• See component decision trees

Styling Guide - When you need to:

• Understand styling approaches (Colorffy CSS, custom, hybrid)
• Style components with Colorffy CSS utilities
• Write custom CSS for components
• Integrate with Tailwind, UnoCSS, or other frameworks

Theming System - When you need to:

• Customize colors, typography, spacing
• Setup dark mode
• Override SCSS variables
• Configure design tokens

Components API - When you need to:

• Complete component API reference
• Specific props, slots, events documentation
• Component-specific features and options

CSS Utilities - When you need to:

• Specific utility class names
• Class patterns for spacing, colors, typography
• Responsive utility variants

Layout Systems - When you need to:

• Build responsive layouts with grid or flexbox
• Understand column configurations
• Create complex layouts with alignment and gap utilities

Best Practices - When you need to:

• Common patterns (forms, modals, tables, toasts)
• Code examples for typical use cases
• Performance tips and anti-patterns to avoid

Component Categories Quick Reference

Layout: UiHeaderContent, UiPaneContent, UiCard Navigation: UiTabs, UiNavigationBar, UiDrawerLink, UiSegmentedControls Buttons: UiButton, UiButtonMenu, UiButtonToggleGroup, UiButtonTooltip Forms: UiInputText, UiInputTextarea, UiInputSelect, UiInputCheck, UiInputRadio, UiInputRange, UiInputFile Dialogs: UiModal, UiConfirmModal Feedback: UiAlert, UiAlertToast, UiLoading, UiEmpty Data: UiDatatable, UiListGroup, UiAccordion Media: UiAvatar, UiIconMaterial

See complete component list →

Utility Class Categories Quick Reference

Spacing: m-*, p-*, gap-* (0-5, responsive) Colors: text-*, bg-*, border-* (primary, success, danger, etc.) Typography: fs-* (100-600), fw-* (400-800), text-{align} Layout: d-flex, d-grid, justify-content-*, align-items-* Borders: border, rounded-{size} Effects: shadow-*, opacity-*, filter-*

See complete utilities reference →

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions