Props

Sprinkle Props

Most components accept sprinkle values directly as props.


<Box
  display="flex"
  padding={300}
  margin={{ top: 200, horizontal: 400 }}
  background={{ color: "primary.base" }}
  border={{ width: 200, color: "surface.outline" }}
/>
 
<Text
  color="primary.base"
  size={200}
  weight={700}
/>

Responsive Sprinkles

Apply different styles at different breakpoints using object syntax.


<Box
  display={{ base: "block", medium: "flex" }}
  padding={{ base: 100, small: 200, medium: 300, large: 400 }}
/>