---
title: "Use 21st.dev components in RShift Sites"
description: "Copy pre-built hero sections, navigation bars, testimonials, and other UI components from 21st.dev directly into your projects."
image: "https://help.rshift.com/og.svg"
---

> Documentation Index
> Fetch the complete documentation index at: https://help.rshift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Use 21st.dev components in RShift Sites

[21st.dev](https://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.

> **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.

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

```text
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.

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

## Related topics

- [Prompt library](/sites/features/chat-mode/)
- [Glossary](/glossary/overview/)
- [Design systems](/sites/features/design-systems/)
- [Bring Figma designs into RShift Sites](/sites/integrations/figma/)
- [RShift Sites for Enterprise](/sites/introduction/lovable-for-enterprise/)

Source: https://help.rshift.com/sites/tips-tricks/21stdev/index.mdx