Shadcn UI has changed how many of us build React apps.
Instead of shipping a heavy UI framework, it gives us copy-pasteable, composable components that we actually own. Buttons, inputs, dialogs, popovers — all clean, accessible, and easy to adapt.
But when it comes to real-world select components, things get complicated very quickly.
The problem
In production apps, a “select” is rarely just a static dropdown.
We often need:
Generic data support like list of objects (not just { label, value })
Server-side search
Pagination / infinite scrolling
Async loading
Full type safety
Custom rendering
And full control over behavior and styling
Today, most of us end up:
Digging through multiple third-party select libraries
Fighting opinionated APIs
Or rebuilding the same logic again and again on top of Shadcn components
That’s the gap I wanted to explore.
Introducing react-generic-select
react-generic-select is an opinionated but composable select component built on top of Shadcn UI.
It’s not a framework.
It’s not a replacement.
It’s a pattern.
👉 A reusable single-select and multi-select implementation composed from:
Command
Popover
Button
Input
and other Shadcn primitives
Designed for:
Paginated data
Async sources
Server-side filtering
Generic object models
Type-safe configuration
Why this exists (and why it’s intentionally simple)
Shadcn doesn’t currently ship an all-in-one generic select component — and that’s understandable.
But in real applications, this is a very common need, and many of us solve it in similar ways.
The goal of this project is simple:
Explore whether this kind of component should exist as a shared, community-driven Shadcn pattern — to save time and reduce repeated effort.
This package is intentionally:
Composable
Unopinionated about data
Built from Shadcn components
Easy to copy, fork, and customize
You still own the UI.
You still control the logic.
This just gives you a strong starting point.
Live demo
You can see it in action here:
👉 Demo:
https://react-generic-select-demo-3zmt.vercel.app/
The demo shows:
Generic object mapping (valueKey, labelKey)
Paginated data
Clean integration with Shadcn styling
Fully typed usage
Try it in your project
The package is live on npm:
👉 npm:
https://www.npmjs.com/package/react-generic-select
npm install react-generic-select
Note: This package expects you to already be using Shadcn UI.
It composes existing Shadcn components instead of bundling its own UI primitives.
Repository & contributions
This is an open experiment, not a “finished product”.
👉 GitHub repo:
https://github.com/lemidb/react-generic-select
I’d love help from the community on:
Performance optimizations
Better async & pagination patterns
API design improvements
Edge cases from real production usage
Accessibility feedback
DX improvements
If you’ve built something similar before — your experience would be incredibly valuable here.
Why I’m sharing this early
This component is not perfect, and that’s intentional.
Instead of polishing it in isolation, I wanted to:
Share the idea early
Get feedback from experienced Shadcn users
Let the community shape whether this pattern is useful
If nothing else, I hope this sparks discussion around:
What “advanced” components belong in the Shadcn ecosystem as reusable patterns?
I’m excited to see where the community takes this 🙌
Top comments (0)