shob/ui

shobCore · Component Registry

The design system
for shobCore

Foundation layer for shobCore projects. Install base tokens and a style variant from this registry, then add UI primitives via the standard shadcn CLI.

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

Architecture

Three layers. One command each.

Base tokens set the foundation. Style variants shape the look. UI primitives come from shadcn.

01 — Foundation

base/shob

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

→

02 — Style

styles/style-*

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

→

03 — Primitives

UI Components

Use shadcn add button from the default registry. Shob styles apply automatically via the cn-* class system.

Registry

12 items available

Foundation layer + UI bundle. Use @shob/ui/primitives to install all shadcn UI primitives in one command.

Foundation 4
base/shob base lib/utils lib lib/icon-placeholder lib hooks/use-mobile hook
Styles 7
styles/style-corestyle styles/style-lumastyle styles/style-lyrastyle styles/style-maiastyle styles/style-mirastyle styles/style-novastyle styles/style-vegastyle
UI Bundle 1
ui/primitives ui

Quick Start

Add to any project in seconds

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 variant

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

Add all UI primitives in one command

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

Built With

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