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:

Before publication: Diffgazer packages are not yet published to npm, so there is no dgadd bin until you install one. Follow the canonical Copy-first mode procedure to build and pack @diffgazer/add, then install that packed tarball in the target app. The target-app install is what puts dgadd on pnpm exec.

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 the publish gate, local validation, required app wiring, and keyboard hooks.