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

Готовые блоки.
Собранные в Rugma.

Живой набор интерфейсных компонентов: кнопки, поля, карточки, переключатели и цветовая система. Всё это можно собрать прямо в редакторе и переиспользовать как библиотеку.

Кнопки

Основное действие, второстепенное и акцентное.
.btn · .btn-primary · .btn-ghost · .btn-spark · .btn-lg

Поля ввода

Текст, email и поиск с состоянием фокуса.
.d-input · фокус с кольцом подсветки

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

Короткие метки для состояний и категорий.
● Готово ● В работе ● Черновик NEW 152-ФЗ self-hosted
.d-badge.ok / .warn / .info / .new · .chip

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

Бинарные настройки с плавной анимацией.
.d-toggle · .d-progress

Карточки

Контейнер для превью, контента и действий.

Превью проекта

Обложка, заголовок и краткое описание. Кликабельная карточка для галерей и дашбордов.

Шаблон лендинга

Готовая структура с секциями. Откройте и адаптируйте под свой бренд за минуты.

.d-card

Аватары

Одиночные и в группе — для участников и комментариев.
V
А
М
V
А
М
+5
.d-av · .d-avatars (стопкой)

Табы и уведомления

Переключение разделов и информационные блоки.
i
Автосохранение включено

Изменения сохраняются автоматически. Историю версий можно открыть в любой момент.

.d-tabs · .d-alert

Цветовая система

Бренд-палитра Rugma и акцент направляющих.
Violet
Blue
Sky
Teal
Green
Guide
Ink
Paper
--brand-violet · --brand-guide · --grad-spark

Соберите свою библиотеку

Создавайте компоненты в редакторе, превращайте в варианты и переиспользуйте по всему проекту.

Открыть редактор →