Hi, I am opening this issue for implementing social media buttons(facebook, messenger, etc..)

Here is one example

 <Button variant={"outline"} leftIcon={<FcGoogle />}>
    <Center>
      <Text>Sign in with Google</Text>
     </Center>
 </Button>

Fix lighthouse findings for mobile and desktop

Add an event to measure the "Copy" button clicks. If possible, it'd be good if the "Manual Select & Copy" can be measured as well.

The copied tooltip remains visible, when switching the tab right after click the copy button.

Possible solution:

• Programmatically close the tooltip when switching tabs
• Don't use a tooltip at all, and just change the label of the button to copied for a short duration

Hi the SideBar templates have this common bug on the active NavItem Link.
You can see it by going to the chakra templates site (https://chakra-templates.dev/navigation/sidebar)

I've tried to mess arround with the _active styles or _hover to fix it but with no results.

Hero CTA with illustration

• Designed with 1920 width
• Container: 2 columns centered, 640px each
• Title font: Work Sans Bold 64px
• Description font: Inter Medium 14px
• Orange: Chakra's orange-400 or #ED8936 in HEX
• Dark text: Chakra's gray-700 or #2D3748 in HEX
• Light text: Chakra's gray-500 or #718096 in HEX
• Secondary button background: Chakra's gray-100 or #EDF2F7 in HEX
• Illustration height: 28rem
• Template spacing: 112px top and bottom
• Contents spacing: 112px between content and illustration, 40px between title, description and CTA, 24px horizontally between buttons
• Illustration zip

Video Hero

• Designed with 1920 width
• Container: 2 columns centered, 640px each
• Title font: Work Sans Bold 64px
• Description font: Inter Medium 14px
• Red: Chakra's red-400 or #F56565 in HEX
• Dark text: Chakra's gray-700 or #2D3748 in HEX
• Light text: Chakra's gray-500 or #718096 in HEX
• Light red: Chakra's red-50 or #FFF5F5 in HEX
• Template spacing: 160px top and bottom
• Content spacing: 40px vertically between text, 24px horizontally between buttons
• Blob zip

Thanks for the fantastic website and templates!

However, the previews don't seem to work for me in Firefox.

Page

In Firefox:

In Brave:

Network:

Info

No specific tracker blocking or anything that would normally break these kinds of things.

MacBook Air M1, MacOS Monterey, Firefox 94.0.1

Template request

Describe the template you need

Hero image with caption carousel, this will have control buttons, an image in the background and caption/content in the center.

Optional: Add screenshots, or Figma/Sketch files

Bootstrap carousel with caption https://getbootstrap.com/docs/5.0/components/carousel/#with-captions

Hi, I've been trying the templates and found out that the menu doesn't hide when onblur or even when selected. I've inspected and it seems to be a visibility setting is not setting to invisible. https://youtu.be/NMoyVfRvbkE here is a video of it.

Refactor takePreviewScreenshots.js with typescript because I don't want to write plain JS anymore 🙈

the program runs smoothly for localhost. but when I send it to vercel the error in the PopoverTigger element appears

Template request

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch files

A file uploader component would be really useful. Especially since it will not be included in chakra-ui itself, see chakra-ui/chakra-ui#457.

What license is the code under?

Obviously, there's the "Copy the code" section on the home page, but it might be worth adding a license to this repository (like the UNLICENSE) to be more explicit about the copying terms.

It may also be worth considering if you want the code samples to be under a different license than the website itself, but that's up to you - the maintainer(s)

Feature request

Build button template like other template on the page

Describe the feature you need

I want to ask if It is possible to extract from https://chakra-templates.dev/components/cards page, the buttons used like: follow button or start your trial and make them like template component so user can copy easily their code and use them.
I can work on the extraction of codes and do more by building some buttons but I don't know if it follow the goal of the project to have more complete template.
Thanks

Additional information

Template request

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch files

Template request

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch files

Error: React Hook "useColorModeValue" cannot be called inside a callback.

Template: Navbar

How to reproduce?
I created a react-app using create-react-app --template typescript installed all the Chakra UI dependencies using yarn.

I copied the code from Chakra templates dev website and put it in a separate .tsx file.

When I am using that component using <WithSubnavigation /> I see an error React Hook "useColorModeValue" cannot be called inside a callback. in DesktopNav function.

Template request

Describe the template you need

I need a vertical steps component, which is exactly the same as this one: https://pro.chakra-ui.com/components/application-ui/steps

Additional information

Optional: Add screenshots, or Figma/Sketch files

We should add a better keywords, description, and Social Sharing Cards info for the pages and templates.

Template request

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch files

Feature request

I want a simple copy to clipboard button because I am too lazy to copy the code by myself.

Opening the Templates page in LinkedIn's built-in browser causes rendering issues in the Header component. This happens on iOS devices with a notch, so I suspect it's the safe-area property.

Template request

A blog article list.

Describe the template you need

Pictures say more than 1000 words

Something like this. What do you think?

Additional information

I can implement this if you want. I got it implemented already on a page and would like to share it.

Optional: Add screenshots, or Figma/Sketch files

Template request

E Learning for school

Describe the template you need

We need following sections Course list, course details, Lessons list, lesson summary, Instructors

Additional information

Reference: https://zone-ui.vercel.app/e-learning/

Optional: Add screenshots, or Figma/Sketch files

CTA with Annotation

• Designed with 1920 width
• Container: 2 columns centered, 640px each
• Green: Chakra's green-400, or #48BB78 in HEX
• Dark text: Chakra's gray-700 or #2D3748 in HEX
• Light text: Chakra's gray-500 or #718096 in HEX
• Bold text font: Work Sans Bold 64px
• Copy text font: Inter Medium 14px
• Annotation font: Caveat Bold 14px
• Template spacing: 140px top and bottom
• Contents spacing: 56px between punchline, description and buttons, 12px between the two buttons
• Arrow zip

Grid with blurred backdrop

• Designed with 1920 width
• Container: 2 columns centered, 640px each
• Caption font: Work Sans Bold 20px uppercased
• Title font: Work Sans Bold 48px
• Description font: Inter Medium 16px
• Testimonial font: Inter Medium 14px
• Client name font: Work Sans Bold 14px
• Client profession font: Inter Medium 14px
• Client photo size: 80px width x 80px height
• Purple: Chakra's purple.400 or #9F7AEA in HEX
• Backdrop blur: ~40px
• Download assets

Template request

I would like to have a user profile edit template, where users can edit their profile and upload their photo.

Describe the template you need

I want a template where users can edit their name, number, email, photo with preview, social media links, etc..

Optional: Add screenshots, or Figma/Sketch files

https://dribbble.com/shots/4653784-Edit-Profile
https://dribbble.com/shots/14339973-Edit-Profile-Profile-Management

toSentenceCase utility should consider abbreviations.

For example:

ImageWithTextAndCTA should be transformed in Image With Text And CTA

Template Bug

The textarea on the new contact form for the message field doesn't have a border.
Check it on https://chakra-templates.dev/forms/contact

Optional: Add screenshots, or Figma/Sketch files

Feature request

Add preview images for the components on the homepage

Describe the feature you need

I want to be able to see preview images of the components of a specific category.

Current idea: Run a puppeteer script which does screenshots of the components and include them in the page.

Template request

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch files

Feature request

Describe the feature you need

It should be possible to sort templates.

Additional information

Template request

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch files

Template request

A component with auto-complete for tag input, just like a stack overflow

Describe the template you need

Additional information

Optional: Add screenshots, or Figma/Sketch file

Feature request

Describe the feature you need

Currently the directories in the filesystem are directly used as parts of the url.
Example:

• Filesystem: src/pages/templates/pageSections/hero
• URL: https://chakra-templates.dev/pageSections/hero

I thinks dash-case instead of camel case would be better.
It should look like https://chakra-templates.dev/page-sections/hero

Additional information

Join our team

• Place in Forms category
• Designed with 1920 width
• Container: 2 columns centered, 640px each
• Title font: Work Sans Bold 80px
• Form title font: Work Sans Bold 48px
• Form description font: Inter Medium 16px
• Form input font: Inter Medium 16px
• Buttons font: Work Sans Bold 16px
• "YOU" label: Work Sans Bold 18px
• Avatars size: 80px width x 80px height
• Form background: gray.50
• Inputs background: gray.100
• Upload CV background: gray.200
• Form inputs text color: gray.500
• Title, Form title and Upload CV text color: gray.800
• "YOU" background: gray.800
• Avatars stroke: 3px outside, linear gradient, top-right to bottom-left, red.400 at 0% to pink.400 at 50%
• Golden avatar stroke: 3px outside, linear gradient, top-right to bottom-left, orange.400 at 0% to yellow.400 at 50%
• Corner gradient blur: BLAST IT!
• Corner gradient overlays the title!
• Download assets

The following causes full page load on clicking nav item url.

              <Link
                p={2}
                href={navItem.href ?? '#'}
                fontSize={'sm'}
                fontWeight={500}
                color={linkColor}
                _hover={{
                  textDecoration: 'none',
                  color: linkHoverColor,
                }}>
                {navItem.label}
              </Link>

Using Next.js Link component with "as" solves the full page refresh problem.

<Link href="/flip" as="/flip" >Flip</Link>
But Wrapping Chakra-UI Link with Next.js Link creates conflict with PopoverTrigger.

Hello,
WOW you make a amazing work keep going 🎉

please fix the chakra-templates.dev/navigation/navbar page:
The preview not working : https://chakra-templates.dev/navigation/navbar

NOTE: only not working when you open the page at the first time but if you click for example to "Sidebar" then "Sidebar" than return to "Sidebar" will work

In firefox the iframe preview seems not to load correct.

Stats grid with image

• Place in Features category
• Designed with 1920 width
• Container: 2 columns centered, 640px each
• Caption font: Work Sans Bold 20px uppercased
• Title font: Work Sans Bold 48px
• Description font: Inter Medium 20px
• Stat number font: Work Sans Bold 28px
• Stat text font: Inter Medium 20px
• Caption color: Chakra's gray.500 or #718096 in HEX
• Title, Stat Number and bolded stat text color: white
• Text color: Chakra's gray.400 or #A0AEC0 in HEX
• Template spacing: Content centered vertically
• Content spacing:
  • Between caption and title: 12px
  • Between title and description: 20px
  • Between description and stats: 80px
  • Between stat rows (vertically): 40px
  • Between stat columns (horizontally): 12px
  • Between stat number and text: 12px
• Gradient colors:
  • Left: Chakra's gray.800 or #1A202C in HEX, starting from 55%
  • Right: Chakra's gray.700 or #2D3748 in HEX with 40% opacity
• Image zip

I think it'd be better if we fix the navigation bar to the top so it doesn't get scrolled out of the viewport.

Very nice work guys. THKS

I need for my project with this drawer. I have a button, when clicking this it only show just icons, hidding other informations.

Optional: Add screenshots, or Figma/Sketch files