Sprinkles props

Every component extends BaseProps, which includes the generated Sprinkles type. The library separates supported styling props from regular HTML attributes, then merges their generated class with any class you provide.

Common properties

Category	Props
Spacing	`p`, `px`, `py`, `m`, `mx`, `my`, `gap`
Layout	`display`, `flexDirection`, `alignItems`, `justifyContent`, `flexWrap`
Size	`width`, `height`, `minWidth`, `maxWidth`, `w`, `h`
Colour	`bg`, `backgroundColor`, `color`, `borderColor`
Visuals	`animation`; gradients are accepted by `backgroundColor` and `color`
Typography	`fontSize`, `fontWeight`, `lineHeight`, `textAlign`
Borders	`borderRadius`, `borderWidth`, `borderStyle`
Position	`position`, `top`, `right`, `bottom`, `left`, `zIndex`

Fixed tokens

Spacing uses none, xs, small, medium, large, xl, 2xl, and auto. Radius values range from none to full. Size aliases include full, half, fit, screenH, screenW, and a scale from 0 to 64.

Preview
Code

<Card p="large" borderRadius="xl" maxWidth="24" bg="card">
  <YStack gap="small">
    <Text fontWeight="semibold">Token-powered styles</Text>
    <Text color="muted" fontSize="sm">No handwritten CSS needed here.</Text>
  </YStack>
</Card>

Semantic size tokens

Use a numeric $n token for a size relationship that should stay proportional as the viewport changes. $n is not a fixed entry in a token table: the number represents one tenth of its pixel size at Silva UI’s 1000px reference viewport, then compiles to a linear vw value. For example, $4 resolves to 40px at a 1000px viewport, 20px at 500px, and 60px at 1500px. That makes $n useful when an element’s internal proportions matter more than a fixed pixel value: a tab at $8, a button at $4, and supporting text at $2 keep the same relationship.

Preview
Code

<XStack gap="$1.6" p="$2.4" alignItems="center">
  <Box w="$8" h="$8" borderRadius="$1.2" bg="primary" />
  <YStack gap="$0.4">
    <Text fontSize="$2" fontWeight="semibold">Projected scale</Text>
    <Text fontSize="$1.4" color="muted">Fluid at every viewport width.</Text>
  </YStack>
</XStack>

Projection tokens currently use the viewport only. They do not establish or inherit container sizing contexts; parent-to-child projection is intentionally reserved for a later sizing phase.

Interaction conditions

A selected set of properties can be conditionally applied using hover, active and focus values. Use the default branch for the resting state and add only the conditions the component needs.

Preview
Code

<Box
  bg={{ default: "card", hover: "teal3", focus: "teal4" }}
  color={{ default: "primary", hover: "teal12" }}
  p="medium"
  borderRadius="medium"
>
  Hover or focus me
</Box>

Utilities

For custom component wrappers, import sprinkles, splitSprinklesProps, toSprinklesClass, or cls from silva-ui.

Get started

Foundations

Components

Reference

Sprinkles

Sprinkles props

Common properties

Fixed tokens

Semantic size tokens

Interaction conditions

Utilities

​Sprinkles props

​Common properties

​Fixed tokens

​Semantic size tokens

​Interaction conditions

​Utilities

Sprinkles props

Common properties

Fixed tokens

Semantic size tokens

Interaction conditions

Utilities