Optimizing Recipes for Headless Components

Overview

In the last lesson, you styled an Ark UI headless component using Chakra UI recipes.

It worked, but as you saw, it can quickly become repetitive when components have many parts.

In this lesson, you'll learn a cleaner and scalable approach using createSlotRecipeContext, which automatically wires up all your slots and injects styles — no more manual chakra() wrappers or useSlotRecipe() calls.

Key Takeaways

createSlotRecipeContext removes the need to manually wrap or style every slot.
It gives you two helpers:

• withRootProvider → wraps the root component
• withContext → styles each slot automatically

This makes styling headless components clean, reusable, and type-safe.

Use createSlotRecipeContext to simplify setup

const { withContext, withRootProvider } = createSlotRecipeContext({
  recipe: floatingPanelRecipe,
})

Wrap your components

export const Root = withRootProvider(FloatingPanel.Root)
export const Header = withContext(FloatingPanel.Header, 'header')
export const Content = withContext(FloatingPanel.Content, 'content')

Re-export parts that don't need Chakra styles

export const Trigger = FloatingPanel.Trigger
export const CloseTrigger = FloatingPanel.CloseTrigger

Now, you no longer have repetitve chakra() wrappers on every component part. You can use the styled Floating Panel just like a regular component.