@mikeyi2a/minikit-ui

v0.1.10

Published

17 hours ago

Minikit UI components for mini creative tools

0High
0Medium
0Low

mikeyi2a

@mikeyi2a/minikit-ui

React components for mini creative tools — sliders, panels, dropzones, timelines, and more.

Live docs: https://minikit-flax.vercel.app
Copy-paste alternative: @mikeyi2a/minikit-cli

Install

npm install @mikeyi2a/minikit-ui

Peer dependencies: React 19+, Tailwind CSS 4+, and Radix UI packages as needed per component.

Setup

Minikit components use Tailwind utility classes for sizing, layout, and typography. Tailwind v4 does not scan node_modules by default, so without an explicit @source registration the components render with only their inline-style fallback (no sizing, no centering, no flex). The setup is two lines:

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

The tailwind.css import registers the package's compiled output with your Tailwind build — no path math, no editor config.

If you prefer to register the source yourself instead of importing the file:

/* app/globals.css — manual equivalent */
@import "tailwindcss";
@source "../node_modules/@mikeyi2a/minikit-ui/dist";
/* (path is relative to this CSS file; adjust the `..` count if your
   app is deeper than one level from node_modules) */

Then in your root layout:

// app/layout.tsx
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>
  );
}

import { Slider, ColorPicker, CanvasFrame } from "@mikeyi2a/minikit-ui";

<Slider label="Opacity" value={80} onValueChange={setOpacity} min={0} max={100} />

Components (38)

Full demos, props tables, and copy-paste source: https://minikit-flax.vercel.app

Core

SegmentedControl, Slider, DualSlider, NumberStepper, ColorPicker, Badge, Tooltip

Input

Toggle, Select, Button, TextInput, Checkbox, RadioGroup, CoordinateInput, PresetPicker, FieldGroup

Layout

Sidebar, Panel, Drawer, SplitView, Tabs, Accordion

Tool / Canvas

Toolbar, Dropzone, CompareSlider, CanvasFrame, ExportButton, LayerList, Timeline

Feedback

Dialog, Popover, EmptyState, ProgressBar, StatusBar, Toast

Composed examples (docs only)

Image Tool · Floating Tool · Panel Preview

Theming

Override --mk-* CSS variables. Presets: data-theme="tool-dark" (default), "light", "dark".

See https://minikit-flax.vercel.app/docs/theming

When to use CLI instead

If you want to own and edit component source (shadcn-style), use the CLI:

npx @mikeyi2a/minikit-cli init
npx @mikeyi2a/minikit-cli add slider

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@mikeyi2a/minikit-ui

Install

Setup

Components (38)

Core

Input

Layout

Tool / Canvas

Feedback

Composed examples (docs only)

Theming

When to use CLI instead

Links