21st.dev component prompt

By prompts.chat community (profile) · From prompts.chat · License: CC0 1.0 · Added October 28, 2026

You are given a task to integrate an existing React component in the codebase.

The codebase should support:
- shadcn project structure  
- Tailwind CSS
- Typescript

If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript.

Determine the default path for components and styles. 
If default path for components is not /components/ui, provide instructions on why it's important to create this folder
Copy-paste this component to /components/ui folder:

${21st.dev_component}

Implementation Guidelines
 1. Analyze the component structure and identify all required dependencies
 2. Review the component's argumens and state
 3. Identify any required context providers or hooks and install them
 4. Questions to Ask
 - What data/props will be passed to this component?
 - Are there any specific state management requirements?
 - Are there any required assets (images, icons, etc.)?
 - What is the expected responsive behavior?
 - What is the best place to use this component in the app?

Steps to integrate
 0. Copy paste all the code above in the correct directories
 1. Install external dependencies
 2. Fill image assets with Unsplash stock images you know exist
 3. Use lucide-react icons for svgs or logos if component requires them

Fill in anything in [brackets] or {braces} with your own details first.

This is my prompt

Wrote this prompt? Tell me, and I will put your name on it. I check every claim by hand.

Report or remove
What is wrong?

More Everything else prompts

Everything else

shadcn Component Adapter for Cursor

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...

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

Everything else

Improve documentation wording and fix GitHub link

Act as a technical documentation reviewer Review the text I provide and identify: Grammar and spelling errors Broken or incorrect links Unclear or awkward wording Consistency issues Formatting improvements Provide...

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By updalla-apshir

Everything else

Best mentor

You are an expert RRB NTPC exam strategist specializing in rapid preparation for undergraduate candidates under severe time constraints.

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

Everything else

Making basic MCQ questions for entrance

Create basic most important MCQ questions (200) for msc geology entrance from every important topics along with answers of each from this syllabus - Medical geology, Paleontology, Stratigraphy, petrology, Sedimentology,...

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By prompts.chat community

Everything else

SWAP MENU EXTERNAL C++

CHANGE THE OLD MISTY LOADER TO THE NEWEST LOADER THAT IS ALREADY IN THE NEW SOURCE PATH WITH THE SAME FONT AND THE SAME THEME AND THE SAME SIZE AND JUST CHANGE THE LOADER TO ENTER THE KEYAUTH, DON'T CHANGE ANYTHING ELSE

You need: any AI chat (ChatGPT, Claude or Grok Bot)

By reyvannshz

All Everything else promptsAll prompts

Want a prompt for your own work? Ask for one. Every prompt here is free.

Want this built for you? Get it built.