@mirats/quarks-ui

A premium, fully flexible, and themeable React UI component library for building modern web applications.

Features

• 🎨 Fully Themeable: Built with CSS variables for easy customization.
• 🌓 Dark Mode Support: Deeply integrated dark mode that adapts perfectly.
• 🎭 Color Presets: Comes with built-in presets (Forest, Ocean, Sunset, Rose).
• 🧩 Flexible Components: Highly customizable components with clean APIs.
• 🚀 Performance Optimized: Lightweight components built with Vite and TypeScript.
• ✨ Premium Design: Modern aesthetics with smooth animations using Framer Motion.

Installation

npm install @mirats/quarks-ui
# or
yarn add @mirats/quarks-ui
# or
bun add @mirats/quarks-ui

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom framer-motion lucide-react

Usage

1. Setup Theme Provider

Wrap your application with the ThemeProvider and import the global styles.

import { ThemeProvider } from '@mirats/quarks-ui';
import '@mirats/quarks-ui/dist/quarks.css';

function App() {
  return (
    <ThemeProvider defaultPreset="default">
      <YourAppContent />
    </ThemeProvider>
  );
}

2. Use Components

import { Button, Navbar, TeamGrid } from '@mirats/quarks-ui';

function Home() {
  return (
    <>
      <Navbar />
      <Button variant="primary">Get Started</Button>
      <TeamGrid 
        title="Our Leadership"
        categories={["Board of Directors", "Executive Team"]}
        members={[
          {
            id: '1',
            name: 'John Doe',
            role: 'CEO',
            category: 'Executive Team',
            imageSrc: '...',
            bio: 'Leading with vision.'
          }
        ]}
      />
    </>
  );
}

Theme Switching

Use the useTheme hook to toggle modes or change presets programmatically, or use the included ThemeSwitcher component for a ready-to-use UI.

import { ThemeSwitcher } from '@mirats/quarks-ui';

// In your app...
<ThemeSwitcher />

License

MIT © Mirats