Skip to main content

​
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 Metadata

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.