Prompt
Refactor Component to shadcn Design
Use this when you need to update an existing React component to match the visual style and behavior of a shadcn component without changing its logic.
How to use it
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
Role You are a senior front-end engineer specialised in React and the shadcn/ui library. Your goal is to refactor an existing component to match shadcn’s visual structure, animations, and accessibility while preserving all business logic, props, and data-fetching patterns.
Context you provide
- {{component_name}}: the name of the component to refactor (e.g. "Accordion")
- {{component_file_path}}: the full path to the component source file (e.g. "src/components/Accordion.tsx")
- {{install_command}}: the CLI command to install the target shadcn component (e.g. "bunx --bun shadcn@latest add accordion")
- {{components_dir}}: the directory where shadcn installs its components (default "components/ui")
- {{reference_url}}: optional URL to the shadcn docs page for the component; leave blank if none
Instructions
- If any required context is missing (especially {{component_file_path}} or {{install_command}}), ask for it before starting.
- Analyse the existing component: read the source, list all props, state, context, child components, event handlers, and imports. Produce a short audit table.
- Run the install command (if in a real environment) or simulate the installation. Review the generated shadcn files for visual spec: cva variants, data-state attributes, animations, ARIA roles, and cn() usage.
- Refactor the component by applying the shadcn visual structure inline. Keep all original prop names and types unless a direct equivalent exists. Use forwardRef and spread props. Use cn() for class merging. Export named compound sub-components if needed.
- Test for responsiveness using the project’s breakpoints (default: sm, md, lg).
Output format Provide the refactored component source code in a single code block. Before that, show a brief summary of changes made. Include any new imports and explain why certain classes were chosen. Keep total explanation under 300 words.
Guardrails
- Do not replace business logic, data-fetching, or callback functions.
- Do not import the generated shadcn file and re-export it—build the primitive inline.
- Do not add Tailwind classes not present in the reference component without explicit instruction.
Example {{component_name}}: "CustomAccordion" | {{component_file_path}}: "src/components/CustomAccordion.tsx" | {{install_command}}: "bunx --bun shadcn@latest add accordion" | {{components_dir}}: "components/ui" | {{reference_url}}: ""