# Primitives

> The token-styled building blocks — the shadcn layer that everything else composes from.

The primitives are the token-styled building blocks the data-connected components compose from. Import and use them directly; they paint themselves from the active theme.

```tsx title="app/example.tsx"
import { Button, Input, Field, Card, Stack } from "rastack/components";

<Card>
  <Stack gap="md">
    <Field label="Airport code">
      <Input placeholder="HND" />
    </Field>
    <Button>Save</Button>
  </Stack>
</Card>
```

## What's included

- **Controls** — `Button`, `Input`, `Textarea`, `Select`, `Checkbox`.
- **Field** — `Label`, `Field`, `FieldError`, `FieldHint`.
- **Table** — `Table`, `THead`, `TBody`, `Tr`, `Th`, `Td`.
- **Misc** — `Spinner`, `Badge`, `Card`, `Stack`.

## The styling contract

Every primitive is painted only through `var(--…)` token references — nothing hard-coded. `style.ts` exposes the semantic set the kit paints from — `color.{surface,border,text,text-muted,accent,on-accent,success,danger,warning}`, `space.*`, `radius.*`, `font.*`, `shadow.*` — each with a literal fallback so components stay legible with a partial token set, or before any theme is wired.

> **Tip:** Because `cssVar(path)` uses the same `cssVarName` as the token compiler and `<ThemeProvider>`, the variable names can never drift from your design system. Theme it once; every primitive follows.

---

_Source: [https://reactapistack.com/docs/primitives](https://reactapistack.com/docs/primitives) · Full docs as one file: [llms-full.txt](https://reactapistack.com/llms-full.txt)_