Write your first component.
Rockrose starts where design starts — with tokens, roles and the reasons behind them — and ends with that component running in a real codebase.
Tokens before components
A colour is not a hex code, it is a job. Start with the layer that decides what things mean, and the components stop being arbitrary.
One real component
Not a tutorial to-do list. You build a component with variants, states and a focus ring, and you understand every line of it.
The code you would actually ship
React, TypeScript and Tailwind, in the shape a working team uses — because the gap between tutorial code and real code is where most people stop.
The first thing you will write is the thing you already think about.
Variants are just named decisions. You have been making them in Figma for years — this is what they look like when the browser has to agree.
import { cva } from 'class-variance-authority' // One class per role. Never a ramp step.const chip = cva('inline-flex items-center', { variants: { tone: { brand: 'bg-primary-subtle text-primary-ink', danger: 'bg-danger-subtle text-danger-ink', } }, defaultVariants: { tone: 'brand' },}) export function Chip({ tone, children }: ChipProps) { return <span className={chip({ tone })}>{children}</span>}