open-index/open-npm huggingface dataset:
npm package: @mirats/quarks-ui
Description: A premium, fully flexible, and themeable React UI component library for building modern web applications.
Latest version: 1.1.0

# @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

```bash
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:

```bash
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.

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

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

### 2. Use Components

```tsx
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.

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

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

## License

MIT © [Mirats](https://mirats.app)