Auth
Sign in, sign up, recover, verify. Everything that gates the front door.
- Sign in with 2FANew
- Forgot passwordSoon
- Sign up + email verifySoon
The Huchu cookbook is a "how to build X" book, not a catalogue. Every recipe walks you through one end-to-end feature — state, data, interactions, edge cases — using primitives, blocks and patterns from the Huchu reference. Start with a goal ("Build a sign-in with 2FA flow", "Build a leave-request workflow"), copy the React, ship.
Every Huchu app needs sign-in, a shell to live in, and a way to capture data. Build these three recipes in order and you'll have shipped the spine of an app — everything else is more screens.
Email + password, then a 6-digit OTP. Resend countdown, trust-this-device, error states. The canonical Huchu auth flow.
Open recipeThe standard operator shell — top bar, collapsible sidebar, content area, keyboard nav. Drop your pages inside and you're done.
Coming soonA 3-step form with validation per step, autosave between steps, and a sticky footer. The pattern most "create" flows want.
Coming soonEach theme groups recipes that share the same shape — same primitives, same state machine, same edge cases. If you can't find your feature by name, you'll find a recipe with the right scaffolding here.
Sign in, sign up, recover, verify. Everything that gates the front door.
The frame around your app — sidebars, tab bars, command palettes.
Capture data without losing the user halfway through.
Show many things, then dig into one. The bread and butter of an operator app.
KPIs at a glance, with a clear path from number to detail.
Empty, loading, error, optimistic. The states that decide whether your app feels alive.
Profile, security, team — the long-tail of an account.
Inboxes of work that someone has to act on. Approve, reject, escalate.
A recipe is what a senior engineer would walk a junior through if they had an hour. Crisp rationale, real React, full composition at the end. You copy the code; you don't read about the code.
@corelithzw/reactEvery snippet imports from @corelithzw/react — the intended npm surface for the design system. State stays in useState / useReducer. No extra libraries, no hidden magic.
Each recipe opens with the primitives, blocks, patterns and shells it needs — linked to the reference page so you can study any one in depth before you start.
The last section of every recipe is the whole component, assembled. Realistic state machine, error states, variations called out. That's the file you ship.
Recipes are about the build. The reference is about the parts. Jump to a single primitive, block, pattern or shell — props, variants, do/don't — whenever a recipe mentions one.