Build Faster with Opinionated
UI Wrappers

Type-safe UI wrappers built on Base UI and Shadcn primitives. Consistent APIs, shared utilities, and improved DX for real-world web development.

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 Base UI + 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
components

Install

npx shadcn@latest add @glrk-ui/

accordionalert-dialogautocompletebreadcrumbcardcarouselcheckboxcollapsiblecomboboxcontext-menudata-tabledate-pickerdialogdraweremptyinput-groupinput-otpitemmenumenubarnavigation-menunumber-fieldpaginationpopoverradioscroll-areaselectsheettabstoasttoggletooltip

Note: Before proceeding, make sure you have the shadcn base setup and apply the following updates.

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