Minidev

Overview

MiniDev UI is a free, MIT-licensed library of React and Tailwind CSS v4 components for product interfaces. The site counts 397 UI components, 43 full-page blocks and 108 motion moments, plus 8 full landing page templates with working product UI inside, such as a transfer app, a booking flow, an agent run and a cart.

Every component is written against a shared token set, so one data-material attribute switches the look between four materials: hairline, glass, metal and paper. Components can be installed from npm as minidev-ui-kit, copied as single files, or pulled through the shadcn registry. Moving parts run on tuned springs built with motion and respect reduced-motion settings.

Features

• 20 categories: Forms, buttons, data tables, charts, navigation, dialogs, toasts, AI chat UI, auth, billing, settings, dashboards, landing sections, e-commerce, developer tools, email templates, layout, media, and kanban/workflow components.
• Four materials: Hairline, glass, metal and paper styles share the same markup and switch with a single attribute.
• Product templates: Eight landing pages, including Lumen (AI SaaS), Ponte (fintech app) and Hale (DTC product).
• AI chat UI: Message threads, streaming text, prompt input with attachments, tool calls, reasoning blocks, citations and a model picker.
• Blueprint mode: Holding Option on the site reveals component specs, and the same spec is published in llms.txt for AI agents.
• Theming in CSS: Tokens live in CSS variables, so theming is a variable change, and both light and dark themes meet AA contrast.
• Free tools: Box shadow generator, shadcn theme generator, contrast checker and SVG-to-JSX converter.

Tech stack

• React, Tailwind CSS v4, Base UI, motion, lucide-react, shadcn registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @minidev/component-name