Design System Component Guidelines

Stack: React + TypeScript + Tailwind CSS + CVA. Radix UI optional — use when available. Check existing components first to confirm path aliases and cn() location.

This file holds the structure and rules. Copy-paste code for each file type is in the reference:

• references/file-templates.md — templates for index/types/styles/ component/constants/utils/context/store/stories.

Usage Modes

• Create from scratch — describe the component; follow the structure and rules below.
• Refactor existing (pass a path, e.g. /design-system-component src/components/ui/data-table/index.tsx):
  1. Read the entry file and its same-directory imports.
  2. Compare against the rules below; report what's missing/misaligned (styles not split per sub-component, missing data-slot, no barrel export, props using HTMLAttributes instead of ComponentProps).
  3. Propose the target structure, then split/create files to match.