Верстка сучасних інтерфейсів: досвід використання Shadcn/UI

Верстка сучасних інтерфейсів: досвід використання Shadcn/UI

Сталкивалися з тим, що готовий UI-kit не вписується в дизайн, а кастомізація перетворюється на перевизначення стилів через !important? Material UI та Chakra UI додають тони невикористовуваного коду, а SSR-підтримка вимагає окремого налаштування. Shadcn/UI вирішує цю проблему інакше: він не бібліотека, а колекція компонентів, які можна скопіювати, на основі Radix UI та Tailwind CSS. Весь код потрапляє у ваш репозиторій — ви контролюєте кожен піксель.

Наша команда впроваджує Shadcn/UI з моменту його виходу. За цей час реалізували понад 50 рішень: від адмін-панелей до лендінгів з високою конверсією. Один з клієнтів, перейшовши з Material UI, заощадив близько 150 000 грн на переписуванні коду — Shadcn/UI виявився втричі легшим за розміром бандла і не вимагав додаткових налаштувань для SSR. В іншому проєкті вдалося скоротити час розробки на 2 тижні, що заощадило 80 000 грн на трудозатратах.

Чому Shadcn/UI швидший за інші UI-бібліотеки?

Головна проблема великих UI-фреймворків — надлишковість. Ви тягнете 100+ компонентів, а використовуєте 5-10. Shadcn/UI працює інакше: ви встановлюєте лише те, що потрібно. Це знижує розмір bundle на 30–40% і покращує Core Web Vitals — LCP падає на 15-20% порівняно з Material UI. Доступність вбудована в кожен компонент завдяки Radix UI, тому вам не потрібно турбуватися про ARIA-атрибути.

Друга проблема — кастомізація. У Shadcn/UI немає оверрайдів: ви правите вихідний код компонента. Хочете зробити кнопку з градієнтом? Додайте рядок у variant-об'єкт. Потрібна нестандартна типографіка? Змініть CSS-змінні. При цьому базова доступність (ARIA-атрибути, фокус, клавіатурна навігація) вже вшита.

Третя — темна тема. У Shadcn/UI вона реалізована через CSS-змінні: перемикання класу dark на кореневому елементі автоматично змінює кольори. Жодних додаткових провайдерів чи стилів.

Як кастомізувати компоненти без втрати оновлень?

Розглянемо типовий кейс: лендінг для SaaS-продукту на Next.js 14 з TypeScript і Tailwind. Ми починаємо з ініціалізації Shadcn/UI:

npx shadcn@latest init 

CLI запитує стиль (default/new-york), базовий колір та аліаси. Конфігурація записується в components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Далі додаємо потрібні компоненти: button, card, dialog, input, form. Кожен файл з'являється в components/ui/. Наприклад, діалог з формою:

import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

const ContactDialog = () => (
  <Dialog>
    <DialogTrigger asChild>
      <Button>Зв'язатися</Button>
    </DialogTrigger>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>Залиште заявку</DialogTitle>
      </DialogHeader>
      <form className="flex flex-col gap-4">
        <input name="name" placeholder="Ваше ім'я" />
        <input name="email" type="email" placeholder="Email" />
        <Button type="submit">Відправити</Button>
      </form>
    </DialogContent>
  </Dialog>
);

Кастомізація не вимагає перевизначень: додати новий варіант кнопки — правимо button.tsx:

const buttonVariants = cva(
  'inline-flex items-center justify-center ...',
  {
    variants: {
      variant: {
        default: '...',
        gradient: 'bg-gradient-to-r from-blue-600 to-purple-600 text-white hover:opacity-90',
      },
    },
  }
);

Процес роботи над проєктом

1. Аналітика (1-2 дні): вивчаємо макети, виділяємо повторювані UI-блоки, визначаємо необхідні компоненти.
2. Проєктування (1 день): налаштовуємо тему (кольори, типографіку, анімації), створюємо базовий layout.
3. Реалізація (2-4 дні): інтегруємо компоненти, адаптуємо під дизайн, перевіряємо стан завантаження/помилки/порожні дані.
4. Тестування (1 день): перевіряємо доступність (скрінрідери, клавіатура), адаптивність, продуктивність (Lighthouse 90+).
5. Деплой (0.5 дня): налаштовуємо збірку, кешування, підключаємо аналітику.

Що входить в роботу

• Вихідний код усіх компонентів з TypeScript та JSDoc.
• Файл globals.css з коректними CSS-змінними під ваш бренд.
• Адаптивна верстка (mobile-first) з breakpoints.
• Темна тема (якщо потрібно).
• Коротка документація: як додати новий компонент, як оновити через npx shadcn diff.
• Навчання вашої команди (1 година дзвінок) — розповімо про best practices.
• Підтримка протягом 2 тижнів після здачі.

Терміни та вартість

Вартість розраховується індивідуально — залежить від кількості компонентів та складності кастомізації. Оцінка займає не більше 24 годин. Замовте верстку на Shadcn/UI — ми гарантуємо код без помилок hydration, 100% відповідність макету та проходження Core Web Vitals. Отримайте консультацію за 24 години — зв'яжіться з нами, щоб обговорити ваш проєкт.