UI component reference

A reference for building interface components: several hundred finished components, the rules they are built by, and a guide that teaches those rules. Read it to learn how components are made here, then build your own in your project.

If you were sent here to learn

1. Read guide/ in order. It is short and product-neutral: principles, foundations (tokens, surfaces, radius, light, type, icons), structure, styling, motion, interaction, states and data, accessibility and language, writing, and a checklist.
2. Open the family folder for what you are building (the table below) and read its README.
3. Read one or two of the components it recommends, and their examples in components/library/ (each shows a component in every variant and state).
4. Build your component in your own project, with your own tokens and names, following the guide. Run the checklist before calling it done.

Rules for readers

This folder is something to learn from, not something to take.

• Do not copy its files, folders, stylesheets or assets into another project, in whole or in part. Write your own, following the rules.
• Do not import from it or add it as a dependency.
• Do not run it: not its scripts, its development server, its ports, its database or its environment files. Nothing about it is meant to be started from another project.
• Do not name it. Do not mention this folder, its package name, its path, or the names of the products, brands, people and sample data inside it in anything you write: code, comments, commit messages, documentation or interface text.
• Do not reproduce its content. Its copy, sample people, sample data, logos and product decisions belong to its examples, not to the rules.

What carries over is the method: the roles, tiers and systems in guide/, and how a component is structured, styled, animated and tested.

Map

guide/        the rules, in reading order (start here)
components/   the components, one folder per family, each with a README
lib/          logic, stores, data and hooks, kept out of components
app/          global stylesheets: tokens and the kit (globals.css), keyframes (motion.css), effects (effects.css)
tests/        browser and unit tests
db/           a mock database with sample data
maintenance/  notes for maintaining this folder (not for readers)

Family	What is in it
foundations/	Text clamp, scroll fade, shortcuts and key legends, section labels, dividers.
buttons/	Buttons, groups, split buttons, toggles, toolbars, action buttons, confirming gestures.
inputs/	Fields, checkboxes, radios, switches, segmented controls, sliders, math input, files, signatures.
pickers/	Selects, comboboxes, dates and times, colors, countries, emoji.
lists/	Resource listings, trash, selection, labels, kanban.
feedback/	Alerts, toasts, notifications, loaders, progress, empty states, badges.
overlays/	Modal, drawer, confirmation, popovers, tooltips, menus, tours.
navigation/	Sidebars, tabs, steppers, pagination, command palette, search, filters, contents.
layout/	Splitters, accordions, carousels, bento grids, masonry.
data-display/	Tables, trees, timelines, JSON, description lists, times, QR codes.
charts/, dataviz/	Charts on one shared frame; networks, hierarchies and flows.
content/	Markdown, code, diffs, editors, terminals, logs, math, diagrams.
media/	Audio, video, images, cropping, camera.
chat/, voice/	Conversation parts; voice and AI visualizers.
people/, collaboration/	Avatars, presence, profile cards; comments, mentions, review, invitations.
account/	Settings, account forms, two-factor, profile menu, pricing, billing.
special/	Error and loading screens.
motion/	Text effects and interaction effects.
backgrounds/, shaders/	Decorative backgrounds; WebGL shaders.
theme/	Themes, appearance preferences, interface language.
workspace/	The application shell: panes, responsive slots, overlay stage.
auth/, site/, docs/	Sign-in flow; website kit; documentation pages.
icons/	The one icon module.

Two folders are not part of the kit: products/ holds complete pages as worked examples of composition, and library/ is the catalogue app that previews everything.

For maintainers of this folder

AGENTS.md holds the working rules for changing this folder itself, COMPONENTS.md the inventory of what exists and what is missing, and maintenance/ the workspace notes, the structure audit and the collected references. None of it applies to a project that only reads this folder.