Introduction
Introduction
Codervent UI Blocks is a collection of 110+ production-ready components built on shadcn/ui and Tailwind CSS. They work in any React project — whether you're using Next.js App Router, Next.js Pages Router, or plain React with Vite.
110+ Blocks
Across 18 categories, from auth to charts.
Framework agnostic
Works with Next.js and React + Vite.
Copy & paste
No CLI, no registry. Just copy the source.
Prerequisites
Before using any block you need:
| Dependency | Version | Notes |
|---|---|---|
| React | 18+ | Hooks required. Works with React 19. |
| Tailwind CSS | v3 or v4 | Both versions supported. |
| shadcn/ui | latest | Run npx shadcn@latest init first. |
| TypeScript | optional | All blocks are typed but JS works too. |
| Recharts | 2+ | Only needed for Chart blocks. |
What's included
Authentication pages (login, register, forgot password)
Sidebar layouts with collapsible navigation
Responsive navbars with mega-menu dropdowns
34 stats card variants with trend indicators
Sparkline KPI cards with embedded charts
Advanced stats and data widgets
12 Recharts-powered chart components
Sortable, filterable, paginated data tables
Form layouts with validation states
Alert and notification components
List groups with avatars and badges
Image cards for blogs and portfolios
Account settings and profile pages
Chat, invoice, and file manager pages
Error pages: 404, 500, maintenance