Recipes
A recipe is a pattern or strategy, not a code dump. Recipes explain how to think about a common need (forms, multi-step flows, modal patterns, data fetching).
The line:
- Components — atoms.
<Button>,<Dialog>. - Blocks — molecules. 30-90 lines of copy-pasteable code.
- Recipes — strategies. “Here’s how to think about complex forms in helixui.”
Pick whichever level fits the problem you’re solving.
Catalog
| Recipe | About |
|---|---|
| Forms with react-hook-form + Zod | The canonical helixui form story. |
| Multi-step wizards | State + transitions + helixui’s Stepper. |
| Modals and the back stack | When to use Dialog vs Sheet vs Popover. |
| Async data + skeletons | Suspense, fallbacks, error boundaries. |
| Optimistic UI | Show the success state before the server confirms. |
| Keyboard shortcuts | Composing CommandPalette + hotkeys. |
| Theme switching at runtime | Wiring HelixUIDNAProvider to user preferences. |
| Server Actions + helixui forms | Next.js / React 19 server actions. |