@quadminds/mindkit
Advanced tools
Quadminds UI Kit - A comprehensive React component library with Tailwind CSS and Radix UI
A React component library built with Tailwind CSS and Radix UI primitives. Mindkit provides accessible components, QuadMinds design tokens, theme helpers, fonts, and ready-to-use styles for modern React applications.
light, dark, and system modes.npm install @quadminds/mindkit
# or
yarn add @quadminds/mindkit
# or
pnpm add @quadminds/mindkit
Mindkit is published to the public npm registry. If your machine has a scoped registry configured, make sure @quadminds resolves to npm:
@quadminds:registry=https://registry.npmjs.org/
npm install react react-dom
React 18 or higher is required.
Install Tailwind CSS if your app does not already have it:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure tailwind.config.js with the Mindkit preset and include Mindkit in the content paths:
/** @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: {},
},
};
The preset includes Mindkit color scales, font-poppins, font-roboto, animations, tailwindcss-animate, and tailwind-scrollbar.
Mindkit no longer injects CSS from the JavaScript entrypoint. Import the CSS entrypoints from your app stylesheet.
Recommended setup:
@import '@quadminds/mindkit/base.css';
@import '@quadminds/mindkit/fonts.css';
@import '@quadminds/mindkit/styles.css';
@tailwind components;
@tailwind utilities;
Available CSS entrypoints:
@quadminds/mindkit/base.css: CSS variables, Tailwind base, body defaults, border color, and scrollbar base styles.@quadminds/mindkit/styles.css: CSS variables, fonts, Tailwind components, and utilities used by Mindkit.@quadminds/mindkit/fonts.css: only the Poppins and Roboto font imports.If your app owns its global reset/base layer, you can import only:
@import '@quadminds/mindkit/fonts.css';
@import '@quadminds/mindkit/styles.css';
Mindkit includes two primary color themes: QuadMinds Purple and QuadMinds Blue. Use data-color-theme on the root element:
<html data-color-theme="purple">
<html data-color-theme="blue">
You can switch dynamically:
const current = document.documentElement.getAttribute('data-color-theme') || 'purple';
const next = current === 'purple' ? 'blue' : 'purple';
document.documentElement.setAttribute('data-color-theme', next);
localStorage.setItem('colorTheme', next);
Use ThemeProvider when your app needs light, dark, or system mode. It is safe for SSR because it does not read localStorage during the initial render.
import { ThemeProvider } from '@quadminds/mindkit';
export function App() {
return (
<ThemeProvider defaultTheme="system" storageKey="ui-theme">
{/* Your app */}
</ThemeProvider>
);
}
useTheme() exposes:
import { useTheme } from '@quadminds/mindkit';
function ThemeStatus() {
const { theme, resolvedTheme, setTheme } = useTheme();
return (
<button onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}>
{theme} resolved as {resolvedTheme}
</button>
);
}
theme: 'light' | 'dark' | 'system'.resolvedTheme: 'light' | 'dark'.setTheme: persists the selected theme using storageKey.When theme === 'system', Mindkit applies the real light or dark class based on prefers-color-scheme and listens for system preference changes.
import { Button } from '@quadminds/mindkit';
export function Example() {
return <Button>Click me</Button>;
}
MindKit ships its guidelines inside the npm package so AI tools can read them after installation:
node_modules/@quadminds/mindkit/guidelines.mdnode_modules/@quadminds/mindkit/guidelines/README.mdnode_modules/@quadminds/mindkit/guidelines/AI_STARTER_PROMPT.mdWhen asking an AI tool to generate UI, point it to node_modules/@quadminds/mindkit/guidelines/AI_STARTER_PROMPT.md first. If the tool cannot read files directly, paste that prompt and the relevant guideline file into the chat.
CardTitle supports a compatible size prop:
import { Card, CardHeader, CardTitle } from '@quadminds/mindkit';
export function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Default title</CardTitle>
<CardTitle size="sm">Small title</CardTitle>
</CardHeader>
</Card>
);
}
default keeps the original text-2xl font-semibold leading-none tracking-tight font-poppins style. sm uses text-sm font-semibold font-poppins.
DateRangeFilter supports formatDisplay to customize the trigger label:
import { DateRangeFilter } from '@quadminds/mindkit';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';
export function Example() {
const [range, setRange] = useState<DateRange | undefined>();
return (
<DateRangeFilter
value={range}
onChange={setRange}
formatDisplay={(selectedRange, defaultLabel) =>
selectedRange ? defaultLabel : 'Seleccionar período'
}
/>
);
}
ThemeSwitch uses resolvedTheme, so it toggles correctly even when the selected theme is system:
import { ThemeProvider, ThemeSwitch } from '@quadminds/mindkit';
export function Example() {
return (
<ThemeProvider defaultTheme="system">
<ThemeSwitch />
</ThemeProvider>
);
}
Mindkit supports current versions of Chrome, Firefox, Safari, and Edge.
MIT © Quadminds
FAQs
Quadminds UI Kit - A comprehensive React component library with Tailwind CSS and Radix UI
We found that @quadminds/mindkit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A new npm package tests AI malware scanners with prompt injection, safety-triggering comments, context flooding, and obfuscated JavaScript.
Product
Socket now detects supply chain risks in project manifests, starting with missing lockfiles that can make dependency installs non-reproducible.
Research
/Security News
The trojanized extensions use TinyGo-compiled WebAssembly and Solana transaction memos to resolve command-and-control infrastructure.