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

# Интеграция с 21st.dev

> Как создать лендинг с помощью готовых компонентов

<Accordion title="Что такое 21st.dev">
  [21st.dev](https://21st.dev/) — это сайт с готовыми компонентами. Компонент — это готовый блок. Например:

  * Кнопка
  * Форма
  * Секция с текстом
  * Блок с отзывами
  * Навигационное меню

  Каждый компонент можно скопировать и вставить в ваш проект. Это быстрее, чем создавать с нуля.
</Accordion>

## Как использовать

<Steps>
  <Step title="Найдите нужный компонент">
    1. Откройте [21st.dev](https://21st.dev/)
    2. Найдите компонент, который вам нравится

           <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-1.png" alt="21st.dev в светлой теме" />

           <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-1.png" alt="21st.dev в темной теме" />
    3. Скопируйте промпт компонента

           <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-2.png" alt="21st.dev в светлой теме" />

           <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-2.png" alt="21st.dev в темной теме" />
  </Step>

  <Step title="Дайте указания Юре">
    1. Откройте свой сайт на [Поехали!](https://poehali.dev/)
    2. Вставьте скопированное описание в чат
    3. Попросите Юру добавить этот компонент

           <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-3.png" alt="21st.dev в светлой теме" />

           <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-3.png" alt="21st.dev в темной теме" />

           <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-4.png" alt="21st.dev в светлой теме" />

           <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-4.png" alt="21st.dev в темной теме" />
  </Step>

  <Step title="Настройте под свой сайт">
    Юра создаст компонент, а вы редактируйте:

    * Измени цвет на синий
    * Сделай текст крупнее
    * Добавь моё название компании
  </Step>
</Steps>

## Зачем использовать готовые компоненты

* **Экономия времени.** Не нужно придумывать дизайн с нуля. Берёте готовое решение.
* **Проверенные решения.** Компоненты уже протестированы. Они работают хорошо.
* **Профессиональный вид.** Сайт выглядит как сделанный дизайнером.

## Простой пример

Допустим, вам нужна секция с отзывами:

<Steps>
  <Step title="Откройте 21st.dev">
    и найдите там «Reviews Section»

    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-5.png" alt="21st.dev в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-5.png" alt="21st.dev в темной теме" />

    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-6.png" alt="21st.dev в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-6.png" alt="21st.dev в темной теме" />
  </Step>

  <Step title="Скопируйте промпт">
    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-7.png" alt="21st.dev в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-7.png" alt="21st.dev в темной теме" />

    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-8.png" alt="21st.dev в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-8.png" alt="21st.dev в темной теме" />
  </Step>

  <Step title="Попросите Юру сделать такой же компонент">
    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-9.png" alt="21st.dev в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-9.png" alt="21st.dev в темной теме" />

    Юра создаст секцию с отзывами за несколько секунд.

    <img className="block dark:hidden" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-10.png" alt="21st.dev в светлой теме" />

    <img className="hidden dark:block" src="https://storage.yandexcloud.net/poehali-cdn/intertnal/docs/doc.pictures/21st-dev-10.png" alt="21st.dev в темной теме" />
  </Step>
</Steps>

## Советы по использованию

* **Начинайте с простого** — выберите 2-3 компонента для начала, не берите сразу много
* **Адаптируйте под себя** — каждый компонент нужно настроить под ваш бизнес, замените текст и цвета
* **Проверяйте на телефоне** — убедитесь, что компонент хорошо выглядит на мобильном
* **Сохраняйте единый стиль** — все компоненты должны подходить друг другу по цветам и шрифтам

## Что дальше

После добавления компонентов:

1. Проверьте сайт на разных устройствах
2. Попросите друзей посмотреть
3. Опубликуйте