Через npm
Рекомендуемый способ для production-сборки. Выполните npm install @glypha/core @glypha/react — пакет весит 38 кБ после минификации и не тянет лишние зависимости.
Ресурсы для разработчиков
Интеграция Glypha в ваш продукт
Система дизайна, которая дышит цветом. Готовые инструкции, API-документация и песочница для тех, кто строит интерфейсы на Glypha каждый день.
Шаг за шагом
Быстрый старт
От пустой папки до работающего интерфейса за 15 минут. Ниже — минимальный набор действий для первого запуска Glypha в React-приложении.
1. Установите пакет @glypha/core и пакет-пресет для вашего фреймворка. Для React это @glypha/react версии 4.2.0.
2. Оберните корневой компонент в провайдер <GlyphaProvider theme="aurora" />. Он поднимает контекст токенов и подключает глобальные стили без лишних импортов.
3. Импортируйте компоненты по отдельности: import { Button, Card, Field } from '@glypha/react'. Бандлер соберёт только то, что вы реально используете.
4. Проверьте результат. Если в консоли появилась строка Glypha ready · 4.2.0 · 42 components — система инициализирована корректно.
Установка
npm или CDN — на ваш выбор
Через CDN
Для прототипов и статических страниц подключите cdn.glypha.dev/v4/glypha.min.js одним тегом <script>. Глобальный объект window.Glypha доступен сразу.
Свободный JS / Vite
В проектах без фреймворка используйте ядро @glypha/core и монтируйте компоненты через Glypha.mount('#app', { theme: 'aurora' }). Поддерживается и сборка через Vite, и через Webpack 5.
Мультифреймворк
React, Vue и Svelte — одна система
Один и тот же набор токенов и компонентов, но с нативным API под каждый фреймворк. Никаких обёрток и костылей.
React 18 + 19
Пакет @glypha/react использует хуки и контекст. Поддерживаются Server Components и строгий режим. Стабильная версия 4.2.0, 1 420 зависимых пакетов в экосистеме.
Vue 3 (Composition API)
Пакет @glypha/vue регистрирует глобальные компоненты и предоставляет хук useGlypha(). Работает с Nuxt 3 и Volar. Текущая версия 4.1.7.
Svelte 4 и 5
Пакет @glypha/svelte отдаёт нативные Svelte-компоненты с реактивными пропсами. Совместим с SvelteKit и Svelte 5 runes. Стабильная версия 4.0.3.
42
Базовых компонента
38кБ
Вес ядра после минификации
v4.2.0
Актуальная стабильная версия
Справочник
Документация API
Каждый компонент описан с пропсами, событиями и примерами. Ниже — ключевые сущности, с которых начинается работа.
GlyphaProvider — корневой контейнер. Принимает пропсы theme (string, по умолчанию "aurora"), locale ("ru" | "en") и density ("comfortable" | "compact"). Передаёт токены вниз по дереву.
Button — базовая кнопка действия. Пропсы: variant ("primary" | "secondary" | "ghost"), size ("sm" | "md" | "lg"), loading (boolean). Событие: onClick. Пример: <Button variant="primary" size="md">Сохранить</Button>.
Field — обёртка для форм. Пропсы: label, error, hint, required. Компонент автоматически связывается с ARIA-атрибутами для доступности.
Полный справочник по всем 42 компонентам, токенам и хелперам доступен в разделе API Reference с поиском по сигнатурам и фильтрами по фреймворку.
Песочница
Sandbox для тестирования
Живой редактор
Открывайте компоненты в песочнице, меняйте пропсы в реальном времени и сразу смотрите результат. Код синхронизируется с предпросмотром мгновенно.
Экспорт сниппетов
Нажмите кнопку экспорта и получите готовый код под выбранный фреймворк — React, Vue или Svelte. Сниппеты включают нужные импорты и пропсы.
Тест темы и плотности
Переключайте темы "aurora", "slate" и "mono", а также плотность "comfortable"/"compact", чтобы проверить компонент в разных условиях до выпуска.
Версии
Changelog и версия продукта
Актуальная стабильная версия — 4.2.0 (выпущена 14 марта 2025). Мы придерживаемся семантического версионирования: мажорные релизы раз в квартал, минорные — по мере готовности.
v4.2.0 · 14.03.2025 — Добавлен компонент DataTable с виртуализацией строк, поддержка React 19, исправлено 12 багов в календаре DatePicker. Размер ядра вырос на 3 кБ.
v4.1.7 · 02.02.2025 — Патч-релиз: устранён конфликт имён токенов в Vue-пакете, улучшена производительность Tooltip при быстром наведении.
v4.0.0 · 05.12.2024 — Мажорный релиз: переписана система токенов на CSS-переменные, добавлена тема "slate", удалены устаревшие API из версии 3.x. Требуется миграция по гиду.
Готовы подключить Glypha к вашему продукту?
Скачайте полный пакет документации, откройте песочницу и начните интеграцию уже сегодня. Поддержка — в будни с 10:00 до 19:00 МСК.
Частые вопросы по интеграции
Можно ли использовать Glypha в существующем проекте с чужим UI-китом?
Да. Токены изолированы в CSS-переменных с префиксом glypha-, поэтому они не конфликтуют с вашими стилями. Вы можете подключать Glypha только в отдельных модулях приложения.
Как обновить систему до новой версии без потери кастомизации?
Все переопределения хранятся в отдельном файле theme.config.js и не затронуты обновлением пакета. Для мажорных релизов мы публикуем автоматический мигратор glypha migrate.
Поддерживает ли Glypha сборку под нативные мобильные приложения?
Да. Токены экспортируются в форматы для React Native, SwiftUI и Compose. Документация по мобильной интеграции доступна в разделе «Платформы» справочника.