Use 21st.dev components in Lovable

1. 1

   Go to the 21st.dev website.

   This is where you'll find a collection of ready-to-use design parts.

2. 2

   Look through the available design parts to find one that fits what you need.

   You can choose from things like hero sections, navigation bars, or testimonial layouts to quickly build your app's look.

3. 3

   On the detail page for your chosen design part, copy the prompt specifically made for Lovable.

   This prompt contains all the instructions Lovable needs to understand and add the design part.

4. 4

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

   This is how you tell Lovable what new design part you want to add.

5. 5

   Add a simple sentence to the pasted prompt explaining where the new design part should go in your project.

   This tells Lovable exactly where to place the new design part, for example, 'Add this as the hero section on the homepage.'

6. 6

   Send your message in the Lovable project chat.

   Lovable will then automatically add the design part's code to your project and put it in the spot you specified.

I want to add a pre-built design part from 21st.dev. I will paste the prompt here and then tell you where it goes. [PASTE 21ST.DEV PROMPT HERE] Add this as the [SPECIFIC LOCATION, e.g., hero section on the homepage].

UI components

These are pre-made, reusable parts of a user interface, like a button, a menu, or a whole section of a webpage, that you can put together to build an app.

Hero section

This is the large, prominent section at the top of a webpage, usually containing a main heading, an image or video, and a call to action, designed to grab attention.

Navigation bar

This is a menu, usually at the top of a webpage, that helps users move between different parts of a website or app.

Testimonial layouts

These are pre-designed sections for displaying quotes or reviews from happy customers, often including their name and photo.

CTA

Short for 'Call to Action,' this is a button or link that prompts users to take a specific action, like 'Sign Up' or 'Buy Now'.

• Forgetting that 21st.dev is a separate service with its own usage limits, especially for free accounts.
• Not specifying clearly where the component should go in your Lovable project after pasting the prompt.