Skip to content

shadcn namespace

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

Info:

Note: Diffgazer packages are not yet published to npm and the hosted registry at https://r.b4r7.dev is not yet live, so the shadcn commands on this page are gated until the first release. Until then, pack the workspace packages from a checkout of the repository and install those tarballs in the target app: either the packed @diffgazer/add tarball for the dgadd CLI (pnpm exec dgadd add ui/button) or the packed @diffgazer/ui and @diffgazer/keys tarballs for runtime package mode. See the canonical Consumption Paths section.

After the hosted registry is live, the shadcn CLI can install 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.