Use 21st.dev components in Lovable

Copy pre-built hero sections, navigation bars, testimonials, and other UI components from 21st.dev directly into your projects.

21st.dev is a community registry of pre-built React UI components that you can add to your Lovable 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.

21st.dev is a third-party service with its own free tier and paid membership. The free tier limits how many component prompts you can copy per day. See 21st.dev for their current terms.

Step-by-step guide

1. Go to 21st.dev

   Navigate to 21st.dev to browse the component library.

2. 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
3. Copy the prompt for Lovable

   Open your chosen component’s detail page and copy its prompt, choosing Lovable as the target tool.

4. Paste into Lovable

   Open your Lovable project and paste the copied prompt into the chat.

5. 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.
   
6. Let Lovable integrate the component

   Send your message. Lovable adds the component code to your project and places it where you specified.

   The component inherits your project’s existing styles, and you can customize it further with the preview toolbar or a follow-up prompt.