Библиотека компонентов

Готовые Svelte-компоненты для документации, лендингов и интерфейсов — с живым превью и исходным кодом.

Библиотека компонентов

Коллекция готовых компонентов, используемых в платформе 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:

Переключатель темы

Кнопка переключения тёмной/светлой темы с плавной анимацией иконок.

Плавающее меню

Плавающее навигационное меню с поддержкой групп ссылок и кастомных слотов.

Варианты кнопок: accent, outline, ghost, danger — с hover-эффектами.

Боковая панель

Навигационная панель с древовидной структурой и hover-индикаторами.

Палитра поиска

Модальное окно поиска с горячими клавишами и клавиатурной навигацией.

Токены дизайна

Система дизайн-токенов: цвета, типографика, отступы, тени.

Компактный бейдж для меток и статусов с шестью вариантами оформления.

Бейдж статуса

Бейдж с точкой-индикатором для отображения статусов процессов.

Переключатель

Переключатель с двумя состояниями и плавной анимацией.

Прогресс-бар

Индикатор прогресса с настраиваемым значением и анимацией.

Карточки

Компоненты для отображения контента в карточном формате:

Карточка проекта

Карточка с интерактивным mesh-gradient glow при наведении.

Секция карточек

Секция из 6 карточек услуг с кастомными SVG-визуализациями.

Карточка

Универсальная карточка с eyebrow, заголовком и поддержкой ссылок.

Карточка отзыва с аватаром, именем и текстом.

Подсвеченный блок

Блок с подсветкой для акцентирования внимания.

Светящаяся карточка

Карточка с эффектом свечения при наведении.

Анимации

Анимированные компоненты для динамичного интерфейса:

Бегущая строка

Бесконечная горизонтальная прокрутка контента с плавной анимацией.

Галереи

Галереи изображений и медиа:

Бесконечная физическая галерея

Галерея с физикой инерции, drag-прокруткой и бесконечным повторением контента.

Медиа

Компоненты для работы с медиа-контентом:

Видеоплеер

Кастомизируемый видеоплеер с управлением и поддержкой плакатов.

Типографика

Эффекты для текста и заголовков:

Цикличный текст

Анимированная смена текста через GSAP — для hero-секций и заголовков.

Волна веса

Анимация изменения веса шрифта по волне.

Раздвижение текста

Эффект раздвижения текста при наведении.

Разделённое появление

Появление текста с разделением на части.

Разлёт текста

Эффект разлёта символов текста от курсора.

Скремблирование текста

Эффект скремблирования (перемешивания) текста.

Документация

Компоненты для разметки и структурирования документации:

Блоки уведомления

Пять вариантов callout-блоков: note, tip, important, warning, caution.

Шаги со статусами

Нумерованные шаги с индикаторами: todo, active, done, warning.

Блок кода

Блоки кода с подсветкой Shiki, копированием и встроенным поиском.

Все типы графиков через `:::chart`: line, bar, pie, radar и другие.

TOC индикатор

Оглавление с активным индикатором, SVG-линиями и pulse-анимацией.