Skip to content

shadcn namespace

Configure shadcn registry aliases for @diffgazer/ui and @diffgazer/keys.

Info:

Note: The hosted registry at https://r.b4r7.dev is live, so the shadcn commands on this page work as written. The npm packages are the other install path: pnpm add -D @diffgazer/add for the dgadd CLI (pnpm exec dgadd add ui/button), or npm install @diffgazer/ui @diffgazer/keys for runtime package mode. See the canonical Consumption Paths section.

The shadcn CLI installs registry items by direct URL, or by namespace once components.json maps each namespace to a registry URL.

Direct URLs use the public registry origin:

bash
npx shadcn@latest add https://r.b4r7.dev/r/ui/button.json

Configure both namespaces when you want shorthand for top-level UI and keys installs:

json
{
  "registries": {
    "@ui": "https://r.b4r7.dev/r/ui/{name}.json",
    "@diffgazer-keys": "https://r.b4r7.dev/r/keys/{name}.json"
  }
}

Then install namespaced items:

bash
npx shadcn@latest add "@ui/accordion"
npx shadcn@latest add "@ui/dialog" "@ui/popover"
npx shadcn@latest add "@diffgazer-keys/navigation"

When a UI source item depends on keys behavior, the published public JSON resolves that dependency through the corresponding keys registry URL.

CSS wiring

Installing the theme item writes an aggregated styles/styles.css at the project root. The ~/ prefix in the registry target resolves from that root. From a CSS entrypoint one directory below it, such as src/index.css or app/globals.css, import the file with:

css
@import "tailwindcss";
@import "../styles/styles.css";

No per-component CSS import is required: the component CSS ships inside that aggregated styles.css, so components such as Dialog, CommandPalette, Select, Popover, and Tooltip are fully wired once it is imported.