@quadminds/mindkit

@quadminds/mindkit

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

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:

npm install react react-dom

Tailwind CSS Setup

Mindkit uses Tailwind CSS. You need to configure Tailwind in your project:

• Install Tailwind CSS:

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

• Configure your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@quadminds/mindkit/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      // Add the color scheme and other configurations from mindkit
      // See tailwind.config.js in the package for the full configuration
    },
  },
  plugins: [require('tailwindcss-animate')],
};

• Import the styles in your main CSS file:

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

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

Usage

Basic Example

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:

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

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

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

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:

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

: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 - Unstyled, accessible UI primitives
• Tailwind CSS - Utility-first CSS framework
• Lucide - Beautiful & consistent icon pack
• Recharts - Composable charting library