lab
Lab
This skill builds a page for inspecting components. Every variant and every state of the real components sits open on one screen, so the user can tune them without clicking through the app.
Every state open, nothing faked
The lab renders the real components, not copies. States that need a click, such as an open menu or a hover, are forced open. The lab is a development page and never ships.
Exploring new options for one idea belongs to prototype. The values on the page come from defaults, motion, color and the project's tokens.
1. Find the states
Read each component and list its variants, sizes and states: hover, pressed, focus, open, selected, disabled, loading, empty and error. A lab that shows the resting state only is lab-every-state.
2. Build one route
Add one development-only route, such as /lab, that imports the real components. Copy lab.js into the app and load it once on that route. A lab built from copied markup is lab-real-components.