Styled System

sva()

The css/sva entrypoint — slot recipes for multi-part components with shared variants.

File: styled-system/css/sva
Import: import { sva } from '../styled-system/css'

sva() (slot recipe) is cva for components with multiple parts (root, label, control, …). One variant map drives every slot. Colocate it next to the component when the recipe is not shared through config.

import { sva } from '../styled-system/css'
 
const card = sva({
  slots: ['root', 'title', 'body'],
  base: {
    root: { rounded: 'lg', borderWidth: '1px', p: '4' },
    title: { fontWeight: 'semibold', mb: '2' },
    body: { color: 'fg.muted' }
  },
  variants: {
    size: {
      sm: {
        root: { p: '3' },
        title: { fontSize: 'sm' }
      },
      md: {
        root: { p: '4' },
        title: { fontSize: 'md' }
      }
    }
  },
  defaultVariants: { size: 'md' }
})
 
const classes = card({ size: 'sm' })
// classes.root, classes.title, classes.body → class name strings

<div className={classes.root}>
  <h2 className={classes.title}>Title</h2>
  <p className={classes.body}>Body</p>
</div>

Shape

Same axes as cva, plus slots:

Key	Role
`slots`	List of part names
`base`	Per-slot base styles
`variants`	Per-slot styles under each variant value
`compoundVariants`	Combinations, also per-slot
`defaultVariants`	Defaults when a variant is omitted

When to use config slot recipes instead

If the slot recipe is a design-system primitive shared across packages, register defineSlotRecipe in config and import from styled-system/recipes. Same idea as atomic vs config for cva.

Full guide: Config Slot Recipe. Local form: Slot Recipe. JSX distribution: Slot recipe context.

sva()

Shape

When to use config slot recipes instead

See also