The design system for shobCore

A custom shadcn registry built on Base UI, Tailwind CSS v4, and React 19. Components are distributed as source — not packages.

pnpm dlx shadcn@latest add @shob/ui/button

Architecture

Base → Style → Components

Foundation

OKLch design tokens, CSS variables, border-radius scale, icon library, and core dependencies. Every project starts here.

→

7 Style Variants

Scoped CSS overrides that shape the look. Pick one in components.json — core, luma, lyra, maia, mira, nova, or vega.

→

52 Components

Production-ready components built on Base UI primitives. Add what you need — source lands in your project.

Registry

Grouped by purpose. Each links to its registry JSON endpoint.

cardui separatorui aspect-ratioui resizableui scroll-areaui

buttonui inputui input-groupui input-otpui textareaui checkboxui radio-groupui selectui native-selectui switchui sliderui comboboxui fieldui labelui toggleui toggle-groupui calendarui button-groupui

alertui alert-dialogui dialogui drawerui sheetui sonnerui spinnerui progressui skeletonui emptyui

popoverui tooltipui hover-cardui dropdown-menuui context-menuui commandui menubarui

breadcrumbui navigation-menuui paginationui tabsui sidebarui accordionui collapsibleui

tableui badgeui avatarui chartui carouselui kbdui itemui directionui

style-corestyle style-lumastyle style-lyrastyle style-maiastyle style-mirastyle style-novastyle style-vegastyle

Quick Start

1 Point your project at this registry

// components.json
{
  "registries": {
    "@shob": "https://ui.shobcore.dev/r/{name}.json"
  }
}

2 Install the base layer and a style

pnpm dlx shadcn@latest add @shob/base/shob @shob/styles/style-core

3 Add components

pnpm dlx shadcn@latest add @shob/ui/button @shob/ui/input @shob/ui/card

Built With

React 19 Tailwind CSS v4 Base UI CVA 0.7.1 OKLCh Tokens shadcn Registry Protocol TypeScript 6 Vite