Build Faster with Opinionated
Shadcn Wrappers

A clean, reusable, type-safe wrapper built on top of shadcn/ui. Designed for real-world web development with consistent APIs, shared utilities, and improved DX.

View Components
Consistent API
Every wrapper follows a unified prop pattern with utilities from general.d.ts.
Better Developer Experience
Cleaner props, automatic behaviors, controlled + uncontrolled support.
Type-Safe by Default
Powered by shared types, option utilities, and strict type inference.

Wrapper Philosophy

Each wrapper follows these principles for consistency and long-term stability.
  • 1. Minimal to Zero CSS modifications - keep shadcn styling intact.
  • 2. API improvements only - no breaking underlying behavior.
  • 3. Shared types & utilities - powered by general.d.ts + utils.
  • 4. Emotionless components - purely functional and predictable.
  • 5. Consistent handling of controlled/uncontrolled props.
Before
<Select>  <SelectTrigger>    <SelectValue placeholder="Select a item..." />  </SelectTrigger>  <SelectContent>    <SelectItem value="Data 1">Data 1</SelectItem>    <SelectItem value="false">false</SelectItem>    <SelectItem value="12">12</SelectItem>  </SelectContent></Select>
After
const options: optionsT = [  "Data 1",  false,  12]<SelectWrapper  options={options}  placeholder="Select a item..."  indicatorAt="right"/>
Preview
Component Properties

Install

npx shadcn@latest add @glrk-ui/

accordionalert-dialogbreadcrumbcardcomboboxcontext-menudata-tabledialogdrawerdropdown-menuemptyfieldformitemmenubarnavigation-menupaginationpopoverselectsheettabstoggle-grouptooltip

Note: Before proceeding, make sure you have the Shadcn base set up and apply the following updates.

components.json
{
  "registries": {
    "@glrk-ui": "https://ui.glrk.dev/registry/{name}.json"
  }
}