> ## Documentation Index
> Fetch the complete documentation index at: https://help.21st.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Structure

> Organize files for a clean publish

## Studio Source Layout

```
src/
├── components/
│   └── ui/
│       └── component.tsx
├── demos/
│   ├── default.tsx
│   └── advanced.tsx
├── hooks/
├── lib/
└── index.css
package.json
```

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.

<Warning>
  Do not rename or delete `default.tsx`. Existing published demo slugs cannot be
  changed from the publishing flow.
</Warning>

## 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](/publishing/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

<Tip>
  **Prefer small, focused components** — They're easier to use and maintain.
</Tip>

<Tip>
  **Ensure responsive behavior** — Test on different screen sizes.
</Tip>

<Tip>
  **Provide sensible defaults** — Components should work out of the box.
</Tip>