@rakeyshgidwani/skyline-primitives

L2 primitive component library for the Skyline design system. React components built on shadcn/ui + Tailwind v4, themed via L1 CSS vars from @rakeyshgidwani/skyline-tokens.

Install

npm install @rakeyshgidwani/skyline-primitives

Usage

// main.tsx — import a theme once at app root
import '@rakeyshgidwani/skyline-primitives/themes/jeremy'

import { Button, Input, Dialog } from '@rakeyshgidwani/skyline-primitives'

function App() {
  return (
    <Dialog>
      <Input placeholder="Enter value" />
      <Button variant="primary">Submit</Button>
    </Dialog>
  )
}

Switching themes

Change the imported theme file — one line:

import '@rakeyshgidwani/skyline-primitives/themes/donna'
// or
import '@rakeyshgidwani/skyline-primitives/themes/harvey'

Development

Install dependencies

npm install

Sync shadcn components

Populates vendor/ui/ with shadcn components at the pinned version. Run once on setup, re-run deliberately when upgrading.

npm run sync:shadcn

Development server

npm run dev

Type check

npx tsc --noEmit

Build

Full build — ESM bundle + theme CSS:

npm run build

Theme CSS only:

npm run build:css

Test

npm run test

Release

Bumps version, pushes tags, triggers prepublishOnly build.

| Command | What it does | |---|---| | npm run release:patch | 0.1.0 → 0.1.1 | | npm run release:minor | 0.1.0 → 0.2.0 | | npm run release:major | 0.1.0 → 1.0.0 |

Publish to npm:

npm publish

Architecture

skyline-primitives/
  vendor/ui/              ← shadcn components, NEVER modified (pinned, synced via CLI)
  src/
    components/           ← custom components
    styles/themes/        ← per-theme CSS (imports L1)
    lib/utils.ts          ← cn() helper
    index.ts              ← package root export
  tailwind.css            ← @theme block wiring L1 vars to Tailwind
  scripts/
    sync-shadcn.mjs       ← populates vendor/ui/
    build-css.mjs         ← bundles theme CSS
  docs/initial-spec/      ← full spec and component inventory

Design system layers

• L1 — tokens: @rakeyshgidwani/skyline-tokens — raw CSS custom properties (colors, typography, spacing, etc.)
• L2 — primitives: this package — React components styled via Tailwind utility classes that resolve to L1 vars at consumer build time

The vendor/ui/ rule

vendor/ui/ contains shadcn/ui components copied in by the CLI. These files are never manually modified. To extend a component, wrap it in src/components/.

Available components

126 components across 11 categories. See docs/initial-spec/components.md for the full inventory and build phase order.

• Inputs · Forms · Navigation · Overlays · Feedback
• Layout · Data Display · Typography · Charts
• Media & Upload · Specialty

License

Private (not currently licensed for external use).