Skip to content
Search

DEV Community

Cover image for Free 12 new Chakra UI components - TemplatesKart
Muhammad Ahmad
Muhammad Ahmad

Posted on • Originally published at mahmad.me

 

Free 12 new Chakra UI components - TemplatesKart

#react #webdev #showdev #chakraui

Let's find out 12 new chakra-ui components that I have added to TemplatesKart website recently.

Links

Website: TemplatesKart
Github Repo: TemplatesKart Code

Components overview

  1. Milestones

    • With cards on both sides
    • With cards on one side
    • With icons year-wise

  2. Pricing

    • Single tier
    • Two tiers

  3. Sidebars

    • With header
    • Without header

  4. Page Sections

    • CTA banner
    • Mission section
    • Overview section

  5. Features

    • With cards
    • Simple 2 columns

Some Components Screenshots

Milestones
Milestones Image

Pricing
Pricing Image

Sidebar
Sidebar Image

Overview section
Page section Image

Features
Features Image

Show your support
Give a ⭐️ on Github if you like my work! 🙏

Top comments (2)

Collapse
 
premkumarg profile image
Prem Kumar G • • Edited

great, thanks a lot...but sidebar is not opening for me on mobile view! but same code works on your templateskart website.

update :
issue was with "@chakra-ui/react": "^2.2.3" version, it works fine with ^2.2.1

Collapse
 
m_ahmad profile image
Muhammad Ahmad •

Thanks for update

DEV Community

Super Useful CSS Resources

A collection of 70 hand-picked, web-based tools which are actually useful.
Each will generate pure CSS without the need for JS or any external libraries.

Read next

dilek profile image

Hotword Activated Angular Application with Porcupine and Web Speech API

Dilek Karasoy -

promode profile image

Jenkins Slack integration : How to Send Notification Jenkins to Slack,Test Report or Custom Messages

Pramod Dutta -

j471n profile image

Typescript: Enums

Jatin Sharma -

santisbon profile image

Serving a React Router app through CloudFront

Armando C. Santisbon -