--- title: "Prompt to Turn ChatGPT into a shadcn Component Adapter for Cursor" platform: "Promptally" canonical_url: "https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-shadcn-component-adapter-for-cursor" modality: "PROMPT" category: "Coding & Software Engineering" compatible_models: [Universal / Model Agnostic] access_tier: "Free Public Artifact (No Auth Required)" license: "MIT" --- # Prompt to Turn ChatGPT into a shadcn Component Adapter for Cursor **Summary:** Prompt to Turn ChatGPT into a shadcn Component Adapter for Cursor is a verified PROMPT blueprint on Promptally in Coding & Software Engineering optimized for leading AI models. High-performance Prompt to Turn ChatGPT into a shadcn Component Adapter for Cursor prompt blueprint. Available to explore, customize with pre-filled variables, and copy with zero authentication required. ## Technical Specifications | Property | Value | | :--- | :--- | | Platform Registry | Promptally (https://app.promptally.dev) | | Modality | PROMPT | | Category | Coding & Software Engineering | | Compatible Engines | Universal / Model Agnostic | | Dynamic Variables | None (Static Blueprint) | | Approx. Token Length | 1,404 | | Access Tier | Free Public Artifact (No Auth Required) | | License | MIT | ### Pre-Filled Template & Production Source ```md # shadcn Component Visual Adapter ## 🎯 Objective Refactor the existing `{{{COMPONENT_NAME}}}` component located at `{{{COMPONENT_FILE_PATH}}}` to match the **visual design, structure, and behavior** of the reference component available at: > {{{INSTALL_COMMAND}}} {{{REFERENCE_URL}}} ← optional; leave blank if no docs page exists Do NOT replace business logic, existing props interface, or data-fetching patterns. Preserve them. Adapt only the **visual layer**: markup structure, class names, animations, and accessibility attributes. --- ## 📋 Step 1 — Analyze the Existing Component Before writing any code: 1. Read the full source of `{{{COMPONENT_FILE_PATH}}}`. 2. Map out: - All **props and their types** (TypeScript interfaces or PropTypes). - Internal **state variables** (`useState`, `useReducer`, Zustand slices, etc.). - **Context providers or custom hooks** consumed. - **Child components** rendered and where they live. - **Event handlers** and callbacks exposed to the parent. 3. List every **import** — flag any that will conflict with or can be replaced by the shadcn primitive. Output a brief audit table before touching any code: | Item | Current value | Action | |------|--------------|--------| | Props | ... | keep / rename / remove | | State | ... | keep / migrate | | Context/Hooks | ... | keep / replace | | Sub-components | ... | keep / replace | | Dependencies | ... | keep / install / remove | --- ## 📦 Step 2 — Dependency Resolution Run the install command directly: {{{INSTALL_COMMAND}}} After the command completes, the generated files will appear in {{{COMPONENTS_DIR}}}/. Proceed to Step 3 using those files. --- ## 🔬 Step 3 — Review Reference Component IF {{{REFERENCE_URL}}} is provided → fetch it and extract the visual spec as before. IF {{{REFERENCE_URL}}} is blank → read the files downloaded by the CLI command in Step 2 and extract the same information from the source code directly: - cva variant schema - data-state / data-disabled attributes - animation/transition classes - ARIA roles and props - cn() usage patterns --- ## 🛠 Step 4 — Refactor the Component Apply the visual structure from Step 3 to the existing component from Step 1. ### Rules: - ✅ Keep all **existing prop names and types** unless a direct shadcn equivalent exists. - ✅ Keep all **data-fetching, business logic, and callbacks**. - ✅ Wrap Radix primitives using **`forwardRef`** and spread `...props` to preserve flexibility. - ✅ Use `cn()` for all className merging — never string concatenation. - ✅ Export named compound sub-components if the reference component uses them (e.g., `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`). - ❌ Do NOT import the generated shadcn file and re-export it — build the primitive inline in the refactored file to keep the logic co-located. - ❌ Do NOT add Tailwind classes not present in the reference component without explicit instruction. ### Responsive behavior (`{{{RESPONSIVE_BREAKPOINTS}}}`): Apply mobile-first responsive classes. Confirm current breakpoints in `tailwind.config.ts` match the project's convention. If the reference uses container queries, install `@tailwindcss/container-queries`. --- ## 🧩 Step 5 — Context Providers and Hooks If the reference component requires a context provider (e.g., `ToastProvider`, `TooltipProvider`): 1. Check if it is already mounted in `{{{PROVIDER_FILE}}}` or `{{{PROVIDER_FILE}}}`. 2. If not, add it to the appropriate layout file. Provide the exact diff. 3. If a custom hook is required (e.g., `useToast`, `useDialog`), place it in `{{{HOOKS_DIR}}}` and import it from there. --- ## ❓ Step 6 — Clarifying Questions (ask before generating if unknown) If any of the following are not determinable from the existing code, **ask before writing**: 1. **Data/props**: What shape of data will be passed? (Provide a sample object if helpful.) 2. **State management**: Is component state local, or managed externally (Zustand, Redux, React Query)? 3. **Assets**: Are there required images, logos, or custom icons not covered by lucide-react? 4. **Responsive**: What is the expected layout at `{{{RESPONSIVE_BREAKPOINTS}}}` breakpoints? 5. **Placement**: Where in the app routing/layout tree will this component live? (Important for context provider placement.) --- ## 📐 Step 7 — Output Format Provide the result as: 1. **`{{{COMPONENT_FILE_PATH}}}`** — full refactored component file. 2. **`{{{COMPONENTS_DIR}}}/{{{SHADCN_COMPONENT_SLUG}}}.tsx`** — shadcn primitive (only if needed and not generated by CLI). 3. **`lib/utils.ts`** — only if it needs to be created or updated. 4. **Layout/provider diff** — only if a provider needs to be added. 5. A short **migration notes** section listing: - Removed dependencies - Renamed props (if any) - Any manual steps required (e.g., adding CSS variables to `globals.css`) --- ## 🎨 Tailwind CSS Variables (shadcn design tokens) Confirm that `globals.css` contains the required CSS custom properties. If the reference component uses tokens like `--radius`, `--background`, `--foreground`, `--primary`, `--ring`, append the missing variables. Use the shadcn default token set for `{{{COLOR_THEME}}}` unless the project already defines a custom theme. --- ## 🚫 Constraints - Framework: **{{{FRAMEWORK}}}** - Styling: **Tailwind CSS {{{TAILWIND_VERSION}}}** only — no inline styles, no CSS modules, no styled-components. - TypeScript: **strict mode**. All new code must be fully typed. - Do not upgrade or downgrade any existing dependency version unless there is a direct peer conflict. ``` ## Verified Execution Output / Benchmark ```text Verified execution output available on the canonical page. ``` ## Related Blueprints on Promptally - [Prompt to Turn ChatGPT into a Ethereum Developer](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-ethereum-developer) - [Prompt to Turn ChatGPT into a Linux Terminal](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-linux-terminal) - [Prompt to Turn ChatGPT into a Job Interviewer](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-job-interviewer-1) - [Prompt to Turn ChatGPT into a JavaScript Console](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-javascript-console) - [Prompt to Turn ChatGPT into a Excel Sheet](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-excel-sheet) - [Prompt to Turn ChatGPT into a UX/UI Developer](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-ux-ui-developer) - [Prompt to Turn ChatGPT into a Cyber Security Specialist](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-cyber-security-specialist) - [Prompt to Turn ChatGPT into a Web Design Consultant](https://app.promptally.dev/p/prompt-prompt-to-turn-chatgpt-into-a-web-design-consultant)