21st.dev is a community registry of pre-built React UI components that you can add to your RShift Sites project with a copy-paste workflow. Use it when you want a polished hero section, navigation bar, or animation without describing every design detail yourself.
Step-by-step guide
<video autoPlay loop muted playsInline className=“w-full”> <source src=“https://mintcdn.com/lovable-f9060f1e/-8-xuzzl5-8vrfz4/assets/tips-tricks/videos/21st-dev.mp4?fit=max&auto=format&n=-8-xuzzl5-8vrfz4&q=85&s=32ae04476488d612717354a8a42eb65f” type=“video/mp4” data-path=“assets/tips-tricks/videos/21st-dev.mp4” /> </video>
Go to 21st.dev
Navigate to 21st.dev to browse the component library.
Find a component you like
Browse through the available components to find one that fits your needs:
- Hero sections
- Navigation bars
- Testimonial layouts
- CTAs and feature grids
- Form components
Copy the prompt for RShift Sites
Open your chosen component’s detail page and copy its prompt, choosing RShift Sites as the target tool.
Paste into RShift Sites
Open your RShift Sites project and paste the copied prompt into the project chat.
Say where the component goes
Add a line to the pasted prompt specifying where the component belongs in your project. For example:
Add this as the hero section on the homepage.Let RShift Sites integrate the component
Send your message. RShift Sites adds the component code to your project and places it where you specified.