Ultra Lightweight - Only 9.1KB gzipped for the entire library
Multi-Framework - Same components, same API across React, Vue, and vanilla JS
Optimized Bundles - React (1.0KB), Vue (263 bytes), Vanilla (400 bytes)
Performance - Built with shared core logic and excellent tree-shaking (39.4% ratio)
16 Core Components - Fully implemented with consistent behavior across frameworks
Customizable - Powerful theming system with CSS variables and Tailwind integration
Accessible - WCAG compliant with full keyboard navigation and ARIA support
Responsive - Mobile-first design that works on any device
Developer Friendly - Full TypeScript support with excellent IntelliSense

Quick Start

Installation

npm install guru-ui

React

import { Button, ThemeProvider } from 'guru-ui'
import 'guru-ui/style.css'

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary">Get Started</Button>
    </ThemeProvider>
  )
}

Vue 3

<template>
  <ThemeProvider>
    <Button variant="primary">Get Started</Button>
  </ThemeProvider>
</template>

<script setup>
import { Button, ThemeProvider } from 'guru-ui/vue'
import 'guru-ui/style.css'
</script>

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/guru-ui/style.css">
</head>
<body>
  <button data-guru-button data-variant="primary">Get Started</button>
  
  <script type="module">
    import { initializeAllComponents } from 'guru-ui/vanilla'
    initializeAllComponents()
  </script>
</body>
</html>

Features

40+ Components

All components work identically across frameworks:

Form Controls: Button, Input, Textarea, Checkbox, Radio, Switch, Slider
Layout: Card, Modal, Drawer, Tabs, Accordion, Separator
Navigation: Navbar, Footer, Breadcrumbs, Pagination, Menu
Feedback: Alert, Toast, Progress, Skeleton, Loading
Data Display: Table, Avatar, Badge, Chart, Stats, Timeline
Advanced: DatePicker, ColorPicker, Upload, VirtualList

Theming System

import { ThemeProvider, themes } from 'guru-ui'

// Use built-in themes
<ThemeProvider theme={themes.blue}>
  <App />
</ThemeProvider>

// Create custom themes
const customTheme = {
  accent: '#ff6b6b',
  background: '#1a1a1a',
  radius: '8px'
}

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

CSS Variables

Customize any aspect with CSS variables:

:root {
  --guru-accent: #your-brand-color;
  --guru-radius: 12px;
  --guru-font: 'Your Font', sans-serif;
}

Bundle Size

Package	Size (gzipped)
Core components only	~8KB
React components	~15KB
Vue components	~14KB
Vanilla JS	~10KB
Full library	~25KB

All sizes include CSS. Actual bundle size depends on which components you import thanks to tree-shaking.

Performance

Tree-shaking - Only bundle what you use
No runtime dependencies - Except for optional clsx and tailwind-merge
Optimized CSS - Efficient selectors and minimal styles
Modern build - ES2020 target with optimal bundling

Browser Support

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+

Framework Compatibility

Framework	Version	Status
React	18+	✅ Full support
Vue	3.3+	✅ Full support
Vanilla JS	ES2020+	✅ Full support

Documentation

Visit our comprehensive documentation for:

Examples

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT License - see LICENSE for details.

Support

Built with ❤️ for the developer community

Keywords

FAQs

What is @arnis-lv/guru-ui?

Is @arnis-lv/guru-ui popular?

Is @arnis-lv/guru-ui well maintained?

Package last updated on 15 Aug 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@arnis-lv/guru-ui

Guru UI

Why Guru UI?