Complete AI Training
Sign inBecome a member

Your job's AI kit

Get your AI kit

Tell us who you are and what you do. We show you your kit right away and email you the link: skills, prompts, AI agents, MCP servers and courses for your job.

500+ jobs ready, and we make a kit for any other job. No payment needed to look.

Share

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.

CodingAdvancedIT & Software DevelopmentDesign & UX

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

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

  1. If any required context is missing (especially {{component_file_path}} or {{install_command}}), ask for it before starting.
  2. Analyse the existing component: read the source, list all props, state, context, child components, event handlers, and imports. Produce a short audit table.
  3. 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.
  4. 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.
  5. 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}}: ""