Skip to main content
21st.dev provides a library of pre-built UI components that you can instantly add to your Lovable projects with a simple copy-paste workflow. Do this to improve the design of your project and make your Lovable projects look less generic.

​
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

Open the Component and Copy the Prompt

Click on your chosen component to open its detail page. Select Lovable as the prompt type, then copy the prompt.
4

Paste into Lovable

Open your Lovable project and paste the copied prompt.
5

Specify Component Placement

Add a line specifying where you want the component to appear in your project (e.g., “Add this to the homepage hero section” or “Use this as the background”).
6

Let Lovable Integrate the Component

Send your message. Lovable will automatically copy the component code into your codebase and place it where you specified.
The component will inherit your project’s existing styles and can be further customized using Visual Edits or prompting.