CLI

npx @noksha-ui/cli init

Generates a stylesheet from your brand colour, imports it from the one Tailwind already compiles, and writes a noksha.json recording where things go. It reads the project first — your src/ layout, the stylesheet with the Tailwind import in it, the paths alias in your tsconfig — and offers each guess as a default you can overrule.

The theme comes out of the same generator that builds the published package’s styles.css, so the tokens, tone rules and keyframes are identical. Only the seed differs.

npx @noksha-ui/cli init --brand '#0EA5E9'

npx @noksha-ui/cli add button

Writes the component’s files, and the files it imports. Asking for Button brings Spinner, because Button renders one; asking for Checkbox brings Field. The shared helpers come too, narrowed to the ones something you asked for actually reaches — the dependency graph is resolved from the real imports, so you cannot end up with a file that does not compile.

On the way in, imports are rewritten to your layout and alias, and "use client" is stamped on the files that need it. All 23 components are available this way, or --all for every one of them.

@noksha-ui/core stays a dependency. It is the focus traps, the dismiss-layer stack and the variant engine — not what anyone means by owning a component.

npx @noksha-ui/cli diff

The one copy-paste libraries tend to lack. Once a component is in your tree it stops being connected to anything, and an upstream accessibility fix six months later reaches nobody.

This compares three things rather than two: what the registry serves now, what is in your tree, and what you were handed when you copied. That third one is recorded in noksha.json, and it is what turns an unhelpful “these files differ” into a verdict.

button
  src/components/ui/button/button.tsx   yours

spinner
  src/components/ui/spinner/spinner.tsx  update available

→ noksha diff --apply updates the files you have not touched.

--apply writes the update available files and leaves everything else alone, so a fix lands in the components you never customised without touching the ones you did. --verbose prints the changed lines for the rest.

noksha.json

Commit it. installed is the record diff reads — without it in version control, a colleague who pulls your branch gets components that came, as far as the tool can tell, from nowhere.

{
  "registry": "https://storewike.store/r",
  "brand": "#6D4AFF",
  "css": "src/app/globals.css",
  "components": "src/components/ui",
  "alias": "@/components/ui",
  "tsx": true,
  "installed": {
    "button": {
      "hash": "4a2e88f3d734e843",
      "files": { "button/button.tsx": "9f2c1b8e4a0d7c33" }
    }
  }
}

The registry

Generated from packages/react/src at build time and served as static JSON. The docs pages you are reading render from it and the CLI installs from it, which is what stops the documented source from drifting away from the shipped source. Point --registry at your own copy to serve a fork.

# Every component is a URL. This is what the docs pages render from.
curl https://storewike.store/r/button.json

# And the catalogue, with a hash per component:
curl https://storewike.store/r/index.json

Shape

{
  "name": "button",
  "type": "component",
  "title": "Button",
  "category": "actions",
  "dependencies": ["@noksha-ui/core"],
  "registryDependencies": ["spinner"],
  "internalDependencies": ["tone"],
  "api": { "interfaces": [...], "aliases": [...] },
  "files": [
    { "path": "button/button.tsx", "content": "…", "hash": "9f2c…" },
    { "path": "button/button.types.ts", "content": "…", "hash": "41ab…" }
  ]
}

Prefer to do it by hand? Every component page has an Own the source panel listing the same files.