Orbi UI

A premium, token-driven component framework for React that combines headless logic, design tokens, and styled components into a cohesive system.

What is Orbi UI?

Orbi UI is a design system and component framework built on three foundational principles:

1. Token-Driven Design — All colors, spacing, typography, and motion flow from a single source of truth
2. Separation of Concerns — Headless logic in Core, styling in React components, design tokens everywhere
3. Type-Safe by Default — Strict TypeScript throughout. Every prop, variant, and state is typed.

Unlike component libraries that impose design decisions, Orbi empowers you to own your components while maintaining consistency through shared tokens and patterns.

Architecture

┌────────────────────────────────┐
│    React Components            │
│ (Button, Input, Dialog, etc.)  │
└────────────────────────────────┘
        ↓ consumes
┌────────────────────────────────┐
│   Core (Headless Hooks)        │
│ (useButton, useInput, etc.)    │
└────────────────────────────────┘
        ↓ + builds on
┌────────────────────────────────┐
│   Design Tokens System         │
│ (Colors, Spacing, Typography)  │
└────────────────────────────────┘

Packages

• @orbi/react — Styled React components (v0.1.0-alpha)
• @orbi/core — Headless behavioral hooks (v0.1.0-alpha)
• @orbi/tokens — Design system tokens (v0.1.0-alpha)

Installation

Install all packages:

pnpm add @orbi/react @orbi/tokens

Import tokens at your app's entry point:

import "@orbi/tokens/tokens.css";

Use components:

import { Button, Input } from "@orbi/react";

export default function App() {
  return (
    <>
      <Input placeholder="Your name" />
      <Button>Continue</Button>
    </>
  );
}

For detailed setup, see Installation Guide.

Components

All components are production-ready:

Component	Description
Button	Primary, secondary, tertiary actions
Input	Text, email, password, number inputs
Label	Accessible form labels
Stack	Layout primitives (flex rows/columns)
Card	Content grouping and elevation
Badge	Status indicators and tags
Avatar	User profile images
Checkbox	Boolean selection
Dialog	Modal dialogs and overlays
Divider	Visual separators

Documentation

• Getting Started — Core concepts and philosophy
• Installation — Setup for any React framework
• Component API — Component props and examples
• Design Tokens — Token system reference

Development

Prerequisites

• Node.js 18+
• pnpm 8+

Setup

git clone https://github.com/orbiveda/orbi-ui.git
cd orbi-ui
pnpm install

Build

Compile all packages:

pnpm build

Test

Run tests:

pnpm test

Type-check:

pnpm typecheck

Watch Mode

For development with live rebuilding:

cd packages/react
pnpm exec tsc --watch

Release Process

Orbi UI uses semantic versioning. Current version: v0.1.0-alpha

See CHANGELOG.md for version history and CONTRIBUTING.md for release guidelines.

Contributing

We welcome contributions. Please see CONTRIBUTING.md for:

• Code of conduct
• Development workflow
• PR guidelines
• Commit message conventions

License

Orbi UI is licensed under the MIT License. See LICENSE for details.

Philosophy

Orbi UI is built on the belief that clarity matters more than features. We prioritize:

• Transparency — You should understand the code you use
• Ownership — You should control your components
• Consistency — Design tokens eliminate guessing
• Type Safety — Catch errors at compile time, not runtime
• Accessibility — WCAG compliance from the ground up

Links

• GitHub — orbiveda/orbi-ui
• NPM — @orbi/react
• Documentation — docs

---

Orbi UI v0.1.0-alpha — Design system and component framework for React

orbi-ui