Minikit is a copy-paste component registry for building mini creative tools — dither editors, screenshot annotators, colour pickers, mockup makers, export utilities.
shadcn is for apps. Minikit is for tools. The component set, default aesthetic, and docs are calibrated for someone building a focused little tool for a specific creative task — not a dashboard or marketing site.
Built on
Minikit is not a from-scratch UI framework. It is a curated component layer on top of a small, modern stack — the same foundations most React tool apps already use.
- React 19 + TypeScript — all components are
"use client"and controlled. You own the state; Minikit renders the control surface. - Tailwind CSS 4 — utility classes for layout and sizing. No separate component CSS files to import beyond theme tokens.
- Radix UI — accessible primitives where it matters (Dialog, Select, Tabs, Popover, Checkbox, and others). Radix handles focus traps and keyboard behaviour; Minikit styles them to match the tool aesthetic.
- CSS variables (
--mk-*) — all colour, spacing, and typography flow through tokens. Rebrand without editing component source. See Theming. - shadcn-style registry — copy-paste source, a JSON manifest, and a CLI (
@mikeyi2a/minikit-cli) that pulls files into your project. Or skip the copy step and import via@mikeyi2a/minikit-ui.
The docs site itself is Next.js 15 (App Router). Your app can be Next.js, Vite, or any React setup — you only need React, Tailwind 4, and the theme CSS.
What you get
- 38 components across core controls, inputs, layout, canvas, and feedback
- CSS variable theming (
--mk-*tokens) - Live demos + copy-paste source for every component
llms.txtso AI agents know how to compose tools
Documentation
- Live site: minikit-flax.vercel.app
- npm:
@mikeyi2a/minikit-ui(import) ·@mikeyi2a/minikit-cli(copy-paste) - Registry JSON: /r/registry.json
Components
38 components with live demos and props tables. Browse all →
Core
- SegmentedControl — Compact mode switcher / tab bar.
- Slider — Value slider with label, hint, ticks, readout.
- DualSlider — Two-handle range slider.
- NumberStepper — +/− numeric input with keyboard support.
- ColorPicker — Swatches, hex input, eyedropper.
- Badge — Hint chip or status label.
- Tooltip — Shortcut-aware hover tooltip.
Input
- Toggle — On/off switch for tool options.
- Select — Dropdown for formats, presets, modes.
- Button — Primary, secondary, ghost, danger + IconButton.
- TextInput — Single-line text field.
- Checkbox — Multi-option toggles.
- RadioGroup — Single choice from a list.
- CoordinateInput — X/Y position pair.
- PresetPicker — Preset chip grid with add slot.
- FieldGroup — Label + control layout wrapper.
Layout
Tool / Canvas
- Toolbar — Tool-mode icon strip — select, draw, annotate. H or V.
- Dropzone — File drop with preview.
- CompareSlider — Before/after image compare.
- CanvasFrame — Output preview with zoom + bg.
- ExportButton — Export with loading states.
- LayerList — Layer stack with visibility + reorder.
- Timeline — Animation timeline with keyframes, shots, and playback.
Feedback
- Dialog — Modal for settings or confirmations.
- Popover — Anchored contextual panel.
- EmptyState — Placeholder when nothing loaded.
- ProgressBar — Determinate or indeterminate progress.
- StatusBar — Bottom info strip (dims, zoom, status).
- Toast — Ephemeral success/error message.
Usage guidelines
- Use for focused creative tools: Minikit components are designed for single-purpose tools — image editors, annotators, export utilities — not full application shells.
- Three install paths: npm package (fastest), CLI (own the source), or manual copy from any component page.
- Theme with CSS variables: Override
--mk-*tokens to rebrand. Setdata-theme="tool-dark"on<html>for the default aesthetic.