DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for TemplatesKart | Free Chakra UI Components and Projects
Muhammad  Ahmad
Muhammad Ahmad

Posted on • Updated on • Originally published at mahmad.me

TemplatesKart | Free Chakra UI Components and Projects

Project Overview

TemplatesKart is a powerful set of fully responsive and accessible React components and projects.

Demo: TemplatesKart
Github Repo: TemplatesKart Code

How I built it

  • Framework: Next.js
  • Styling: Chakra UI
  • Animations: Framer Motion
  • Deployment: Vercel

There are 2 main sections in TemplatesKart

1. ProjectsKart (6 projects)

Currently there are 6 projects. ProjectsKart provides an easy solution to getting the look you want for your website without having to mess around with too much code. User can view project pages and copy code of components.

ProjectsKart Page
ProjectsKart Page

Project Page
Project detail page

2. ComponentsKart (40 components)

It is a list of beautiful and responsive React components to build your application. Some of these components are extracted from ProjectsKart and some are built separately.

ComponentsKart Page
ComponentsKart Page

Component Page
Component detail page

Why I built TemplatesKart

In 2020, I started learning Reactjs and I explored multiple React component libraries like AntDesign, MaterialUI, Tailwindcss and ChakraUI. All those libraries are great. But I found ChakraUI the best React component library although ChakraUI was new at that time. It Provides just enough to get started, implements sensible defaults, but is also very extensible and customisable. So I started using it and created multiple small projects with it. So far I built 5 to 10 projects with ChakraUI. Some projects are open source. In my new projects, sometimes i need to copy old components code from my previous projects. But it was time consuming process. Because I always need to open codebase of that specific project. So as per my needs and to make copy code process more convenient I created a TemplatesKart website. I added all my previous open source ChakraUI projects and most commonly used components.

TemplatesKart website is open source. Feel free to like and contribute.

Website link: https://templateskart.com
Github repo: https://github.com/MA-Ahmad/templateskart

Screenshots

Reviews component
Review component

Stacked lists component

stacked list component

Inspiration & Thanks

Chakra Templates️

Top comments (3)

Collapse
 
bhatvikrant profile image
Vikrant Bhat

Niceee!

Collapse
 
aligerm profile image
Ali

Cool UI.
Good list of components πŸ‘

Collapse
 
m_ahmad profile image
Muhammad Ahmad

Thanks

Let's team up together 🀝

We're Hiring

We're hiring for a Senior Full Stack Engineer to join the DEV team. Want the deets? Head here to learn more about who we're looking for.