Get started

function

cv

Define typed semantic class variants, defaults, and class passthrough.

Example

ts
import { cv, type VariantProps } from '@riducms/ui';

const notice = cv({
  base: 'notice',
  variants: {
    tone: {
      neutral: 'notice--neutral',
      warning: 'notice--warning'
    }
  },
  defaultVariants: { tone: 'neutral' }
});
type NoticeTone = VariantProps<typeof notice>['tone'];
const className = notice({ tone: 'warning', class: 'app-notice' });

Arguments

ArgumentTypeDescription
__0{ base: string; variants: T & { class?: never; }; defaultVariants?: NoInfer<VariantSelection<T>>; }The __0 value.

Returns

Joins selected classes into one string.

(props?: VariantSelection<T> & { class?: string | undefined; }) => string

How it works

No utility merging or compound variants. Svelte class arrays compose conditional classes; CSS controls precedence.

Full signature

function cv<const T extends VariantMap>( { base, variants, defaultVariants, }: { base: string variants: T & { class?: never; } defaultVariants?: NoInfer< VariantSelection<T> > }, ): (props?: VariantSelection<T> & { class?: string | undefined; }) => string

Source packages/ui/src/lib/index.ts:7

Related guides