UI Kit
Витрина базовых компонентов проекта Letteros. Используйте эту страницу для проверки стилей и состояний элементов интерфейса.
Цвета
Основные
--background
#ffffff
--foreground
#151515
--primary
#3072ED
--secondary
#fafafa
--tertiary
#f8f8f8
--muted
#eaeaea
--accent
#F0F5FF
Foreground-пары
--card / --card-foreground
#f1f1f1
--popover / --popover-foreground
#ffffff
--primary / --primary-foreground
#3072ED
--secondary / --secondary-foreground
#fafafa
--muted / --muted-foreground
#eaeaea / #4B4B4B
--accent / --accent-foreground
#F0F5FF
Состояния
--destructive
#d42137
--success
#2d8962
--warning
нет аналога в v1
--error
#d42137
Утилитарные
--border
#e1e1e1
--input
#e1e1e1
--ring
#4B60FF
Сайдбар
--sidebar
#fafafa
--sidebar-primary
#001dff
--sidebar-accent
#F0F5FF
--sidebar-border
#e1e1e1
Типографика
.h1 — 4xl → 5xl → 7xl
Быстрая коричневая лиса прыгает через ленивую собаку
.h2 — 3xl → 4xl → 6xl
Быстрая коричневая лиса прыгает через ленивую собаку
.h3 — 2xl → 3xl → 4xl
Быстрая коричневая лиса прыгает через ленивую собаку
.h4 — 2xl → 3xl
Быстрая коричневая лиса прыгает через ленивую собаку
Основной крупный текст (lg)
Быстрая коричневая лиса прыгает через ленивую собаку. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Основной текст (base)
Быстрая коричневая лиса прыгает через ленивую собаку. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Мелкий / Приглушённый
Мелкий текст, как правило используется для подписей и описаний.
Формы и поля
Варианты
Размеры
Состояния
Select
Textarea
Карточки
Основное содержимое карточки, в котором можно размещать любые элементы.
Можно применять любые утилитарные классы для кастомизации внешнего вида.