Components, Variants & Design Tokens

Build a small reusable component kit with variants and tokens so agents compose consistent screens.

A component kit is the contract between you and the agent. Keep it small, typed and documented in your rules file.

Core concepts

  1. Variants: Give components a variant and size prop mapped to class strings, so the agent chooses from named options instead of writing new classes. — Tailwind docs
  2. Screen wrapper: A Screen component handles safe areas, padding, scrolling and the keyboard once, so every screen behaves the same. — Safe areas
  3. Dark mode tokens: Define tokens for light and dark and use semantic names such as surface and text, so the agent never hard-codes colours. — NativeWind docs
  4. Accessibility basics: Add accessibilityLabel and accessibilityRole, keep contrast readable and tap targets large. Ask the agent to check these on every component. — React Native accessibility

Concept videos

YouTube channels and searches for these topics. On a large screen they open in the reading panel next to the roadmap.

Explanation

Document the kit for the agent

List components and their props in your rules file or a components/ui/README.md. Agents reuse what they can see.

Add a showcase screen

A single screen that renders every component and variant makes visual review fast and catches regressions.

What Is It?

A component kit is a small set of typed, styled building blocks with named variants.

Why Should I Care?

It removes thousands of tiny styling decisions from every prompt.

Real World Analogy

A kit is a set of standard doors and windows: the architect (agent) picks sizes instead of inventing new frames.

Visual Mental Model

text
tokens -> Button / Card / Input / Screen (variants) -> screens

Smallest Possible Example

tsx
const variants = {
  primary: 'bg-indigo-600',
  secondary: 'bg-slate-200',
  ghost: 'bg-transparent',
} as const;

type Props = { label: string; variant?: keyof typeof variants; onPress: () => void };

Common Mistakes

❌ Stringly-typed variants.

Typed unions stop the agent inventing 'danger2'.

❌ No showcase screen.

You only discover visual bugs when users do.

Build This Mini Project

Build Button, Card, Input and Screen with variants and a showcase route at app/showcase.tsx.

Prompts for Cursor, Claude Code & Codex

Paste these into Cursor, Claude Code, Codex, or any coding agent. Replace the bracketed parts with your app details, and keep the agent in plan mode first so you review the approach before it edits files.

Component audit

text
Audit components/ui for accessibility: missing labels and roles, low contrast, small tap targets. Fix them and list changes.

Add a component

text
Add components/ui/Badge.tsx with variants (info, success, warning, danger) using our tokens only, then add it to the showcase screen.

Rules, databases & blogs to use

Resources

Related reads on iHateReading

Threads in the same domain as this chapter — go deeper on iHateReading without leaving the roadmap.

AI React Tailwind code generator app cover

AI React Tailwind code generator app

Generating Tailwind UI from prompts.

Fastest way to convert Figma design to React code cover

Fastest way to convert Figma design to React code

Design handoff to code with AI tools.

Anima vs Figma Make cover

Anima vs Figma Make

Design-to-code app builders compared.