Studio Source Layout
The starter file is usually src/components/ui/component.tsx. A component file
named after the final slug also works. The published snapshot includes the
primary component, demos, supported source files under src/components,
src/hooks, and src/lib, plus the recognized global CSS files
src/index.css, src/globals.css, src/app.css, and global.css.
Component and Demo Rules
- Keep reusable behavior in the component and example content in demos.
- Put demo files directly in
src/demos.
- Keep exactly one
src/demos/default.tsx file.
- The demo filename becomes its permanent slug. For example,
advanced.tsx becomes advanced.
- The primary component and every demo must contain a real
export default.
- Multiple demos are allowed.
- Use Files → New demo to create another demo with a unique filename.
Do not rename or delete default.tsx. Existing published demo slugs cannot be
changed from the publishing flow.
Dependencies
- Use Add dependency in the Files step for a compatible 21st registry
component.
- Declare npm packages in
package.json and import them normally.
- Keep shared helpers in
src/lib or src/hooks so Studio includes them in the
published snapshot.
Demo Controls
A demo that declares one module-level const settings = { … } object and takes
it as props gets a live controls panel in its preview, and its “Copy code”
carries whatever the visitor tuned. See
Demo Controls for the contract and the limits.
Preview assets are selected in the Demos step rather than stored beside the
source files. Every demo needs 1–5 tags and a cover image. A demo video is
optional.
Tips
Prefer small, focused components — They’re easier to use and maintain.
Ensure responsive behavior — Test on different screen sizes.
Provide sensible defaults — Components should work out of the box.
