Minikit — Docs

Three ways to use Minikit: npm package, CLI copy-paste, or manual copy from the docs.

Prerequisites

React 19+ and Tailwind CSS 4+. The npm package relies on Tailwind to generate utility classes from the package source — without it, components fall back to inline styles only (no sizing, no layout).

npm package — 3 steps

Step 1 — install

npm install @mikeyi2a/minikit-ui

Step 2 — add to globals.css

Copy both lines into your globals.css, in this order:

/* app/globals.css */
@import "tailwindcss";
@import "@mikeyi2a/minikit-ui/tailwind.css";

The second line registers the package’s utility classes with your Tailwind build. Without it, components render with inline-style fallback only — no flex layout, no sizing, no typography.

Step 3 — import the theme in your layout

// app/layout.tsx — import before globals.css
import "@mikeyi2a/minikit-ui/styles.css";
import "./globals.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="tool-dark">
      <body>{children}</body>
    </html>
  );
}

That’s it. No manual copying required.

CLI — copy-paste into your project

npx @mikeyi2a/minikit-cli init

npx @mikeyi2a/minikit-cli add slider

Fetches from the hosted registry and resolves transitive dependencies (e.g. toolbar also installs tooltip). See the CLI readme on npm.

Manual — if not using npm or CLI

Add Tailwind CSS 4+ to your project
Copy theme tokens from src/app/globals.css in the repo, or import @mikeyi2a/minikit-ui/styles.css
Copy src/lib/utils.ts from the repo
Copy the component file from any component page (click Show code)
Set data-theme="tool-dark" on <html>
Install peer deps if needed (Radix packages listed in source imports)

Dependencies

Core: React 19, Tailwind 4, clsx, tailwind-merge
Optional: Radix UI primitives for accessible Dialog, Select, Tabs, Popover, Checkbox, and other overlays

All components

35 installable via CLI · 38 total including composed demos.

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

Sidebar — Docked collapsible control column.
Panel — Docked or floating draggable panel.
Drawer — Slide-over panel from edge.
SplitView — Resizable before/after split.
Tabs — Horizontal tabbed sections.
Accordion — Collapsible control sections.

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.

Composed examples

Floating Tool — Composed demo — floating Panel + presets + StatusBar + Toast.
Image Tool — Sidebar tool — Dropzone + Sliders + CanvasFrame + Export.
Panel Preview — Camera-controls-style docked panel.