A minimal Next.js 14 starter template using the App Router, ShadCN/UI, type-safe environment variables, built-in icon support, and preconfigured settings. Designed for simplicity, it offers a plug-and-play setup ideal for first-time Next.js and ShadCN users.
CenSuite is a design system focused on delivering better user experiences through faster, more consistent frontends. It blends expert-crafted UI patterns from the XD team with optimized React tooling to reduce development overhead and improve design accuracy. Every component is built to be accessible, responsive, and performant—helping teams ship applications that feel cohesive, intuitive, and fast. With over 50 reusable, fully customizable components styled using centralized design tokens, CenSuite dramatically reduces developer effort while ensuring brand and UX consistency out of the box.
Contact John Tourles ([email protected]) to learn how CenSuite can streamline your next deliverable.
graph TD
%% Design Layer
A1[XD Team] --> A2[Figma: CenSuite Tokens & Components]
%% System Layer
A2 --> B1[Design Tokens]
B1 --> B2[CenSuite Component Library ShadCN-based]
B2 <--> C2
%% Application Layer
C1_App[Next.js App]
C1_App --> C2[Page & Layout Composition]
%% Deployment Layer
C2 --> D1[Static/SSR Output]
D1 --> D2[Deployment Vercel, AWS, Azure etc.]
- Node.js 20.18.0 LTS or higher
1. Clone this repository-
Install the required depdencies
pnpm install # Or package manager of choice -
Copy
.env.exampleto.env.localcp .env.example .env.local
-
Start the development server
pnpm dev
-
Build the project
pnpm build
- Next.js 14+
/approuter - TypeScript
- Tailwind CSS v3
- shadcn/ui (Radix UI + Tailwind)
- Prettier (w/ auto sort imports and tailwind classes)
- SEO optimized
- Typesafe env, icons, and config
- Ready to use - jump right into development
- v0 - v0 is a state-of-the-art AI code generation tool trained on Next.js and ShadCN. It's capable of handling screenshots and turning them into copy-and-pasteable components, pages, functions, and more.
- OpenNext - A collective initiative by AWS, Cloudflare, and Netlify to bring first-class support for Next.js to any platform.
- Lucide React - Library of SVG-based icons to simplify development."
- Next.js Summarized in 100 seconds
- ShadCN Explained
- Tailwind CSS in 100 seconds
- ZOD Schema Validation
- CenSuite Docs - Internal documentation maintained by the XD team and designed to provide better examples and clarifications than the official ShadCN docs.
- Theming crash course - Simple list of all native design variables for quick and easy reference.
- Built-in Optimizations - Next.js comes with a variety of built-in optimizations designed to improve your application's speed and Core Web Vitals.
- Next.js Docs - Official Next.js documentation.
- Learn Next.js - Guides and tutorials from the Next.js team.
- Tailwind Docs - Documentation for the CSS library powering the design system.
- TypeScript Docs - Documentation for the TypeScript language.