npm package: @quadminds/mindkit
Description: Quadminds UI Kit - A comprehensive React component library with Tailwind CSS and Radix UI
Author: Quadminds
Latest version: 0.1.9

# @quadminds/mindkit

![Mindkit](https://www.quadminds.com/wp-content/uploads/2026/01/mindkit-scaled.png)

A comprehensive React component library built with Tailwind CSS and Radix UI primitives. Mindkit provides a collection of accessible, customizable, and beautifully designed components to build modern web applications.

## Features

- 🎨 **Beautiful Design** - Modern and clean component designs
- ♿ **Accessible** - Built on top of Radix UI primitives
- 🎭 **Customizable** - Easy to customize with Tailwind CSS
- 🌗 **Dark Mode** - Full dark mode support with next-themes
- 📦 **Tree-shakeable** - Import only what you need
- 💪 **TypeScript** - Full TypeScript support
- 🚀 **React 18+** - Built for modern React

## Installation

```bash
npm install @quadminds/mindkit
# or
yarn add @quadminds/mindkit
# or
pnpm add @quadminds/mindkit
```

### Peer Dependencies

Make sure you have React 18 or higher installed:

```bash
npm install react react-dom
```

### Tailwind CSS Setup

Mindkit uses Tailwind CSS and provides a preset with all necessary configurations.

1. Install Tailwind CSS:

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

2. Configure your `tailwind.config.js` to use the Mindkit preset:

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{ts,tsx,html}',
    './node_modules/@quadminds/mindkit/dist/**/*.{js,mjs}',
  ],
  darkMode: 'class',
  presets: [require('@quadminds/mindkit/tailwind.config')],
  theme: {
    extend: {
      // Add your project-specific customizations here
    },
  },
  // Plugins are already included in the preset (tailwindcss-animate, tailwind-scrollbar)
};
```

The preset includes:
- ✅ All Mindkit color schemes (primary-qm, variant-qm, gray-qm, etc.)
- ✅ Custom fonts (Poppins for titles, Roboto for numbers)
- ✅ Animations and keyframes
- ✅ Plugins: `tailwindcss-animate` and `tailwind-scrollbar`

3. Import the styles in your main CSS file:

```css
@import '@quadminds/mindkit/styles.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Primary Color Theme

Mindkit includes two built-in primary color themes: **QuadMinds Purple** (default) and **QuadMinds Blue**. You can switch between them by setting the `data-color-theme` attribute on your root HTML element.

#### Setting the Color Theme

Add the attribute to your HTML root element:

```html
<!-- QuadMinds Purple (default) -->
<html data-color-theme="purple">

<!-- QuadMinds Blue -->
<html data-color-theme="blue">
```

#### Dynamic Theme Switching

You can change the color theme dynamically with JavaScript:

```javascript
// Switch to Blue
document.documentElement.setAttribute('data-color-theme', 'blue');

// Switch to Purple
document.documentElement.setAttribute('data-color-theme', 'purple');

// Example: Color theme toggle
const toggleColorTheme = () => {
  const currentTheme = document.documentElement.getAttribute('data-color-theme') || 'purple';
  const newTheme = currentTheme === 'purple' ? 'blue' : 'purple';
  document.documentElement.setAttribute('data-color-theme', newTheme);
  localStorage.setItem('colorTheme', newTheme); // Optional: persist preference
};
```

The color theme automatically applies to:
- Primary and secondary button colors
- Accent colors
- Focus states and rings
- Active states in navigation
- Progress indicators
- All interactive elements

**Note:** The color theme works seamlessly with dark mode. Simply combine `data-color-theme` with the `dark` class on your root element.

## Usage

### Basic Example

```tsx
import { Button } from '@quadminds/mindkit';

function App() {
  return (
    <Button variant="default" size="md">
      Click me
    </Button>
  );
}
```

### With Theme Provider

For dark mode support, wrap your app with the ThemeProvider:

```tsx
import { ThemeProvider } from '@quadminds/mindkit';

function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="ui-theme">
      {/* Your app components */}
    </ThemeProvider>
  );
}
```

### Available Components

Mindkit includes the following components:

- **Layout**: Card, Separator, AspectRatio, Resizable, ScrollArea
- **Forms**: Button, Input, Textarea, Checkbox, RadioGroup, Select, Switch, Label, Form
- **Navigation**: NavigationMenu, Breadcrumb, Tabs, Sidebar, Menubar
- **Overlays**: Dialog, AlertDialog, Sheet, Drawer, Popover, HoverCard, Tooltip
- **Feedback**: Alert, Toast, Progress, Skeleton
- **Data Display**: Table, Badge, Avatar, Calendar, Chart
- **Interaction**: Accordion, Collapsible, ContextMenu, DropdownMenu, Command
- **Utilities**: Toaster, ThemeProvider

### Component Examples

#### Button

```tsx
import { Button } from '@quadminds/mindkit';

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
```

#### Dialog

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@quadminds/mindkit';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

#### Form with Input

```tsx
import { Input, Label } from '@quadminds/mindkit';

<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="Enter your email" />
</div>
```

## Styling

All components are styled with Tailwind CSS and support customization through the `className` prop. You can override styles or extend them as needed:

```tsx
<Button className="bg-purple-500 hover:bg-purple-600">
  Custom Styled Button
</Button>
```

## CSS Variables

Mindkit uses CSS variables for theming. You can customize the theme by defining these variables in your CSS:

```css
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  /* ... more variables */
}
```

See the full list of CSS variables in the styles included with the package.

## TypeScript

All components are written in TypeScript and include type definitions. You'll get full IntelliSense support in your IDE.

## Browser Support

Mindkit supports all modern browsers:

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## Contributing

Contributions are welcome! This package is maintained by Quadminds.

## License

MIT © Quadminds

## Credits

Built with:
- [Radix UI](https://www.radix-ui.com/) - Unstyled, accessible UI primitives
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS framework
- [Lucide](https://lucide.dev/) - Beautiful & consistent icon pack
- [Recharts](https://recharts.org/) - Composable charting library