> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Sprinkles

> Use token-based style props and fluid semantic size tokens on every silva-ui primitive.

# 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`.

> [tab] Preview
>
> [Token-powered card preview](https://black-silva.github.io/silva-ui/previews/?example=sprinkles-1)

> [tab] Code
>
> ```tsx theme={null}
> <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.

> [tab] Preview
>
> [Semantic size token preview](https://black-silva.github.io/silva-ui/previews/?example=sprinkles-2)

> [tab] Code
>
> ```tsx theme={null}
> <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>
> ```

> [!NOTE]
>
> 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.

> [tab] Preview
>
> [Interactive sprinkles preview](https://black-silva.github.io/silva-ui/previews/?example=sprinkles-3)

> [tab] Code
>
> ```tsx theme={null}
> <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`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.