---
title: Chakra UI London Meetup 2024 Recap
description: Last Thursday's meetup was nothing short of amazing
type: article
authors: ["esther"]
publishedAt: "2024-12-03"
---

The Chakra UI London Meetup was a special evening where we got to meet
face-to-face with many community members who we had only known through online
interactions in the open source world. Some of these connections spanned months
or even years, making the in-person gathering even more meaningful.

The event held on Thursday, November 28th, 2024 where we talked about Chakra UI
v3, and the future of Chakra UI.

The evening kicked off with light refreshments and chats. We exchanged ideas,
shared our favorite Chakra components, and of course, grabbed some stickers.

<Image
  src="/images/group-photos.png"
  alt="Group photos"
  objectFit="contain"
  fill
  height="500px"
/>

## Talks

We had three amazing talks that evening, each bringing unique insights into
Chakra UI's evolution and new features.

### Building Chakra UI v3

The opening talk was delivered by [Sage](https://x.com/thesegunadebayo), the
creator of Chakra UI. His talk provided a technical deep dive into the process
behind building Chakra UI v3, going from the logic layer to the presentation
layer.

<Image
  src="/images/sage-talk.png"
  alt="Sage Talk"
  objectFit="contain"
  fill
  height="500px"
/>

Key highlights from the talk:

- **Component Design**: Using the slider component, Sage showcased how
  components are now built in Chakra UI. Going from the headless layer to the
  presentation layer, and leveraging state machines to handle interactions.

  - **Logic Layer** powered by [Zag.js](https://zagjs.com/)
  - **Headless UI Layer** handled by [Ark UI](https://ark-ui.com/)
  - **Presentation Layer** handled by Chakra's theming system

- **Component Anatomy**: He broke down the structure of Chakra UI components
  into separate parts so create a shared language for developers and designers.

- **Component API**: Sage emphasized how Chakra UI v3 leverages both open and
  closed component APIs to provide a flexible and consistent developer
  experience.

<ResourceCard
  type="figma"
  title="View the slides"
  url="https://www.figma.com/deck/WbCGjQGQCupXNvCiSqMHsf/Chakra-Meetup-Nov.?node-id=1-25&node-type=slide&viewport=-136%2C-13%2C0.63&t=tAFo6Oa8uI2pxIW5-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1"
/>

<br />

### Hidden Gems of Chakra UI v3

Next up, [Ivica Batinić](https://x.com/_isBatak) took the stage to highlight new
features in Chakra v3, showing how the theming system works, and ways to improve
runtime performance of dynamic styles.

<Image
  src="/images/ivica-talk.png"
  alt="Ivica Talk"
  objectFit="contain"
  fill
  height="500px"
/>

Key highlights from the talk:

- **Multipart Component Nuances**: Understanding the finer details of multipart
  components.

- **Performant Dynamic Styles**: Techniques for optimizing styles dynamically.

- **Modernized Polymorphic Patterns**: Leveraging patterns that boost
  flexibility in component usage.

- **Advanced Styling Features**: Unlocking powerful new styling capabilities.

<ResourceCard
  type="site"
  title="View the slides"
  url="https://hidden-gems-of-chakra-ui-v3.vercel.app/1"
/>

<br />

### Exploring Chakra's Color Picker

The final talk of the night was led by
[Esther Adebayo](https://x.com/_estheradebayo), who gave a stunning demo of the
new Color Picker component in Chakra UI v3, showing how to build a page with
real-time color customization.

<Image
  src="/images/esther-talk.png"
  alt="Esther Talk"
  objectFit="contain"
  fill
  height="500px"
/>

Key highlights from the talk:

- **Color Picker Overview**: Why a Color Picker is an essential tool for any
  design system.

- **Design Considerations**: What makes a good color picker component, and how
  to build one.

- **Component Anatomy**: A walkthrough of the Color Picker's anatomy.

- **Live Demo**: Esther demoed the ColorPicker component, showing how it can be
  used to style a login screen in real time.

<ResourceCard
  type="youtube"
  title="Watch the talk"
  url="https://youtu.be/neesBbYuGT0"
/>

<br />

## Conclusion

We wrapped up the evening with a Q&A session where attendees got the chance to
ask their questions, from technical details to what's next for Chakra UI.

A huge thank you to everyone who attended and made this meetup so special. We
couldn't do this without you, and we look forward to the next one.

<Image
  src="/images/stickers.png"
  alt="Chakra Stickers"
  objectFit="contain"
  fill
  height="500px"
/>

## Connect with us

- Join our [Discord community](https://discord.gg/chakra-ui).
- Follow us on [X](https://x.com/chakra_ui).
- Keep an eye out for future events!

<br />

Until next time, keep building with Chakra UI!
