We've been listening to your feedback and focusing on what matters most: making your life as a developer easier, faster, and more productive when building with Chakra UI.

We're thrilled to announce three major improvements that we believe will instantly upgrade how you work with our components and documentation.

Smarter Docs

Starting today, you can now copy the entire documentation for various components as Markdown. Now, when you paste the markdown into a tool like ChatGPT, it retains all the context, making your prompts more effective and your troubleshooting sessions more efficient.

Think about the possibilities:

• Quickly get an explanation of a component's props from an AI.
• Generate new examples based on the existing documentation.
• Share a complete component reference with a teammate in a single paste.

It's a small change with a huge impact on your workflow.

Open in StackBlitz

Sometimes you just want to play with a component without the hassle of setting up a new project. You see a demo in our docs that you love, and you want to start editing it immediately?

We've made that a reality. We've added one-click StackBlitz launches to every single example in our documentation. See a component you like? Just click the "StackBlitz" button, and a new, pre-configured environment will open in your browser, ready for you to start editing instantly.

This feature is perfect for:

• Rapid prototyping and experimentation.

• Quickly reproducing a bug for a support ticket.

• Learning how a specific component works by tweaking its props and styles in real-time.

CodeBlock Component

We are officially launching a brand new CodeBlock component. It's a fully-featured solution for highlighting dynamic code with:

• Syntax Highlighting
• Line Numbers
• Copy-to-Clipboard Support
• Diff
• Tabs
• and a lot more!

Conclusion

Our goal is simple: to make it easier than ever to build with Chakra UI. We believe these three updates: smarter docs, one-click StackBlitz, and the new CodeBlock component will do that. They're all live and ready for you to try out right now.

Head over to our documentation, try copying a component's docs as Markdown, launch a StackBlitz example, and explore the new CodeBlock component for yourself.

We can't wait to hear what you think!