Forms Kit · Brief & Inquiry
Underline-style form components with chip-selects, RHF + Zod validation, and Server Actions. The same kit powering our /brief page.
- React 19
- TypeScript
- Tailwind v4
- react-hook-form
- Zod
Price
- Underline-only field design (no boxes)
- ChipSelect — single and multi variants
- Zod schema with friendly error messages
- Server Action submit + RHF setError integration
- Animated success state with anim-ping checkmark
- Auto-resize textarea via native CSS field-sizing
FORMS KIT · BRIEF & INQUIRY
What you get
A set of form components you can drop into any Next.js app. Built for studio sites, indie SaaS, brief / contact / inquiry / waitlist flows — anything where the form is the conversion.
These are the exact components running on haikustudio.space/brief. Take, paste, restyle to your brand.
What's inside
- FieldShell + Input + Textarea — underline-style fields with mono labels
- ChipSelect — single and multi variants, type-safe via generic
T extends string - Schema patterns — Zod schemas shared between client (RHF resolver) and server (action validation)
- Submit pipeline — Server Action returns
{ ok, errors? }, RHFsetErrormaps server errors back to fields - Success state — animated check + persona-aware copy
- Disclaimer + privacy line — small details that build trust
License
Multi-project license. Use across unlimited projects in your team. No reselling as a standalone product.
How delivery works
You get a .zip of the components folder + a single-page setup guide. Drop into src/components/forms/, adapt the styles, and ship.
What's inside
Tree
- components/forms/
- field-shell.tsx· underline wrapper
- input.tsx
- textarea.tsx· auto-resize via field-sizing
- chip-select.tsx· single + multi (generic T)
- success.tsx· animated check
- schemas/· shared client + server
- brief.ts
- contact.ts
- actions/
- submit-brief.ts· Server Action + RHF errors map
FAQ
Frequently asked
To Tailwind v4 — the underline style is built on tokens via `@theme inline`. You can adapt to Tailwind v3 or vanilla CSS, but that's a manual port with no visual guarantees.
Want it
Tell us a bit, and we'll send it over.
Fill this in and we'll reply within 48 hours with payment instructions and access to Forms Kit · Brief & Inquiry. No accounts, no checkout flow — just a quick conversation.