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.
1
import
{
ThemeProvider
}
from
"rastack/theme"
;
2
import
{
DataTable
,
AutoForm
}
from
"rastack/components"
;
3
import
tokens
from
"../tokens/theme.tokens"
;
5
<
ThemeProvider
tokens
={
tokens
}>
6
{/*
columns
,
search
,
sorting
and
paging
all
come
from
the
hook
*/}
7
<
DataTable
query
={
useListAirports
({
options
:
{
pageSize
:
20
}
})}
/>
9
{/*
one
control
per
field
,
chosen
from
each
field
's datatype */}
10
<AutoForm form={useUpdateAirportForm({ formValues: { code: "", name: "" } })} />
•
Primitives — the token-styled building blocks (the "shadcn layer"): Button, Input, Select, the Table set, Card and more. See Primitives. •
Data-connected — DataTable and AutoForm, 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.
•
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(--…)).
Build with AI
Every page is available as clean Markdown for LLMs and coding agents. Point one at the files below to build on top of React API Stack.
React API Stack · alpha · built to scale to millions