TemplatesKart is an open-source collection of fully responsive and accessible Chakra UI React components and full-page projects that you copy and paste into your own Next.js applications.
What is TemplatesKart?
TemplatesKart is a UI component and project-template library built with Next.js and Chakra UI. It offers two main areas: Components Kart, a list of standalone React components (blog, cards, features, footers, forms, headers, heroes, milestones, page sections, page shells, pagination, pricing, reviews, sidebars, stacked lists, stats, testimonials), and Projects Kart, which provides full website sections you can explore and copy. The project is maintained as an open-source repository with contributions from the community, and its official website is https://templateskart.com.
What makes TemplatesKart stand out?
- Copy-paste workflow — Each component and project section can be copied directly into your app without a package install; the README directs you to copy code from the website.
- Chakra UI styling — Built on Chakra UI for accessible, themeable components that respect design tokens and dark-mode support.
- Framer Motion animations — Components include motion presets from Framer Motion for enter/exit and scroll effects.
- Next.js framework — The library targets Next.js projects, so every component is structured as React/JSX that fits into App Router or Pages Router.
- Responsive and accessible — All components are described as fully responsive and accessible in the repository description.
- 17 component categories — Includes blog, cards, features, footers, forms, headers, heroes, milestones, page sections, page shells, pagination, pricing, reviews, sidebars, stacked lists, stats, and testimonials.
- Projects Kart — Full-page/website project sections that give a complete header-to-footer look without wiring everything yourself.
Who should use TemplatesKart?
- React developers building Next.js apps who want production-ready UI sections without designing from scratch — they copy the code and adapt it to their own data.
- Front-end designers who need a starting point for landing pages or dashboards and want to preview projects before writing code.
- Open-source contributors looking to add or improve components; the repository accepts contributions.
What can you do with TemplatesKart?
- SaaS founders: quickly assemble a landing page using the Heroes, Features, Pricing, Reviews, and Footer components, then replace placeholder content with your own copy.
- Agency developers: reuse the Blog, Stats, and Testimonials sections across client sites to cut development time.
- Hobbyist builders: learn Chakra UI and React patterns by reading and modifying real component code, or use the page shells to scaffold a new project.
How does TemplatesKart work?
Browse the Components Kart or Projects Kart on the website, locate a section you like, and copy the code directly into your Next.js project. The library also encourages contributing new components to the open-source repository.
Pricing
TemplatesKart is free and open source — the repository is public, and you can copy component code and reuse it in your projects. There are no paid tiers or subscription plans mentioned in the repository.
Alternatives
- shadcn/ui — a copy-paste component library for React built on Radix UI and Tailwind CSS.
FAQ
Is TemplatesKart free?
Yes, the repository is open source, and you can copy the component code and use it without paying any license fees. Contributions are welcome.
What tech stack does TemplatesKart use?
It is built with Next.js as the framework, Chakra UI for component styling, and Framer Motion for animations. All components are React components.
Can I use TemplatesKart components in commercial projects?
You should check the LICENSE file in the repository for specific terms, since the open-source license determines commercial usage rights.
Does TemplatesKart provide whole-page templates or just components?
Both — the Components Kart offers individual sections, while the Projects Kart provides full-page project layouts you can explore and copy.
How do I install TemplatesKart?
You don't need to install anything. You copy and paste the code of a component or project from the website into your own Next.js application.
