> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovable.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://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.

<Note>
  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](https://21st.dev/) for their current terms.
</Note>

## Step-by-step guide

<Frame>
  <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>
</Frame>

<Steps>
  <Step title="Go to 21st.dev">
    Navigate to [21st.dev](https://21st.dev/) to browse the component library.
  </Step>

  <Step title="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
  </Step>

  <Step title="Copy the prompt for Lovable">
    Open your chosen component's detail page and copy its prompt, choosing Lovable as the target tool.
  </Step>

  <Step title="Paste into Lovable">
    Open your Lovable project and paste the copied prompt into the chat.
  </Step>

  <Step title="Say where the component goes">
    Add a line to the pasted prompt specifying where the component belongs in your project. For example:

    ```text wrap theme={null}
    Add this as the hero section on the homepage.
    ```
  </Step>

  <Step title="Let Lovable integrate the component">
    Send your message. Lovable adds the component code to your project and places it where you specified.

    <Note>
      The component inherits your project's existing styles, and you can customize it further with the [preview toolbar](/features/preview-toolbar) or a follow-up prompt.
    </Note>
  </Step>
</Steps>