React app screens and page blocks for Tailwind CSS
Blocks are complete screens composed from the library's components, ready to adapt to your data. For back offices there are Admin Shell, Admin Dashboard Page, KPI Dashboard, Settings Page and Users Admin Page; for sign-in, Login Page and Register Page; and for CRMs, CRM Contact Page, CRM Pipeline Page, Automation Builder Page and Invoice Page. Marketplace blocks cover a whole buying flow: Marketplace Shell, Marketplace Home Page, Marketplace Search Page, Listing Detail Page, Post Listing Wizard, Inbox Page and Checkout Page, plus Mobile App Home and Onboarding Flow for a phone app.
All Blocks[23]
Onboarding Flow
A marketplace app's first run: welcome slides, a calm ask for notifications and location, a short profile, preferences and a finish.
Login Page
The sign-in screen of Northwind CRM: password, email link or code, Google / Apple / Microsoft, two-step codes and the whole password recovery.
Marketplace Home Page
The Northwind Market home: a search for what and where, category tiles, a promoted rail, new listings near you, trust points and an app band.
Mobile App Home
The home screen of a marketplace phone app: large title, search, story circles, quick actions, recommended ads, feed tabs and a tab bar.
Admin Dashboard Page
The home of a back office: greeting and period, four KPIs, revenue against the previous period, recent orders, alerts and team activity.
Admin Shell
The back office layout of Summit CRM: a sidebar with workspaces, a top bar with search and notifications, a command menu and phone tabs.
AI Chat Page
A full AI assistant screen: the conversation history, a streaming thread with reasoning and tools, a composer and the plan's usage.
Automation Builder Page
The CRM automations screen: rules with on / off switches and run health, a visual workflow editor with a cron inspector, tests and run logs.
Checkout Page
The Summit Market shop from the cart to Order placed: an editable cart, four checkout steps and the order confirmation.
CRM Contact Page
A CRM company record page: header with facts and actions, tabs for overview, activity, deals, files and notes, and a details side panel.
CRM Pipeline Page
A CRM deals pipeline page: pipeline switcher, search and filters, a board or list with totals, a deal sheet and a new deal dialog.
Error Pages
Five error screens in one block: not found, server error, scheduled maintenance, offline and no permission, full page or inside a shell.
Inbox Page
Northwind Market messages: conversations about your listings and the ones you asked about, with the listing pinned on top, offers, photos, voice notes.
Invoice Page
An invoice editor and viewer for Romanian B2B: client, series, dates, VAT lines, totals, an A4 preview, sending and e-Factura status.
KPI Dashboard
The first screen of a back office: KPI tiles with deltas, revenue against the last period, sources, funnel, top sellers, invoices, activity.
Listing Detail Page
A listing on Northwind Market: photos, price, details, description, an approximate map, the seller, safety tips, contact actions and similar listings.
Marketplace Search Page
The Northwind Market results page: title and count, facets in a sidebar or phone sheet, filter chips, sort, grid or list and endless results.
Marketplace Shell
The Northwind Market site layout: a header with one search for what and where, a category strip, the footer, phone tabs and cookie consent.
Post Listing Wizard
Posting an ad on a marketplace in seven steps: category, details, photos, price, place, contact and a preview, with an autosaved draft.
Pricing Page
The pricing page of a SaaS: hero, plans with a monthly or yearly and dollar or euro switch, comparison, quotes, FAQ and a closing call.
Register Page
The sign-up screen of a CRM: account with password rules, company details from the CUI, email code and a welcome step.
Guides
Tutorials and guides from the blog that use these blocks.
Building UI with AI agents
Claude Code shadcn Setup: MCP Server, Skill and CLAUDE.md
Claude Code shadcn setup, tested on shadcn 4.21.4: the MCP server, the skill, a second registry in its own folder, a CLAUDE.md block and prompts that work.
12 min read
Building UI with AI agents
Component Library MCP: Make Agents Use Real Components
How a component library MCP server, rules files, llms.txt and a registry get Claude Code, Cursor and Codex to install real components instead of guessing.
25 min read
Build it: screens and apps
E-Factura VAT Calculation in TypeScript and React
E-Factura VAT calculation in TypeScript: Romania's 21% and 11% rates, VAT rounded once per rate, the totals ANAF checks to the cent and a React line editor.
11 min read
Build it: screens and apps
Nextjs Admin Dashboard Tutorial: 5 Screens, Phone-Ready
A nextjs admin dashboard tutorial for the App Router: app shell, KPI home, server-side data tables, settings and team pages, each one usable on a phone.
19 min read
Building UI with AI agents
React AI Chat UI: Streaming, Auto-Scroll and Mobile
How a production React AI chat UI handles streaming, auto-scroll, IME input and the phone keyboard, part by part, with code for the Next.js App Router.
10 min read
Mobile UI in React
React PWA Install Prompt for Chrome, Edge and iPhone
Build a React PWA install prompt in Next.js: catch beforeinstallprompt in Chrome and Edge, show Add to Home Screen steps on iPhone, and know when not to ask.
9 min read
About Blocks
AI Chat Page puts the AI Kit together into one assistant screen, Pricing Page is a complete SaaS pricing page, and Error Pages bundles not found, server error, maintenance, offline and no permission screens. Each block lists the components it is built from, and installing it pulls them in. Every block is laid out for phones as well as desktops: forms fill the screen, sidebars become drawers and tabs, and pickers open as bottom sheets. All 23 blocks are part of Pro. Their docs, props and live previews are open to everyone.