Enhanced Service

Class Variant

Create reusable, extensible, and customizable style class variants.

🚧This page is still under construction and some content may not be complete.

import cv from 'class-variant'
 
const btn = cv(
    'inline-flex rounded',
    {
        intent: {
            primary: 'bg:blue fg:white bg:blue-55:hover',
            secondary: 'bg:white fg:slate-30 bg:slate-90:hover',
        },
        size: {
            sm: 'text:14 p:5|15',
            md: 'text:16 p:10|25'
        }
    },
    ['uppercase', { intent: 'primary', size: 'md' }],
    ({ indent, size }) => indent && size && 'font:semibold'
)
 
btn.default = {
    intent: 'primary',
    size: 'sm'
}
 
export default btn

Apply it:

import btn from './class-variants/btn'
 
btn()
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:14 p:5|8 font:semibold
 
btn({ indent: 'secondary', size: 'sm' })
// inline-flex rounded bg:white fg:slate-30 bg:slate-90:hover text:14 p:5|8 font:semibold
 
btn({ indent: 'primary', size: 'md' })
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:16 p:10|25 uppercase font:semibold

Basic usage

🚧

Class Variant

Overview [sr-only]

Basic usage