Getting started

How to add GFA components and blocks to your Next.js or React project — with or without the GFA Studio CLI.

How GFA publishing works

Each component or block on this site is an artifact: source files hosted on this domain plus docs with Preview, Code, JSON, and Installation.

Preview — live demo.
Code — usage after you install the source (imports point to your project paths).
JSON — full source bundle you can download today.
Installation — manual steps on every doc page until the CLI ships.

GFA Studio CLI

Coming soon

The installer is not published yet. Use the manual path below.

When live, gfa-studio installs from our server (not npm). It downloads artifacts from https://ui.gkhn.dev/gfa/…, writes files into your repo, and aligns imports with your aliases.

Install CLI (no npm registry required)

curl -fsSL https://ui.gkhn.dev/install.sh | sh

Initialize project

gfa-studio init

Add a component (example)

gfa-studio add button

Manual install (available now)

Until the CLI is live, copy sources from the JSON artifact on any doc page:

Open the doc page → JSON tab (or download https://ui.gkhn.dev/gfa/credit-card.json).
Copy every file from the files array into your project (match the suggested paths or your own src/components/ui layout).
Change imports in your app code — e.g. @/components/gfa/button → @/components/ui/button.
Add dependencies (class-variance-authority, motion/react for blocks, etc.) and align globals.css theme tokens.

See Installation on any component page, or walk through the Credit Card block: Credit Card block

React vs HTML

Doc pages have two implementation tabs:

React — TSX sources for Next.js / React apps (what gfa-studio add will install).
HTML — portable markup + CSS + JS for static sites or non-React stacks.

FAQ

Why does Code use `@/components/gfa/...`?: That path matches this design-system repo. After manual install or CLI, point imports to where you placed the files — e.g. @/components/ui/button.
What is `cn`?: A small className helper from @/lib/utils (tailwind-merge + clsx). Copy it from shadcn or our artifact if missing.
Do I need your `globals.css`?: Components use design tokens (primary, muted, destructive, …). Map them in your Tailwind theme or copy the relevant CSS variables.
Which packages do blocks need?: Varies per block. Credit Card uses motion/react, fonts, and scoped CSS. Check JSON files and the Installation section on each page.
Can I paste Code before installing?: No — Code is the usage example after sources exist. Use JSON + Manual steps first, then paste the Code snippet.