Recipes — concrete, copy-pasteable
Each recipe shows one production-shaped pattern, end to end, using the real APIs the library ships. Code is copy-pasteable. Honest about what each primitive defends against AND what it does not.
What’s here today
Section titled “What’s here today”| Recipe | What you ship | Primitives |
|---|---|---|
| Secure file upload | A file-input that verifies real magic bytes, not the Content-Type header — defends against polyglots and double-extension tricks | TkxFileUpload + sniffMimeType |
| Tamper-evident audit trail | SHA-256 hash-chained event log for SOC 2 / HIPAA / 21 CFR Part 11. Mutation is detectable in O(n). | audit() + verifyAuditIntegrity() + getAuditLog() |
| PII redaction before LLM | Strip SSN, Luhn-validated cards, email, phone, API keys before crossing the boundary to OpenAI / Anthropic / analytics | scrubPII() |
| Peer chat with media | Real-people messaging with attachments, reactions, replies, edit/delete, delivery states, typing indicator | TkxPeerChat + sniffMimeType |
| DataGrid with tree data | Org chart, file browser, or chart of accounts as a sortable, editable grid with disclosure carets | TkxDataGrid with childRowsKey |
| Async field validation | ”Is this username available?” / “Does this email already have an account?” — debounced, race-condition-safe, cancellable | useFormState validateAsync |
| AAA dark mode (SSR-safe) | Theme toggle that survives Next.js / Remix SSR with no hydration mismatch and no FOUC, with verified ≥7:1 contrast on both modes | ThemeProvider + themeInitScript() + meetsAAA() |
| India address form | Cascading Country → State → District → Sub-district → PIN picker with region-correct labels (Taluka / Tehsil / Mandal / Block) — both PIN lookup and explicit dropdowns | TkxAddressInput + tekivex-india-admin (or bring-your-own loader) |
Looking for a vertical-specific walkthrough?
Section titled “Looking for a vertical-specific walkthrough?”For larger, multi-primitive patterns scoped to a regulated industry, see Industry blueprints. Today: HIPAA-aligned patient intake. Coming: PCI-DSS-aligned checkout, Section 508-aligned gov forms, FERPA-aligned student records.
What’s coming next on the recipe side
Section titled “What’s coming next on the recipe side”If you’ve hand-rolled something for a non-obvious case, open an issue at github.com/007krcs/tekivex-ui/issues and we’ll write the recipe.
Candidate recipes on the v3.20 wishlist:
- RSC-friendly state management for an admin dashboard
- Standing up a working dashboard in 20 minutes from a Postgres schema
- Multi-tenant theming with per-organization brand colors
- Optimistic UI patterns with rollback on server rejection
- Resumable file upload with chunked PUT + retry
How to read a recipe
Section titled “How to read a recipe”Each page has the same structure:
- The problem — what real-world scenario this addresses
- The recipe — full working code, often with a minimal version and a realistic version
- What it defends against OR what’s built-in — the wins
- What it does NOT defend against OR what’s NOT built-in — honest gaps
- Gotchas — real edge cases sourced from the implementation
- Related — links to component reference docs and other recipes
If a recipe overpromises, it’s a bug — open an issue.