Skip to main content

​
Visual Design

  • Polished look; follows modern UI/UX
  • Consistent spacing, sizing, and states (hover/focus/active)
  • Light & dark themes supported

​
Code Structure

  • Separate reusable code from demos
  • Component exposes props; demos provide content
  • Minimal external deps; typed with TypeScript

​
Theming

  • Prefer semantic Tailwind utilities such as bg-background, bg-primary, text-foreground, and border-border
  • In custom CSS, use Tailwind v4 theme variables such as var(--color-primary), not wrappers such as oklch(var(--primary)) or hsl(var(--primary)) that assume a raw token format
  • For opacity, use utilities such as bg-primary/20 or color-mix() with a semantic --color-* variable
  • Respect theme tokens; no hardcoded colors
  • Works in both light and dark modes

​
Accessibility

  • Proper ARIA attributes
  • Keyboard navigation support
  • Sufficient color contrast

​
Documentation

  • Clear prop descriptions
  • Usage examples in demos
  • Note required dependencies

​
Demos & Assets

  • Include exactly one src/demos/default.tsx demo.
  • Show realistic content, useful states, and responsive behavior.
  • Add 1–5 accurate tags to every demo.
  • Add a required PNG or JPEG cover image; use 4 MB or smaller.
  • Add an optional MP4 or MOV demo video, up to 50 MB.

​
Review Flow

Publishing and catalog review are separate. A Published component is available by direct link and on your profile, but it is not listed in the public catalog until it is Featured.
1

Publish

Publish with Published access when the component is ready to share. Private components cannot be submitted for featuring.
2

Submit for featuring

Choose Submit for featuring from the component’s actions in Studio. The status changes to In review. You can withdraw it while the review is active.
3

Respond to the result

Featured components appear in the catalog. If the status is Needs changes, read the feedback, update the component, and choose Resubmit for featuring.
You can remove a Featured component from the catalog without making its direct link private. Featured components should have strong visuals, clean code, theming, accessibility, and useful demos.