Skip to content

Getting Started

Install @diffgazer/ui, wire up your app, and configure the theme.

@diffgazer/ui components install as source. You own the files; dgadd copies them in and tracks updates. Work through the four steps below.

Info:

npm packages: @diffgazer/add is on npm. pnpm add -D @diffgazer/add puts dgadd on pnpm exec, and npx @diffgazer/add <command> runs it without the install. Components also install without dgadd from the hosted registry: npx shadcn add https://r.b4r7.dev/r/ui/<item>.json.

01.

Consumption modes

Choose copy-first source you own and edit, or versioned runtime package imports.

Consumption Modes compares both paths, their prerequisites, and the visible vs. hidden registry.

02.

Tailwind setup

@diffgazer/ui needs Tailwind CSS 4 and the theme CSS for its tokens.

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

Tailwind Setup covers Vite, Next.js/PostCSS, theme variables, dark mode, and the font.

03.

TypeScript

Components import through a source alias such as @/*. Configure it before building copied source.

TypeScript covers path aliases, strict mode, and the React version.

04.

Installation

Initialize a project and add your first component with dgadd after Tailwind and the source alias are configured.

bash
pnpm exec dgadd init
pnpm exec dgadd add ui/button

Installation covers installing dgadd, the Tailwind and alias setup, what init writes, keyboard hook integration modes, the one-shot package-manager commands, and the resulting file layout.