Бесплатные шаблоны лендинга на React и Tailwind

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

Мой рецепт: сначала клонировать нормальный шаблон, потом говорить агенту что менять. Шаблон даёт правильную структуру секций, адаптивную вёрстку и рабочий тёмный режим прямо из коробки. Эти три репозитория — те самые, к которым я возвращаюсь. Все бесплатные, все на React/Next.js, все живые.

Шаблон Cruip 'Open' — тот, который я клоную чаще всего. Next.js, Tailwind v4, и всё нужное уже есть: хедер, грид фичей, отзывы, таблица цен. Дизайн чистый, ничего лишнего. Живая версия на open.cruip.com выглядит как готовый продукт, а не как шаблон. В репозитории есть Figma-файл, если агенту нужен дизайн-контекст.

Второй шаблон Cruip — 'Simple Light' — тот же стек, но совсем другая визуальная история. Там где Open тёмный и акцентный, Simple Light воздушный и минималистичный. Одинаковое качество, одинаковая частота обновлений — просто разная эстетика. Удобно показать оба клиенту и выбрать подходящий. Демо на simple.cruip.com.

Если в проекте уже стоит shadcn/ui — а у большинства вайб-проектов стоит — этот шаблон будет идеальным выбором. Весь построен на shadcn-компонентах: навбар, хиро, фичи, цены, FAQ, отзывы, CTA, футер — всё на месте. Полностью адаптивный, тёмный режим из коробки. Очень немного бесплатных шаблонов выглядят так профессионально на мобильном, это один из них. Демо на shadcn-landing-page.vercel.app.

1Как клонировать и запустить шаблон лендинга

Клонируй репозиторий, установи зависимости, запусти дев-сервер. Потом открой папку проекта и скажи агенту что менять — текст, цвета, секции, всё что нужно.

git clone https://github.com/cruip/open-react-template.git my-landing
cd my-landing
npm install
npm run dev

git clone https://github.com/leoMirandaa/shadcn-landing-page.git my-landing
cd my-landing
npm install
npm run dev

2Какой шаблон выбрать

Если только начинаешь и у тебя нет установленного shadcn — берёшь Cruip, это самодостаточный шаблон без дополнительных зависимостей. Если shadcn уже стоит в проекте — клонируй shadcn-landing-page: агент будет работать в знакомой среде и всё подхватит сразу. Если не можешь выбрать — открой три демо рядом и возьми то что ближе всего к задуманному.