Every UI kit is flat.
This one is lit.
One light crosses the page and all 548 free React components catch it: shadows swing, glass frosts, metal glints. Pick a material and the whole kit changes with it. Blocks, templates and brand kits included. MIT, Tailwind CSS v4, shadcn-compatible.
Move your cursor, it is the light. Then switch the material.The light drifts on its own. Switch the material.
Team
Most picked$24/ seat / mo
Notifications
Revenue, last 30 days
$48,290
Customers
1,391
Churn
2.1%
ARPU
$34.70
Team
6 of 10 seatsTemplates
Whole products, not just pages.
8 full landing pages with working product UI inside: a transfer app, a booking flow, an agent run, a cart. Open one and click around.
Materials
Same code. Four materials.
Every component speaks in tokens, so a material is one attribute: data-material="metal" on any element. The four panels below run the exact same markup. Change the plan in one and watch all four.
Hairline
hairlineRevenue
+12%$48,290
Auto-reminders
3 days before due
Unlit. 1px lines, quiet depth. For products that should disappear.
Glass
glassRevenue
+12%$48,290
Auto-reminders
3 days before due
Frosted, translucent, lit from your cursor. Colour moves behind it.
Metal
metalRevenue
+12%$48,290
Auto-reminders
3 days before due
Brushed aluminium, bevels that turn with the light, machined thumbs.
Paper
paperRevenue
+12%$48,290
Auto-reminders
3 days before due
Warm stock, real grain, long soft shadows. Editorial and calm.
01 / 04
Every screen is a stack of decisions.
02 / 04
Five layers. Every value is a token.
03 / 04
Nothing floats. Nothing is guessed.
04 / 04
Put back together, it is just your product. Try 7d, 30d, 90d.
Northwind / Overview
Revenue
+12.4%$48,290
Active customers
+3.1%1,391
Churn
-0.4%2.1%
Revenue
Net of refunds, in USD
Activity
- JLJordan paid INV-20412m
- SRSam upgraded to Team18m
- AKRefund issued to Globex1h
- MWNew customer: Initech3h
Northwind / Overview
Revenue
+12.4%$48,290
Active customers
+3.1%1,391
Churn
-0.4%2.1%
Revenue
Net of refunds, in USD
Activity
- JLJordan paid INV-20412m
- SRSam upgraded to Team18m
- AKRefund issued to Globex1h
- MWNew customer: Initech3h
Northwind / Overview
Revenue
+12.4%$48,290
Active customers
+3.1%1,391
Churn
-0.4%2.1%
Revenue
Net of refunds, in USD
Activity
- JLJordan paid INV-20412m
- SRSam upgraded to Team18m
- AKRefund issued to Globex1h
- MWNew customer: Initech3h
Northwind / Overview
Revenue
+12.4%$48,290
Active customers
+3.1%1,391
Churn
-0.4%2.1%
Revenue
Net of refunds, in USD
Activity
- JLJordan paid INV-20412m
- SRSam upgraded to Team18m
- AKRefund issued to Globex1h
- MWNew customer: Initech3h
Northwind / Overview
Revenue
+12.4%$48,290
Active customers
+3.1%1,391
Churn
-0.4%2.1%
Revenue
Net of refunds, in USD
Activity
- JLJordan paid INV-20412m
- SRSam upgraded to Team18m
- AKRefund issued to Globex1h
- MWNew customer: Initech3h
- UI components
- 397
- full-page blocks
- 43
- motion moments
- 108
- themes, one token set
- 2
- contrast, both themes
- AA
- MIT, free forever
- $0
Physics
Things that move have mass.
AI can write a component in seconds. It cannot make one feel right. Every moving part here runs on a tuned spring, keeps its identity while it moves, and holds still for anyone who asks for reduced motion.
MorphPanel
The button becomes the panel
One surface stretches on a spring. Corners ease from 10 to 16px. Nothing pops.
NumberRoll
Numbers roll, not swap
Only the digits that changed move. Columns keep their place as the number grows.
Team
$24/ seat / mo
Billed $288 per seat yearly
SegmentedControl + NumberRoll
Price changes you can follow
The thumb glides, the discount badge lights, and the price counts to its new value.
Try 424242, or anything else.
OtpInput
Wrong answers shake
One real input under painted slots. Paste and SMS autofill just work.
Live, not screenshots
Built for the screens people live in.
Every tile below is the real component, running. Type in the composer, select rows, flip the billing cycle.
AI surfaces
Composer, reasoning, tool calls, streaming
Starter
$0/mo
Pro
$15/mo
Scale
$39/mo
Data
Selection, bulk actions, status
Billing
Plans, cycles, checkout
Settings
Preferences that save themselves
Command
Keyboard-first navigation
Auth
Sign in, sign up, 2FA, magic links
Sign in to Lumen
Welcome back. Pick up where you left off.
Charts
Area, line, bar, sparklines
12,480
+18.2%Signups this week · hover a bar
Blueprint
The spec ships with the component.
Hold ⌥ on any page of this site and hover anything. You get the box, the padding, the gaps, the radius, the type, and the exact token classes it was built from. Off-grid values get flagged. Your AI agent reads the same spec from llms.txt.
The hairline standard
Details you feel
before you notice them.
Six rules every component follows. They are why a settings page built with MiniDev UI reads as expensive, and one built without it reads as a template.
One pixel, two lights
Solid controls carry a top highlight and a bottom key edge. Depth comes from light, not blur.
Radii that nest
Inner radius equals outer radius minus padding. Concentric corners are the first thing a designer checks.
+0.005em
−0.018em
−0.03em
Tracking tightens with size
Every size ships with its own letter-spacing, so headings never look loose and body text never looks cramped.
Exit is faster than entry
200ms in, 160ms out, on curves tuned for interfaces. Tap the rail to feel the difference.
Tokens, not hex
Components speak in semantic OKLCH tokens. Change the accent or flip the theme and nothing else needs to move.
Every state, drawn
Rest, hover, focus, pressed, busy and disabled are designed, not left to browser defaults. None of them shift layout.
Copy. Paste. Own it.
No lock-in. The code is yours.
Install the package, or copy one file and change anything. There is no runtime, no theme provider, no wrapper to fight.
Your AI already knows it.
Point Cursor, Claude or any agent at /llms.txt. Every component and its import, in one file a model can read.
- 01
Install
One package. React, Tailwind v4 and Base UI are the only peers.
bashnpm i minidev-ui-kit - 02
Import
Every component is a single file you can also copy straight into your repo.
tsximport { Button } from "minidev-ui-kit/ui/button" import { DataTable } from "minidev-ui-kit/ui/data-table" - 03
Ship
Tokens live in CSS, so theming is a variable change, not a rebuild.
tsxexport default function Billing() { return <Button size="lg">Upgrade to Team</Button> }
Index
Everything, one hairline apart.
- 01React form componentsInputs, selects, comboboxes, OTP, date and currency fields, with labels, errors and dark mode built in
- 02React button componentsPrimary, accent, outline and ghost variants, icon buttons, split buttons, button groups, toggles and copy buttons
- 03React data table componentsSortable headers, row selection, bulk actions, inline edit, column visibility, filters, pagination and loading states
- 04React chart componentsArea, line, bar, stacked, donut, gauge, radar, funnel and heatmap charts with legends, tooltips and dark mode
- 05React navigation componentsSidebars, top bars, tabs, breadcrumbs, command palettes, pagination, mega menus and mobile drawers
- 06React dialog, drawer and popover componentsDialog, alert dialog, drawer, sheet, popover, dropdown menu, context menu and hover card with focus trapping and escape handling
- 07React alerts, toasts and empty statesToasts, alerts, banners, callouts, progress, skeletons, spinners, and empty, error and offline states for real products
- 08AI chat UI components for ReactMessage threads, streaming text, prompt input with attachments, tool calls, reasoning blocks, citations and model picker
- 09React login and signup componentsSign in and sign up forms, magic link, social login, SSO, password reset, OTP and two factor setup screens
- 10React pricing and billing componentsPricing tables, monthly and yearly toggles, plan cards, checkout, invoices, payment methods, usage meters and cancel flows
- 11React settings page componentsProfile forms, team members, roles and permissions, API keys, integrations, SSO, audit logs and danger zones for SaaS apps
- 12React dashboard componentsKPI cards, stat sparklines, activity feeds, goal rings, onboarding checklists and complete dashboard page blocks
- 13Landing page sections for React and TailwindHeroes, feature grids, bento layouts, testimonials, logo clouds, pricing, FAQ, CTA bands and footers
- 14Animated React componentsMarquees, split-flap boards, number rolls, tilt cards, text effects, spotlight panels and scroll reveals
- 15React e-commerce componentsProduct cards, cart line items, quantity steppers, coupon inputs, shipping address, order summary and checkout blocks
- 16Developer tool UI components for ReactCode blocks, terminals, diffs, logs, stack traces, JSON viewers, CI pipelines, API keys, webhooks and status pages
- 17React email templatesLayout, header, footer, buttons and complete welcome and receipt emails, designed to match your product UI
- 18React layout componentsCards, containers, stacks, clusters, grids, accordions, resizable panels, split panes and app shells
- 19React media and upload componentsFile dropzone, image upload, galleries, lightbox, carousel, avatars, audio player and video player chrome
- 20React kanban, timeline and workflow componentsKanban boards, issue cards, timelines, steppers, approvals, comment threads, assignees, due dates and priority pickers
Stop rebuilding
the boring parts.
Settings pages, invoice tables, sign-in flows, chat composers. They are already drawn. Spend your week on the part only you can build.