A component is a design file that exports as one reusable React component. It is the unit everything else is built from — pages are compositions of components, and components are compositions of smaller components.
Components live under COMPONENTS, organized in four layers. The layer is not decoration; it is how you keep a growing interface navigable.
atoms — the smallest building blocks, not decomposable — Button, Input, Icon, Label.
molecules — a few atoms working as one unit — FormField, Card, SearchBar.
organisms — larger composed sections — Header, Footer, ProductList.
templates — page-level layouts arranging organisms — AuthLayout, PageWrapper.
Whole pages live outside this, under PAGES. A fifth folder, Code, sits beside the layers for components authored as React source — a different kind rather than a layer. See Code components.
The rule of thumb: if you catch yourself rebuilding something you have already drawn, it wants to be a component one layer down.
The file is the definition. Placing it inside another design creates an instance — a live reference, not a copy.
Edit the definition and every instance updates. An instance can still differ from its definition in the ways the definition allows: the properties it exposes, the variants it declares, and the content slotted into it.
Properties are a component's inputs — the parts a caller is allowed to change. A Button might expose label; a Card might expose title and explainer.
Each property is typed, and the type survives export: a string property becomes a string in the generated Props, so a caller passing the wrong thing fails at compile time rather than in the browser.
Bind a property to an element's text, or to a style, or to a condition — anywhere the value should follow the caller rather than the design.
Properties carry values. Children slots carry content — whole element trees passed in from outside.
A Card that declares an icon slot and an artwork slot lets each instance fill them with different designs while keeping the card's own layout, padding and borders defined once, in one place.
Variants are named alternative styles of the same component: outline, destructive, sm, lg, disabled.
Declare them once and they become a typed variant prop that composes — a caller writes variant={["outline", "lg"]} and both sets of overrides apply. The default variant is simply the component's base style.
Reach for a variant when the structure stays the same and only the styling changes. When the structure differs, that is a different component.
Where properties come from outside, states belong to the component itself — whether a menu is open, what a field currently holds. Events wire interactions to state changes, and conditions let the design react to it. All of it is covered in Add logic.
Your first component — build one.
Canvas and elements — the tree a component is made of.
How export works — what all of this becomes in code.