Colorffy

Quick Reference Index

Framework Overview

• 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

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

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)
})

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

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

• 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

• 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

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

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

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

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

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

Component Categories Quick Reference

Utility Class Categories Quick Reference

m-*

p-*

gap-*

text-*

bg-*

border-*

fs-*

fw-*

text-{align}

d-flex

d-grid

justify-content-*

align-items-*

border

rounded-{size}

shadow-*

opacity-*

filter-*

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions