Components

Lessons in this group, roughly in build order:

• creating-core-components — The phase where the abstract design language becomes a small set of coded, accessible, token-consuming UI…
• component — A single reusable UI unit with a defined API, a fixed set of states and variants, and values sourced…
• component-catalog — The browsable index of every component the system offers — name, status, anatomy, variants, props,…
• component-library — The coded, versioned, installable package of reusable components — the implementation layer a design…
• avatar — A small graphic that represents a user or entity — a photo, initials, or icon fallback — usually circular,…
• badge — A small, non-interactive label that annotates another element — a count, a status, or a category —…
• banner — A prominent, full-width message that communicates a system-level state — info, success, warning, error —…
• button — The primary action trigger — a labeled, interactive control with a fixed set of variants, sizes, and…
• card — A surface that groups related content and actions into a single, self-contained, rectangular unit — media,…
• carousel — A horizontally scrolling, paginated set of items — slides or cards — that shows a subset at a time with…
• dropdown — A control that reveals a floating list of options or actions on demand — a menu, a select, or a combobox —…
• forms — The pattern for collecting structured input — fields, labels, help text, validation, and submission — that…
• input-text — A single-line text field — the most common form control — with label, states, validation hooks, and…
• input-checkbox — A control for independent on/off choices — zero, one, or many selected from a set — plus a third…
• input-radio — A control for picking exactly one option from a mutually exclusive set — selecting one deselects the rest…
• input-switch — A toggle for a single binary setting that takes effect immediately — on/off — styled as a sliding thumb in…
• icon — A small, scalable pictogram delivered as a consistent, token-sized set — the system’s visual shorthand for…
• list — A vertical sequence of related items rendered with consistent structure — each row a composable line of…
• loading-indicator — A visual signal that the system is busy — spinner, progress bar, or skeleton — telling the user to wait…
• modal — A layer that opens above the page, blocks interaction with everything behind it, and demands focus until…