> ## 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.

# Quality Guidelines

> Standards for high-quality components

## 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

<Info>
  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**.
</Info>

<Steps>
  <Step title="Publish">
    Publish with **Published** access when the component is ready to share.
    Private components cannot be submitted for featuring.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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**.
  </Step>
</Steps>

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.