# Components

> rastack/components closes the loop with the UI — React components painted entirely from your design tokens and driven by the framework hooks.

The stack already owns the **data** (resources → the Rust/Iceberg API → typed hooks) and the **look** (design tokens → `rastack/theme`). `rastack/components` closes the loop with the **UI**: a set of React components that are

1. **painted entirely from the design tokens** — like shadcn/ui, but with nothing hard-coded. Every colour, space, radius and shadow is a `var(--…)` reference, so the components inherit whatever theme is active with no restyling; and
2. **driven by the framework hooks** — the differentiator. You hand a component a hook and it renders itself from the data **and its datatypes**: a table figures out its columns and a form figures out its inputs.

```tsx title="app/airports.tsx"
import { ThemeProvider } from "rastack/theme";
import { DataTable, AutoForm } from "rastack/components";
import tokens from "../tokens/theme.tokens";

<ThemeProvider tokens={tokens}>
  {/* columns, search, sorting and paging all come from the hook */}
  <DataTable query={useListAirports({ options: { pageSize: 20 } })} />

  {/* one control per field, chosen from each field's datatype */}
  <AutoForm form={useUpdateAirportForm({ formValues: { code: "", name: "" } })} />
</ThemeProvider>
```

## Two layers

- **Primitives** — the token-styled building blocks (the "shadcn layer"): `Button`, `Input`, `Select`, the `Table` set, `Card` and more. See [Primitives](https://reactapistack.com/docs/primitives.md).
- **Data-connected** — [DataTable](https://reactapistack.com/docs/data-table.md) and [AutoForm](https://reactapistack.com/docs/auto-form.md), which take a hook and render from the data and its datatypes.

Every decision — column resolution, the datatype→control mapping, the hook→model normalization — is a **pure function** living in plain `.ts` modules and unit-tested directly; the `.tsx` files just render the model. This mirrors how `rastack/theme` ships: the engine is tested, the provider is thin source.

## Styled entirely from tokens

`style.ts` is the whole styling contract. `cssVar("color.surface")` returns `var(--color-surface)` using the **same** `cssVarName` the token compiler and `<ThemeProvider>` use, so the variable names can never drift. Each semantic token carries a literal fallback (`var(--color-accent, #4f6bff)`) so components stay legible with a partial token set.

> **Tip:** Drop the components under a `<ThemeProvider>` (or link a `rastack tokens`-generated `tokens.css`) and they theme automatically; flipping light/dark recascades through CSS with **no re-render**.

## Platform

- **Web (default)** — components render HTML and style via CSS variables; light/dark flips are free.
- **React Native** — consume the headless hooks (`useDataTable`, `useAutoForm`) and build your own `View`/`Text` tree, colouring it with `useTokenValue(path)` from `rastack/theme` (RN can't read `var(--…)`).

---

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