Guides
How to build real interfaces with React, Next.js and Tailwind CSS v4, written by the team that draws MiniDev UI. Every guide uses code you can install today.
8 min readThe best free shadcn/ui component libraries in 2026Ten free shadcn/ui compatible component libraries compared: what each is best at, license notes, primitives and links, so you can pick the right mix.Read the guide13 min readBuild a landing page in Next.js with shadcn-compatible blocksBuild a Next.js landing page from free shadcn-compatible blocks: section order, copy that converts, performance, and metadata and structured data for SEO.Read 18 min readBuild a SaaS dashboard in Next.js with free componentsBuild a SaaS dashboard in Next.js App Router with free React components: app shell, sidebar nav, KPI cards, charts, a data table, and empty and loading states.Read 19 min readBuild a React data table with TanStack Table and TailwindBuild a React data table with TanStack Table v8 and Tailwind: sorting, search, filters, pagination, row selection, bulk actions and column visibility.Read 23 min readAI chat UI in React: streaming messages, tool calls and reasoningBuild an AI chat UI in React: stream tokens with a ReadableStream reader, render reasoning and tool calls, auto scroll, stop and retry. Works with any provider.Read 14 min readBuild a SaaS pricing page in React and TailwindBuild a React pricing page with Tailwind: plan data, a monthly and yearly toggle with animated prices, a featured plan, a comparison table, FAQ and a11y.Read 17 min readBuild a billing page in Next.js with StripeBuild a SaaS billing page in Next.js with Stripe: plans, usage, invoices, payment methods and cancellation, loaded on the server and kept in sync by webhooks.Read 17 min readBuild a collapsible sidebar layout for a SaaS appBuild a collapsible React sidebar layout in Next.js: active links with usePathname, a Cmd+B shortcut, collapsed state saved in a cookie and a mobile drawer.Read 13 min readDesign a SaaS settings page that scalesDesign a SaaS settings page in React that scales: information architecture, autosave vs explicit save, team roles, API keys and safe destructive actions.Read 21 min readAdd a Cmd+K command palette to your React appAdd a Cmd+K command palette to React or Next.js: a global shortcut, grouped commands, fuzzy search, recent items, router navigation and combobox accessibility.Read 21 min readBuild a kanban board in React with drag and dropBuild a React kanban board with drag and drop using dnd-kit: sortable cards, moves between columns, keyboard dragging, announcements and optimistic updates.Read 13 min readOTP input in React: paste, autofill and accessibilityBuild a React OTP input that handles paste, SMS autofill, WebOTP and screen readers, with validation, a resend timer and a two-factor verify form in Tailwind.Read 17 min readFile upload in React: dropzone, progress and previewsBuild file upload in React with a drag and drop dropzone, accept rules, real upload progress, presigned S3 URLs, cancel and retry, and image previews.Read 11 min readToast notifications in Next.js: when and howAdd toast notifications to Next.js: mount one Toaster, call toast() from client components and after server actions, add undo, and keep toasts accessible.Read 9 min readHow to install components from a custom shadcn registryInstall shadcn components from any registry URL: what the item JSON contains, how registryDependencies resolve, components.json setup and common fixes.Read 10 min readMigrating a component library to Tailwind CSS v4Migrate a component library to Tailwind CSS v4: CSS-first config with @theme, the upgrade tool, renamed utilities, border and ring defaults, and OKLCH tokens.Read 13 min readDark mode in Next.js without the flashFix the dark mode flash in Next.js with a blocking head script, suppressHydrationWarning, a Tailwind v4 dark variant, system preference and theme-color.Read 14 min readOKLCH colors in Tailwind CSS v4: a theme that works in light and darkBuild a Tailwind CSS v4 color theme in OKLCH: semantic tokens with @theme inline, dark mode by redefining variables, and contrast checks you can run in code.Read 11 min readGlassmorphism in Tailwind CSS v4: frosted glass that stays readableBuild frosted glass in Tailwind CSS v4 with backdrop-blur and translucent fills, keep text readable, control the cost of backdrop-filter and add fallbacks.Read 13 min readRealistic CSS shadows that follow a light sourceBuild realistic CSS box shadows from layered, tinted shadows, drive their direction with CSS variables, and move one light source with a small pointer script.Read 12 min readBuild a split-flap display (Solari board) in ReactBuild a split-flap departure board in React: character cycling, two-half flaps with rotateX and perspective, column stagger, reduced motion and screen readers.Read