Styling Headless Libraries with Chakra UI

Overview

In this lesson, you'll learn how to style headless components from Ark UI using Chakra UI.

Key Takeaways

Headless components are unstyled building blocks. By combining Ark UI and Chakra, you get full control over visuals while keeping accessibility and structure intact.

We'll style the Floating Panel component, which has multiple parts like header, body, and control.

To style it, do the following:

Define a slot recipe for all its parts

Use defineSlotRecipe() with Ark UI's anatomy helper to style each slot.

export const floatingPanelRecipe = defineSlotRecipe({
  slots: ['content', 'header', 'title', 'body'],
  base: { content: { bg: 'bg.panel', borderRadius: 'lg' } },
})

Convert Ark UI slots into Chakra components using chakra()

Wrap headless parts with the Chakra factory for styling.

const Content = chakra(FloatingPanel.Content)
const Header = chakra(FloatingPanel.Header)

Inject recipe styles dynamically with useSlotRecipe()

const styles = useSlotRecipe({ recipe: floatingPanelRecipe })()
<Content css={styles.content} />