21st.dev: 12 000 готовых кнопок, карточек и меню — и помощник берёт их сам

Открыть 21st.dev →

Когда нейросеть рисует сайт «из головы», кнопки и карточки получаются одинаковые: три в ряд, серые, с тенью. Не потому что не умеет — ей не с чего брать.

21st.dev — библиотека, где дизайнеры выкладывают готовые куски интерфейсов: кнопки, меню, формы, карточки товаров, первые экраны, анимированные фоны. Больше двенадцати тысяч. Каждый можно посмотреть живьём и забрать с кодом.

Что внутри

• компоненты на React и Tailwind — самая частая связка у помощников
• живой просмотр: видишь, как ведёт себя кнопка при наведении, до того как взял
• копируется в один клик вместе с кодом
• есть подключение к помощнику (MCP): он ищет и вставляет компоненты сам, без твоего копирования

Как это использую я

Два пути. Простой — нашёл карточку, скопировал, сказал помощнику «сделай вот так». Умный — подключил 21st.dev как MCP, и дальше пишу «возьми с 21st красивую форму заявки», а он сам находит и вставляет.

Что стоит знать

Бесплатный доступ ограничен: часть компонентов и генерация через ИИ — по подписке. Для сайта-визитки и лендинга бесплатного хватает.

Чужой компонент — чужой стиль. Если брать по одному отсюда и оттуда, сайт превратится в лоскутное одеяло. Возьми два-три с одной страницы автора — и подгони под свой шрифт и цвет.

Если не разобрался

Если застрял или хочешь, чтобы твой сайт перестал выглядеть «как у всех», — напиши мне в Telegram, оформим консультацию: покажу вживую, как я собираю первый экран, шрифты и цвет. Не хочешь разбираться сам — соберу под тебя.

Впервые вышло в канале @alex_aicontent.