Select components
12 free, copy-and-go React Select examples built on the SevenUI Select primitive. Install any of them with the shadcn CLI.
On this page
Grouped options
A timezone select with labeled North America and Europe groups split by a separator.
Plan picker
A plan select with a muted description line under each option.
Inline rule builder
Two small selects set inside a sentence to build an auto-archive rule, with a plan-locked option and a live match count.
Auto-archive rule
Archive conversations that stay for longer than .
66 conversations match today.
Trigger styles
Outline, filled, and ghost trigger styles shown in a form field, a filter bar, and an inline 'Sort by' header control.
Outline: the default for form fields.
Filled: sits quietly in dense filter bars.
Ghost: an inline control inside a header.
Icon value
A controlled access select whose trigger renders the chosen option's icon and whose hint line updates with each choice.
Everyone signed in to the Northwind workspace can view it.
Avatar options
An assignee select with avatar initials in the trigger and items, a muted team column, and a separate 'Unassigned' option.
Validation states
A required select in a form that shows a destructive error when submitted empty and a success line with delivery time once filled.
Read-only, disabled, and loading
Three field states side by side: an admin-locked read-only select, a disabled select with its reason, and a channel select with a loading spinner and refresh.
Read-only: set by your organization admin.
Disabled: currency is locked after the first invoice.
Loading: syncing with your Slack workspace.
Multiple selection
A multi-select for issue labels with grouped, color-coded options, a '+N more' trigger summary, removable chips, and a clear-all action.
- Bug
- Performance
Member role management
A team member list with a role select on each row, option hint lines, unsaved-change markers, and save or discard actions.
Members
4 of 10 seats- MPMaya Patelmaya@northwind.ioOwner
- DODaniel Okafordaniel@northwind.io
- LFLena Fischerlena@northwind.io
- TATom Alvareztom@northwind.io
Product size and quantity
A product form with a stock-aware size select, a quantity select capped by stock, and a live total on the add-to-bag button.
Deployment configuration
A deploy form with environment, latency-labeled region, and branch selects, a production approval alert, and a copyable CLI command.
Components are the parts. Blocks are the page.
Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.
One purchase, yours forever. $99 at launch instead of $249.