Библиотека компонентов
Коллекция готовых компонентов, используемых в платформе opensophy. Каждая страница содержит интерактивное демо и полный исходный код с подсветкой синтаксиса.
Стек
UI
SvelteKit + Svelte 5
Рунный синтаксис `$state`, `$derived`, `$props`. Все компоненты совместимы с SSR и статической генерацией.
Стили
Tailwind CSS v4
Утилитарные классы + CSS custom properties для темизации. Поддержка тёмной и светлой тем через класс `.dark`.
Код
TypeScript
Типизированные пропсы, интерфейсы, строгий режим. Все компоненты экспортируют корректные типы.
Иконки
Carbon Icons
Библиотека `carbon-icons-svelte` для системных иконок — более 2000 SVG-иконок.
Анимации
GSAP
Продвинутые анимации через GSAP в `TextLoop`. CSS transitions — везде где достаточно.
Подсветка
Shiki
Подсветка синтаксиса кода через Shiki — github-light / github-dark темы.
Разделы
Интерфейс
Компоненты для навигации и интерактивного UI:
01
Переключатель темы
Кнопка переключения тёмной/светлой темы с плавной анимацией иконок.
02
Цикличный текст
Анимированная смена текста через GSAP — для hero-секций и заголовков.
03
Плавающее меню
Плавающее навигационное меню с поддержкой групп ссылок и кастомных слотов.
04
Кнопка
Варианты кнопок: accent, outline, ghost, danger — с hover-эффектами.
05
Боковая панель
Навигационная панель с древовидной структурой и hover-индикаторами.
06
Палитра поиска
Модальное окно поиска с горячими клавишами и клавиатурной навигацией.
07
Токены дизайна
Система дизайн-токенов: цвета, типографика, отступы, тени.
Карточки
Компоненты для отображения контента в карточном формате:
08
Карточка проекта
Карточка с интерактивным mesh-gradient glow при наведении.
09
Секция карточек
Секция из 6 карточек услуг с кастомными SVG-визуализациями.
10
Карточка
Универсальная карточка с eyebrow, заголовком и поддержкой ссылок.
Документация
Компоненты для разметки и структурирования документации:
11
Блоки уведомления
Пять вариантов callout-блоков: note, tip, important, warning, caution.
12
Шаги со статусами
Нумерованные шаги с индикаторами: todo, active, done, warning.
13
Блок кода
Блоки кода с подсветкой Shiki, копированием и встроенным поиском.
14
Графики
Все типы графиков через `:::chart`: line, bar, pie, radar и другие.
15
TOC индикатор
Оглавление с активным индикатором, SVG-линиями и pulse-анимацией.