MS UI Kit

MS UI Kit is a premium, lightweight, and highly customizable React UI component library. Designed with a focus on modern aesthetics — glassmorphism, smooth Framer Motion animations, and a robust global theme system — it gives you everything you need to build stunning interfaces fast.

Built with React, Vite, and Tailwind CSS.

Key Features

• Global Light/Dark Mode — Full theme management via React Context with a one-line setup
• Framer Motion Animations — Spring animations, staggered reveals, and micro-interactions on every component
• Premium Variants — glass, premium, and gradient styles for high-end dashboards
• Command Palette — Keyboard-driven Ctrl+K search overlay, like VS Code or Linear
• Date Picker — Custom-designed, animated calendar with smooth month transitions
• File Upload — Drag-and-drop zone with progress animation
• Data Table — Sortable, filterable table with paginated rows
• Toast Notifications — Stacked, auto-dismissing toasts with rich variants
• Drawer — Slide-in side panel overlay
• Responsive Design — Mobile-first components that look great on any screen

Installation

npm install ms-ui-kit

Peer dependencies — make sure your project already has these:

npm install react react-dom

Quick Start

Wrap your application in ThemeProvider to enable global theme management across all components.

import React from 'react';
import { ThemeProvider, Button, ThemeToggle } from 'ms-ui-kit';

function App() {
  return (
    <ThemeProvider>
      <div className="min-h-screen bg-white dark:bg-gray-950 transition-colors">
        <nav className="p-4 flex justify-between items-center">
          <h1 className="text-xl font-bold dark:text-white">My App</h1>
          <ThemeToggle />
        </nav>

        <main className="p-8">
          <Button variant="premium">Premium Action</Button>
        </main>
      </div>
    </ThemeProvider>
  );
}

export default App;

Available Components — v0.3.0

| Category | Components | |---|---| | Navigation | Navbar, Breadcrumb, Pagination, Tabs, ThemeToggle, CommandPalette | | Buttons & Forms | Button, Input, Checkbox, Switch, Textarea, Dropdown, DatePicker, FileUpload | | Data Display | Card, Avatar, Badge, Tag, Timeline, Rating, Stepper, EmptyState, DataTable | | Feedback | Alert, Modal, Tooltip, Spinner, Skeleton, Progress, Accordion, Toast | | Overlays | Drawer |

Component Highlights

ThemeToggle + ThemeProvider

Drop-in dark/light mode toggle powered by React Context. Persists preference and applies it globally.

import { ThemeProvider, ThemeToggle } from 'ms-ui-kit';

<ThemeProvider>
  <ThemeToggle />
</ThemeProvider>

Button

Supports primary, premium, outline, ghost, and danger variants with icon support.

import { Button } from 'ms-ui-kit';
import { Zap } from 'lucide-react';

<Button variant="premium" startIcon={<Zap />}>Upgrade Now</Button>

Card (Glass Variant)

Use variant="glass" for modern glassmorphism UI.

import { Card } from 'ms-ui-kit';

<Card variant="glass" hoverable>
  <Card.Header>Premium Project</Card.Header>
  <Card.Body>Content with backdrop blur effect.</Card.Body>
</Card>

CommandPalette

Keyboard-driven command search overlay. Triggered by Ctrl+K.

import { CommandPalette } from 'ms-ui-kit';

const commands = [
  { id: 'home', label: 'Go to Home', icon: <Home />, action: () => navigate('/') },
  { id: 'settings', label: 'Open Settings', icon: <Settings />, action: () => navigate('/settings') },
];

<CommandPalette commands={commands} />

DatePicker

Animated calendar with month navigation and controlled/uncontrolled modes.

import { DatePicker } from 'ms-ui-kit';

<DatePicker
  label="Pick a date"
  value={date}
  onChange={(newDate) => setDate(newDate)}
/>

Toast

Auto-dismissing stacked notifications with success, error, warning, and info variants.

import { useToast, ToastContainer } from 'ms-ui-kit';

function App() {
  const { toasts, addToast, removeToast } = useToast();

  return (
    <>
      <button onClick={() => addToast({ type: 'success', message: 'Saved!' })}>
        Show Toast
      </button>
      <ToastContainer toasts={toasts} onRemove={removeToast} />
    </>
  );
}

Drawer

Slide-in overlay panel for mobile menus, settings panels, and detail views.

import { Drawer } from 'ms-ui-kit';

<Drawer isOpen={open} onClose={() => setOpen(false)} title="Settings">
  <p>Drawer content here...</p>
</Drawer>

FileUpload

Drag-and-drop file upload zone with animated progress feedback.

import { FileUpload } from 'ms-ui-kit';

<FileUpload
  onFileSelect={(files) => console.log(files)}
  accept="image/*"
  multiple
/>

DataTable

Sortable, filterable data table with pagination.

import { DataTable } from 'ms-ui-kit';

const columns = [
  { key: 'name', label: 'Name', sortable: true },
  { key: 'role', label: 'Role' },
  { key: 'status', label: 'Status' },
];

<DataTable columns={columns} data={rows} pageSize={10} />

Changelog

v0.3.0 — May 15, 2026 (Latest)

• feat: Added CommandPalette — keyboard-driven Ctrl+K search overlay
• feat: Added DatePicker — custom animated calendar component
• feat: Added FileUpload — drag-and-drop file upload with progress
• feat: Added DataTable — sortable, filterable data table with pagination
• feat: Added Toast / useToast — stacked notification system
• feat: Added Drawer — slide-in side panel overlay
• feat: Full global light/dark mode support via ThemeProvider + ThemeToggle
• style: Enhanced ThemeToggle with spring animations and vibrant colors
• ci: Added GitHub Actions workflow for lint and build checks
• fix: Resolved linting errors in CommandPalette, DataTable, and Toast
• fix: Resolved Vite config issues for library build

v0.2.0 — March 15, 2026

• feat: Added Footer component
• feat: Updated logo and improved component showcase dashboard
• fix: Conditional build.lib for Vercel deployment compatibility
• fix: Updated vercel.json rewrites for SPA routing

v0.1.0 — Initial Release

• Core components: Button, Input, Card, Modal, Avatar, Badge, Alert, Tooltip, Spinner, Skeleton, Progress, Accordion, Tabs, Navbar, Breadcrumb, Pagination, Checkbox, Switch, Textarea, Dropdown, Tag, Timeline, Rating, Stepper, EmptyState

Contributing

Contributions are welcome!

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'feat: add my feature'
4. Push and submit a pull request

GitHub Repository: maheshshinde9100/ms-ui-kit

License

This project is licensed under the MIT License — see the LICENSE file for details.

Author

Mahesh Shinde Computer Engineering Student | Full Stack Developer

GitHub: @maheshshinde9100