Colorffy UI
Styling
Style Colorffy UI with Colorffy CSS, SCSS, or your own CSS.
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)
main.ts
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 Colorffy CSS with SCSS
variables.scss
@forward '@colorffy/css/scss/abstracts/variables' with (
$primary: #4f46e5,
$secondary: #ec4899,
$accent: #0ea5e9,
);
@use '@colorffy/css/scss/main';
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 {
--theme-primary-base: #4f46e5;
--theme-secondary-base: #ec4899;
--_btn-radius: 50px;
--_card-bg-color: #ffffff;
}
See Colorffy CSS → Customization for the full theming guide.