GET STARTED / INSTALLATION

Source-first from the first command.

DesignOS uses a shadcn-compatible registry: components are copied into your project so you can inspect, adapt, and own every line.

Hosted URL status

designos.h4rithd.com is the canonical production host, but this repository does not claim that its deployment is already live. Use the local workflow until availability is verified.

01PREREQUISITES

Prepare your application.

Use a React project with Tailwind CSS and a configured shadcn component path. DesignOS components are React 19 compatible and rely on semantic CSS variables.

React 19+ Tailwind CSS 4 TypeScript recommended shadcn CLI

02BASE SYSTEM

Install foundations once.

The base item adds fonts, shared CSS variables, theme contracts, and the class utility used by source components.

Terminal

$ pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/designos-base.json

03COMPONENT

Add only what you need.

Every item declares its files and dependencies. Install one component or combine multiple registry URLs in the same CLI command.

Terminal

$ pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/button.json

04LOCAL REGISTRY

Develop the registry locally.

Clone this repository, build deterministic JSON into public/r, then start the documentation application.

Repository

$ pnpm registry:build && pnpm dev

registry/                 source components
registry.json             registry manifest
public/r/                 generated install payloads
packages/designos/        tokens, CSS, motion, effects

WHAT GETS INSTALLED

You own the result.

Source files

Readable TypeScript components land under your configured component alias.

Dependencies

Only the declared utilities and icon packages are added to the consumer.

Contracts

Shared DesignOS variables preserve themes, states, and motion behavior.