Made with this awesome $10 Coding AI + OpenCode 🚀 (+10% off via this link!)
Stop burning tokens. Build faster.
MintUI isn’t just another UI kit. It’s a productivity framework for Nuxt 4 + TailwindCSS, engineered to be as light on your codebase as it is on your LLM budget.
-
Token-Efficient: Building frontends from scratch drains your AI credits. MintUI provides a rock-solid foundation that your AI (Copilot, Claude, Cursor) understands instantly through its built-in MCP server.
-
The "White-Label" Starter: Use it out of the box, or gut it to launch your own NPM library in minutes—with a built-in component showcase and OIDC publishing already wired up.
-
Opinionated UX: My personal component set. Compact, modern, and zero-fluff. Built for devs who want to ship, not fiddle with CSS variables all day.
Less is more — focused on UX.
npm install mintuiAdd the module to your nuxt.config.ts:
export default defineNuxtConfig({
modules: ['mintui/nuxt'],
});Components are auto-imported with the Ui prefix. CSS is injected automatically.
<template>
<UiButton variant="outline">Click me</UiButton>
<UiBadge variant="secondary">New</UiBadge>
</template>The library uses the class strategy. Add the dark class to your <html> or a parent element:
<html class="dark"></html>All components automatically adapt to light and dark themes via CSS variables.
# Install dependencies
npm install
# Start the showcase (Nuxt dev server)
npm run dev
# Build component library
npm run build:lib
# Generate static showcase
npm run generate-
Set your package name in
package.json("name": "mintui"or"@your-org/ui") -
Login to npm
npm login
-
Build & publish manually (first time, to create the package on npm)
npm run build:lib npm publish --access public
-
Set up OIDC trusted publisher directly from npmjs.com (no tokens needed)
- Go to npmjs.com → your package → Settings → Publishing access
- Under Trusted Publisher, select GitHub Actions as publisher
- Fill in: Organization/user, Repository, Workflow filename (
release.yml), Environment (prod) - Click Set up connection — npm configures the GitHub Actions OIDC trust automatically
-
Create a GitHub Environment named
prod- GitHub repo → Settings → Environments → New environment →
prod - No secrets needed — OIDC handles auth
- GitHub repo → Settings → Environments → New environment →
-
Publish a new version
npm version patch # or minor / major git push && git push --tags
Then on GitHub → Releases → Create a new release → select the tag → Publish release. The CI workflow builds and publishes to npm automatically.
See docs/publishing.md for the full guide.
The package includes an MCP server that gives your AI assistant (Copilot, Claude, Cursor) full access to component source code, props, variants, stories, and design tokens.
VS Code (Copilot) — .vscode/mcp.json:
{
"servers": {
"mintui": {
"command": "npx",
"args": ["mintui-mcp"]
}
}
}Claude Desktop — ~/Library/Application Support/Claude/claude_desktop_config.json:
{
"mcpServers": {
"mintui": {
"command": "npx",
"args": ["mintui-mcp"]
}
}
}Cursor — .cursor/mcp.json: same format as Claude Desktop.
| Tool | Description |
|---|---|
list_components |
All components with props & variants |
get_component |
Source code + stories + props for a given component |
get_usage_example |
Copy-paste usage examples for a given component |
search_components |
Keyword search across source & stories |
get_design_tokens |
CSS variables (light/dark) |
Once configured, just ask your AI: "Use the Card component from MintUI with a title and footer" — it calls the MCP tools automatically.
MIT