Templates & UI Blocks

Copy-Paste Ready Templates for Real Projects

These templates are designed around how you actually build: portfolio, tutorials, tools, dashboards and full pages. Use them to move faster from roadmap → code → live project.

Next.js · React · Tailwind · shadcn/uiBeginner to Advanced templatesBuilt for CodeWithHappy ecosystem

How to use these templates

  1. Filter by category, difficulty and tech stack based on your current project.
  2. Select a template that matches your need (e.g. Portfolio Hero, Project Cards, Tools Grid).
  3. Use Copy ID to copy the template identifier and map it to a real component file in your codebase (see snippetPath).
  4. Open the referenced file (e.g. components/templates/hero-portfolio-1.tsx) and customise text, colors, and layout as needed.

Over time, you can turn this into a full private UI kit: add the actual components behind each template ID and reuse them across projects.

Search
Showing 16 templatesTip: Start with full page starters, then swap sections with more specific templates.

Portfolio Starter – Hero + Projects + About + Contact

Full personal portfolio layout: hero section, projects grid, about block and contact call-to-action. Perfect starting point for devs building their first serious portfolio.

Full PageIntermediatePopular
Next.jsTailwindshadcn/ui

Best for:

  • Personal Portfolio
  • Freelancer site

Suggested file: components/templates/portfolio-starter-1.tsx

Ready to use
Map this ID to component

Learning Platform Starter – Tutorials + Roadmap

Landing hero + tutorials/blog listing + roadmap preview. Designed for creators running a learning platform with articles, videos and guides.

Full PageAdvancedNew
Next.jsTailwindshadcn/ui

Best for:

  • Tutorial Platform
  • Content Creator
  • Blog
Coming soon

Tools Hub Starter – Games & Tools Listing

Grid-based layout for listing mini-tools and games with tags, difficulty and quick access buttons.

Full PageIntermediateRecommended
Next.jsReactTailwind

Best for:

  • Developer Tools Hub
  • Games & Experiments

Suggested file: components/templates/tools-hub-starter-1.tsx

Ready to use
Map this ID to component

Hero – Personal Portfolio (CodeWithHappy Style)

Two-column hero with name, tagline, CTAs (View Projects, View Roadmap) and a subtle glow card for branding.

HeroBeginnerPopular
Next.jsTailwind

Best for:

  • Portfolio
  • About Me sections

Suggested file: components/templates/hero-portfolio-1.tsx

Ready to use
Map this ID to component

Hero – Learn · Build · Share

Center-aligned hero for learning platforms with primary CTA (Start Roadmap) and secondary CTA (Browse Templates).

HeroIntermediate
Next.jsTailwindshadcn/ui

Best for:

  • Learning Platform
  • Resource Library

Suggested file: components/templates/hero-learning-1.tsx

Ready to use
Map this ID to component

Project Cards – 3 Column Grid

Responsive project grid with title, short description, tech badges, and Live / GitHub buttons. Similar to your existing Projects page but cleaner and more reusable.

ProjectsIntermediateRecommended
ReactTailwind

Best for:

  • Project section
  • Case study listing

Suggested file: components/templates/project-cards-grid-1.tsx

Ready to use
Map this ID to component

Featured Project Highlight

Large single project highlight block with image/preview area, key metrics and prominent CTA.

ProjectsIntermediate
Next.jsTailwind

Best for:

  • Main portfolio page
  • Landing feature
Coming soon

Tutorial / Blog Cards – With Tags & Read Time

Card layout for tutorials with title, small description, tags (e.g. JavaScript, React), and estimated read time.

Blog / TutorialsBeginner
ReactTailwind

Best for:

  • Tutorials page
  • Blog index

Suggested file: components/templates/tutorial-cards-1.tsx

Ready to use
Map this ID to component

Article Layout – Clean Reading Experience

Centered article layout with title, meta, table of contents sidebar (optional) and readable typography.

Blog / TutorialsIntermediate
Next.jsTailwind

Best for:

  • Blog post
  • Detailed guides
Coming soon

Tools & Games Grid

Grid of tool/game cards with category, difficulty and quick-launch button. Matches your Games & Tools concept.

Tools & GamesIntermediatePopular
ReactTailwind

Best for:

  • Mini tools collection
  • Games listing

Suggested file: components/templates/tool-card-grid-1.tsx

Ready to use
Map this ID to component

Roadmap Stage Cards

Stack of roadmap stage cards with title, duration, focus and progress indicator. Similar to your full roadmap but in a compact UI.

RoadmapIntermediate
ReactTailwind

Best for:

  • Roadmap preview
  • Dashboard summary

Suggested file: components/templates/roadmap-stage-cards-1.tsx

Ready to use
Map this ID to component

Dashboard – Stats + Mini Cards Row

Row of KPI cards for views, users, signups etc. Clean, minimal and reusable across admin pages.

DashboardIntermediateNew
ReactTailwindshadcn/ui

Best for:

  • Admin panel
  • Analytics overview

Suggested file: components/templates/dashboard-stats-1.tsx

Ready to use
Map this ID to component

Dashboard Layout – Sidebar + Topbar

Standard admin layout with sidebar navigation and topbar actions. Good starting point for any internal tool.

DashboardAdvanced
Next.jsTailwindshadcn/ui

Best for:

  • Internal tools
  • Admin dashboards
Coming soon

Auth – Centered Login/Signup Card

Auth card with email/password fields, CTA, link to forgot password and optional social login buttons.

Auth & FormsIntermediate
ReactTailwindshadcn/ui

Best for:

  • Login pages
  • Signup modal

Suggested file: components/templates/auth-card-1.tsx

Ready to use
Map this ID to component

CTA Section – Learn · Build · Share

Centered CTA panel designed to send users towards roadmap, library or contact page.

CTA & FooterBeginner
ReactTailwind

Best for:

  • End of page CTA
  • Landing call-to-action

Suggested file: components/templates/cta-section-1.tsx

Ready to use
Map this ID to component

Footer – Minimal with Social Links

Simple footer with copyright, social icons and quick links. Matches modern developer portfolio aesthetics.

CTA & FooterBeginner
ReactTailwind

Best for:

  • Global footer
  • Landing pages

Suggested file: components/templates/footer-1.tsx

Ready to use
Map this ID to component

Over time, this page can evolve into a full design system for your ecosystem – tutorials, projects, tools, admin dashboards, everything sharing the same components.

If you ship a new project or layout that people love, you can promote it into a template here so others can use it too. This keeps the page fresh and makes your site more valuable over time.