Впровадження Shoelace Web Components у дизайн-систему
Написання UI-компонентів з нуля — дороге задоволення. Кожна кнопка, інпут або діалог потребує проектування, верстки, тестування на доступність та крос-браузерність. Якщо проект живе в кількох фреймворках (React, Vue, Angular), трудомісткість зростає лінійно. Shoelace (тепер Web Awesome) вирішує цю проблему: готова бібліотека з 50+ Web Components, не прив'язана до фреймворку. Вона кастомізується через CSS-змінні та частини, підтримує темну тему та відповідає стандартам WCAG.
Наша команда впроваджує Shoelace з 2019 року. За цей час ми реалізували 30+ проектів — від стартапів до enterprise-систем. Нижче розберемо, як інтеграція Shoelace прискорює розробку в 3–5 разів і чому це вигідніше за кастомну розробку.
Чому Shoelace скорочує час розробки в 3–5 разів?
Порівняємо: написати один компонент «Select» з нуля — 3–5 днів з урахуванням тестування та a11y. Shoelace дає готовий <sl-select> з підтримкою клавіатури, ARIA-атрибутів і темної теми. Вам залишається лише перевизначити кольори під бренд через CSS-змінні. Підсумок: 2–4 дні на всю бібліотеку замість 2–3 місяців на свою.
Порівняння витрат:
| Характеристика | Свої компоненти | Shoelace |
|---|---|---|
| Час розробки (50 компонентів) | 2–3 місяці | 2–4 дні |
| Кількість компонентів | 10–20 | 50+ |
| Доступність (a11y) | Потребує окремої роботи | Вбудована (WCAG 2.1 AA) |
| Підтримка тем | Потрібно реалізовувати | Вбудована CSS-змінними |
| Оновлення та багфікси | Самостійно | Спільнота та автори |
| Вартість володіння за рік | Висока | $0 (безкоштовна ліцензія) |
Економія на розробці перевищує 60% вже на першому проекті. Перехід на Shoelace окупається за рахунок скорочення часу розробки та зниження витрат на підтримку.
Як інтегрувати Shoelace з React?
Інтеграція Shoelace з React потребує мінімум коду:
- Встановіть пакет:
npm install @shoelace-style/shoelace - Зареєструйте необхідні компоненти в окремому файлі (наприклад,
shoelace-setup.ts). Ми використовуємо cherry-pick імпорт з tree-shaking, щоб зменшити бандл в 10 разів порівняно з повним імпортом. - Імпортуйте тему та налаштуйте шлях до асетів.
Приклад типізованого React-компонента модального вікна:
import { useRef } from 'react' import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js' import '../shoelace-setup' export function ContactModal() { const dialogRef = useRef<SlDialog>(null) const openDialog = () => dialogRef.current?.show() const closeDialog = () => dialogRef.current?.hide() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() // обробка форми closeDialog() } return ( <> <sl-button variant="primary" onClick={openDialog}> Написати нам </sl-button> <sl-dialog ref={dialogRef} label="Контактна форма"> <form onSubmit={handleSubmit}> <sl-input label="Ім'я" required placeholder="Іван Іванов" style={{ marginBottom: '16px' }} /> <sl-input label="Email" type="email" required placeholder="[email protected]" style={{ marginBottom: '16px' }} /> <sl-textarea label="Повідомлення" rows={4} required /> </form> <sl-button slot="footer" variant="default" onClick={closeDialog}>Скасувати</sl-button> <sl-button slot="footer" variant="primary" type="submit">Надіслати</sl-button> </sl-dialog> </> ) } Для типізації JSX додайте декларації модулів для всіх компонентів. Це можна згенерувати через custom-elements.json, що постачається з бібліотекою.
Кастомізація під ваш бренд
Shoelace побудований на дизайн-токенах. Ви перевизначаєте кольори, шрифти, радіуси та інші змінні CSS — і вся бібліотека змінює зовнішній вигляд. Для точкової стилізації використовуйте CSS-частини (::part()). Ми також готуємо для команди гайд зі стилізації з прикладами.
/* Глобальні токени */ :root { --sl-color-primary-600: hsl(262, 75%, 45%); --sl-font-sans: 'Inter', system-ui, sans-serif; --sl-border-radius-medium: 8px; --sl-transition-medium: 200ms ease; } /* Стилізація окремої кнопки */ sl-button::part(base) { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } sl-button[variant="primary"]::part(base) { background: linear-gradient(135deg, #7000ff, #b600ff); border: none; } Темна тема — за 5 хвилин
Перемикання теми реалізується додаванням класу sl-theme-dark або sl-theme-light на <html>. Ми підключаємо збережену тему з localStorage та враховуємо prefers-color-scheme. Весь код ініціалізації займає 10 рядків.
Докладніше про темізацію — в офіційній документації Shoelace: https://shoelace.style/getting-started/themes
Процес впровадження
| Етап | Тривалість |
|---|---|
| Аналіз дизайн-системи та вимог | 1–2 дні |
| Налаштування Shoelace та cherry-pick імпорт | 1 день |
| Кастомізація під бренд (CSS-змінні, parts) | 1–2 дні |
| Інтеграція з React/Vue та тестування | 1–2 дні |
| Документація та навчання команди | 1 день |
| Підтримка та гарантія | протягом місяця |
Що входить в роботу
- Налаштування Shoelace з cherry-pick імпортом (tree-shaking) — розмір бандла зменшується в 10 разів.
- Кастомізація всіх компонентів під вашу дизайн-систему.
- Інтеграція з використовуваним фреймворком (React, Vue, Angular).
- Підтримка темної та світлої теми.
- Документація з використання та кастомізації.
- Навчання команди (2–3 години).
- Гарантія сумісності та безкоштовні оновлення протягом місяця.
Типові помилки та як їх уникнути
- Імпорт всієї бібліотеки замість cherry-pick — збільшує бандл в 10 разів.
- Ігнорування CSS-змінних — точкова стилізація через parts без токенів призводить до дублювання коду.
- Відсутність типів TypeScript — без декларацій компоненти не працюватимуть в JSX.
Ми підготували чек-лист інтеграції, який передамо вам після аудиту.
Замовте консультацію — ми проаналізуємо вашу дизайн-систему та запропонуємо план впровадження Shoelace з розрахунком економії. Отримайте безкоштовний аудит поточного UI та оцінку скорочення часу розробки. Економте ресурси — використовуйте готові компоненти.