Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/tokenami/tokenami/llms.txt

Use this file to discover all available pages before exploring further.

The css.compose method creates reusable component styles with type-safe variants. It returns a function that generates optimized className and style utilities.

​
Import

import { css } from '@tokenami/css';

​
Signature

function css.compose<T>(config: TokenamiComposeInput<T>): TokenamiComposeOutput<T>
​
config
TokenamiComposeInput<T>
required
Configuration object defining base styles, variants, and includes.
​
TokenamiComposeOutput<T>
function
A generator function that accepts variant selections and returns [cn, style] utilities.

​
Usage

​
Basic Component Styles

Define reusable component styles with a static className: 
import { css } from '@tokenami/css';

const button = css.compose({
  '--padding': 'var(--space_3)',
  '--border-radius': 'var(--radius_md)',
  '--font-weight': 'var(--font-weight_semibold)'
});

function Button() {
  const [cn, style] = button();
  
  return (
    <button className={cn()} style={style()}>
      Click me
    </button>
  );
}

​
With Variants

Define type-safe variants for different component states: 
const button = css.compose({
  '--padding': 'var(--space_3)',
  '--border-radius': 'var(--radius_md)',
  
  variants: {
    variant: {
      primary: {
        '--background-color': 'var(--color_primary)',
        '--color': 'var(--color_white)'
      },
      secondary: {
        '--background-color': 'var(--color_gray-200)',
        '--color': 'var(--color_gray-900)'
      }
    },
    size: {
      sm: { '--padding': 'var(--space_2)' },
      md: { '--padding': 'var(--space_3)' },
      lg: { '--padding': 'var(--space_4)' }
    }
  }
});

function Button({ variant = 'primary', size = 'md' }) {
  const [cn, style] = button({ variant, size });
  
  return (
    <button className={cn()} style={style()}>
      Click me
    </button>
  );
}

​
Boolean Variants

Use string literals 'true' and 'false' for boolean-like variants: 
const button = css.compose({
  '--opacity': '1',
  
  variants: {
    disabled: {
      true: {
        '--opacity': '0.5',
        '--cursor': 'not-allowed'
      },
      false: {
        '--cursor': 'pointer'
      }
    }
  }
});

function Button({ disabled }: { disabled?: boolean }) {
  const [cn, style] = button({ disabled });
  
  return (
    <button className={cn()} style={style()}>
      Click me
    </button>
  );
}

​
Numeric Variants

Variant keys can be numeric (automatically typed as numbers): 
const icon = css.compose({
  '--size': 4,
  
  variants: {
    size: {
      16: { '--size': 2 },
      24: { '--size': 3 },
      32: { '--size': 4 }
    }
  }
});

function Icon({ size = 24 }: { size?: 16 | 24 | 32 }) {
  const [cn, style] = icon({ size });
  
  return <div className={cn()} style={style()} />;
}

​
Style Overrides

Override composed styles at the call site: 
const button = css.compose({
  '--padding': 'var(--space_3)',
  '--background-color': 'var(--color_primary)'
});

function Button({ customColor }) {
  const [cn, style] = button();
  
  return (
    <button 
      className={cn()} 
      style={style({ '--background-color': customColor })}
    >
      Click me
    </button>
  );
}

​
Composing Multiple Styles

Combine multiple composed styles using includes: 
const focusRing = css.compose({
  '--outline': '2px solid var(--color_primary)',
  '--outline-offset': '2px'
});

const button = css.compose({
  includes: [focusRing],
  '--padding': 'var(--space_3)',
  '--background-color': 'var(--color_primary)'
});

function Button() {
  const [cn, style] = button();
  
  return (
    <button className={cn()} style={style()}>
      Click me
    </button>
  );
}

​
Chaining ClassNames

Add additional classNames to the generated one: 
function Button({ className }) {
  const [cn, style] = button();
  
  return (
    <button className={cn(className, 'extra-class')} style={style()}>
      Click me
    </button>
  );
}

​
Responsive Variants

Combine with responsive modifiers from your config: 
const button = css.compose({
  '--padding': 'var(--space_2)',
  '--md_padding': 'var(--space_4)', // Applies at md breakpoint
  
  variants: {
    size: {
      sm: { 
        '--padding': 'var(--space_1)',
        '--md_padding': 'var(--space_2)'
      },
      lg: { 
        '--padding': 'var(--space_4)',
        '--md_padding': 'var(--space_6)'
      }
    }
  }
});

​
Performance

  • Static ClassName: Base styles generate a stable className (e.g., tk-abc123)
  • Caching: Results are cached based on variant selections
  • Optimized Merging: Only outputs styles that differ from base styles
  • Tree Shaking: Unused variants can be tree-shaken in production builds

​
Type Safety

The compose method provides full type safety: 
const button = css.compose({
  variants: {
    variant: {
      primary: { /* ... */ },
      secondary: { /* ... */ }
    }
  }
});

// ✅ Type-safe
button({ variant: 'primary' });

// ❌ TypeScript error
button({ variant: 'tertiary' });

​
Related

  • css - Apply and merge Tokenami styles
  • TokenamiStyle - Type helper for component props
  • Variants - Extract variant types from composed styles

Build docs developers (and LLMs) love

Get started for freeTalk to us