Minimal Layout
{component}/
├── code.tsx
├── demos/
│ └── default/
│ └── code.demo.tsx
├── globals.css
└── tailwind.config.js
Rules
- Keep logic in
code.tsx, content in demos
- Use props to customize behavior and content
- Multiple demos allowed (e.g.,
advanced/)
- Include realistic content and states in demos
Dependencies
- Community components and npm packages are allowed
- Declare and import what you use inside demos
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.
