Styling

Colorffy UI components are unstyled by default and use semantic class names (.btn, .card, .alert, …). Choose the styling approach that fits your project.

Option 1 — Use Colorffy CSS (recommended)

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

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

Option 2 — Customize the Colorffy CSS theme

Theme colors and fonts are CSS custom properties. Override them in your own stylesheet, with the compiled CSS or the SCSS source:

:root {
  /* each theme color has a light-mode (-500) and dark-mode (-50) tone */
  --cffy-color-brand-primary-500: oklch(45% 0.2 275);
  --cffy-color-brand-primary-50: oklch(90% 0.06 275);
  --cffy-color-brand-secondary-500: oklch(62% 0.2 350);
  --cffy-color-brand-secondary-50: oklch(92% 0.05 350);

  --cffy-font-primary: 'Inter', sans-serif;
  --cffy-font-secondary: 'Inter', sans-serif;
}

Corners come from three runtime shape roles (--cffy-shape-container, --cffy-shape-field, --cffy-shape-control), and a few defaults are compile-time SCSS variables; see Customization.

Option 3 — Bring your own CSS

Style the semantic class names directly:

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
}

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
}

Override CSS variables

:root {
  --cffy-primary-base: #4f46e5;
  --cffy-secondary-base: #ec4899;
  --cffy-btn-radius: 50px;
  --cffy-card-bg-color: #ffffff;
}

Set a component's public --cffy-* hook, never its private --_* variable. See Colorffy CSS → Customization for the full theming guide, including theme presets.