JSX to Twig

I need to...	Guide	Summary
Understand when to translate JSX 1:1 vs restructure	Overview	Use this when you have an existing React/JSX design system and need to build equivalent Drupal SDC components. This applies whether the React source uses Tailwind, DaisyUI, Radix UI, shadcn/ui, MUI, or any other component library.
Convert conditional rendering (&&, ternary, ??)	Conditional Rendering	Use this when converting JSX conditional expressions to Twig. React uses JavaScript expressions inside JSX; Twig uses {% if %} tags and filters.
Convert .map(), .filter(), .slice() loops	Loops & Iteration	Use this when converting JavaScript array methods (.map(), .filter(), .reduce(), .slice()) to Twig {% for %} loops and filters.
Map React props to Twig variables and component.yml	Props to Twig Variables	Use this when mapping React component props to SDC component.yml properties and Twig template variables. This is the core translation step for every component.
Convert children/slots to Twig blocks	Children & Slots	Use this when converting React's children, named props that accept JSX, render props, or compound component patterns into Twig blocks and SDC slots.
Handle onClick, onChange, event handlers	Event Handlers	Use this when converting React event handlers (onClick, onChange, onSubmit, etc.) to Drupal's server-rendered architecture. React events have NO direct Twig equivalent.
Translate component composition patterns	Component Composition	Use this when converting React patterns for combining components -- nesting, polymorphic elements, higher-order components, context providers, and compound component APIs.
Convert className, CSS Modules, Tailwind, CVA	Styling Translation	Use this when converting React styling patterns -- className, CSS Modules, Tailwind utilities, cn()/clsx(), cva() (class-variance-authority), inline styles -- to Twig and SDC equivalents.
Turn a TypeScript interface into component.yml	TypeScript to Component.yml	Use this when you have a TypeScript interface or Props type definition and need to produce a complete SDC component.yml schema. This is a step-by-step workflow for the most common translation task.