Boilerplate

This boilerplate demonstrates how to implement a creatable select component — a select input that allows users to create new records directly from a modal without leaving the current form.

It’s an essential pattern for modern SaaS and admin dashboards where users frequently need to add relational data on the fly.

Overview

The example shows how to build a dynamic and type-safe form using Next.js App Router, tRPC, Drizzle ORM, and shadcn/ui.

When a user can’t find the desired option in the dropdown, they can open a modal, create a new record, and see it appear instantly in the list — all without reloading the page.

This provides a seamless, fluid experience for data creation and editing in complex relational environments.

Features

• Next.js App Router for modern, server-first routing
• tRPC for end-to-end type-safe communication
• Drizzle ORM for clean and structured database management
• shadcn/ui for consistent, accessible UI components
• Creatable Select Component that opens a modal for inline record creation
• Automatic refresh of options after creating a new record
• Fully integrated with React Hook Form and Zod validation

Use Case

Ideal for developers building:

• Admin dashboards or internal tools with relational data
• SaaS platforms with dynamic user inputs
• CRUD systems that require seamless inline creation
• Any application needing “create while editing” UX

With Next.js, tRPC, Drizzle ORM, and shadcn/ui, this boilerplate provides a modern, scalable foundation for creating dynamic and interactive form experiences — empowering users to stay in context while managing complex data relationships. 🚀