@dev_oyorooms/ui-kit

A tree-shakable, themeable React component library following atomic design. Every colour, spacing, radius, and type style comes from design tokens synced 1:1 with the Figma "Parent Design system" — five brands (OYO, Belvilla, CheckIn, Motel 6, Studio 6) × light/dark × three density modes.

📖 Browse the components

Live Storybook: https://main--6a5b837e27e84749ebd0332a.chromatic.com/

Every component, variant, size, and state — no local setup needed. Redeployed automatically on every push to main.

| Component | What it does | Storybook | | ----------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | | Button | primary / secondary / neutral / outlined / hyperlink / underlined × xs–lg, on-background, loading, icons | docs | | Input | notched-outline floating label (CSS-only), sizes, states, adornments | docs | | Typography | full type scale, emphasis, decoration, colour | docs | | Image | aspect ratios, object-fit, rounded corners | stories | | Badge | colour variants × solid/outlined fill, sizes | stories | | Rating | brand-coloured star, score, optional review count | stories | | PropertyCard | property listing card (image, badges, amenities, price, rating) | stories | | NewPropertyCard | redesigned listing card | stories | | Density | comfortable / dense / tight spacing via data-density | docs |

Install

pnpm add @dev_oyorooms/ui-kit

Quick start

import { ThemeProvider, Button, ButtonVariant } from '@dev_oyorooms/ui-kit';

export function App() {
  return (
    <ThemeProvider brand="oyo" mode="light">
      <Button variant={ButtonVariant.Primary} size="md">
        Book now
      </Button>
    </ThemeProvider>
  );
}

Components must render inside <ThemeProvider> — styles resolve entirely through --uikit-* CSS custom properties it emits (no fallbacks by design).

Development

pnpm install
pnpm storybook      # component playground at localhost:6006
pnpm test:watch     # jest in watch mode
pnpm dev            # rollup watch + yalc push (test in a consumer repo)

Adding a component? Follow the build-component skill (.claude/skills/build-component/ · .github/skills/build-component/) — it covers the full Figma → tokens → component → validate flow.

Releasing

Releases are automated with changesets:

1. Ship your PR with a changeset (pnpm changeset) describing the change + bump.
2. On merge, CI opens/updates a "Version Packages" PR.
3. Merging that PR publishes to npm, tags, and creates the GitHub release.

The CI quality job also posts a package size report on every run (Actions → run → Summary).

Docs

• ARCHITECTURE.md — theme system, token pipeline, styling stack, tree-shaking, dev/prod workflows, component specs
• figma-plugin/README.md — one-click token sync from Figma

License

MIT