Lexi UI Kit

A comprehensive Vue 3 UI kit and design system with extensive components and ready-made layouts — crafted for modern web development. Built with TypeScript and Vite for exceptional developer experience.

Spend Less Time Building From Scratch

Lexi UI Kit provides everything you need to create stunning web applications with a focus on performance, accessibility, and developer productivity.

Core Features

• Modern Stack: Built with Vue 3, TypeScript, and Vite
• Design Tokens & Variables: Comprehensive system of design tokens for colors, typography, spacing, and effects
• Responsive Framework: Built-in responsive utilities with 6 breakpoints (xl, lg, md, sm, xs, xss)
• Icon System: Rich collection of fill icons for seamless integration
• Dark Mode Support: Built-in dark mode variables and theming
• Component Properties: Fully typed props and emits for better DX

Component Library

• Form Controls:
  • Input Fields with variants
  • Checkboxes with custom styles
  • Radio buttons
  • Phone input with international format
  • OTP input
• Interactive Elements:
  • Button variants
  • Button toggles
  • Range sliders
  • Toggle switches
• Feedback Components:
  • Toast notifications
  • Message system
  • Spinners
• Layout Components:
  • Responsive grid system
  • Spacing utilities
  • Flexible containers

Developer Experience

• Full TypeScript support
• Storybook integration
• Comprehensive documentation
• SCSS utilities and helpers
• Auto-imports capability
• Vite-powered development

Customization

Easily modify:

• Colors and themes
• Typography scales
• Spacing systems
• Component variants
• Grid layouts
• Effects and animations

Perfect for teams building modern web applications that require a robust, type-safe component library with a consistent design language.

Inspired by Sublima UI

CSS утилиты и адаптивные стили

Проект включает обширную систему утилит CSS для отступов, промежутков, шрифтов и других стилей:

• Поддержка адаптивных классов для всех брейкпоинтов (xl-, lg-, md-, sm-, xs-, xss-)
• Утилиты для margin, padding, gap
• Классы для управления размером шрифта
• Классы для отображения и видимости элементов

Подробная документация по использованию утилит доступна в STYLES.md.

Пример использования адаптивных классов

<div class="mb-4 sm-mb-2 xs-mb-1 gap-3 md-gap-2 font-5 xs-font-4">
  <!-- Элемент с адаптивными отступами, промежутками и размером шрифта -->
</div>