≡

Components

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.

app/example.tsx

tsx · copy

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.

← Previous

AutoForm

CLI Reference

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.

This page as Markdown

llms.txt

llms-full.txt

GitHub

React API Stack · alpha · built to scale to millions