gamma logo

1

Quick Start

PreviousNext

Set up a Next.js app, initialize shadcn/ui, and add your first Gamma UI component in minutes.

Quick Start

Get Gamma UI running in a new or existing Next.js project. This guide matches the workflow on the homepage: scaffold → shadcn → add components → compose → ship.

If you do not have a Next.js app yet, start with Install Next.js first.

1

Initialize shadcn/ui

From your project root, run the shadcn CLI if you have not already:

pnpm dlx shadcn@latest init

Accept the defaults or match your stack (App Router, Tailwind, @/ alias). Gamma UI components assume the same layout shadcn/ui uses.

2

Add a Gamma UI component

Install any block from the registry with the @gammaui namespace. For example:

pnpm dlx shadcn@latest add @gammaui/cloud-flow

Files are copied into your repo (for example under components/) so you can edit them like any shadcn component. Browse Components for the full list and add commands.

3

Use the component

Import the component and render it on a page:

import CloudFlow from "@/components/gammaui/cloud-flow"
 
export default function Page() {
  return (
    <main className="flex min-h-screen items-center justify-center p-8">
      <CloudFlow />
    </main>
  )
}

Adjust the import path if your shadcn config uses a different folder.

4

Run the dev server

pnpm dev

Open http://localhost:3000 and confirm the component renders. Tweak styles with Tailwind utilities or your theme tokens in globals.css.

Next steps

  • Read the Introduction for philosophy and design goals.
  • Open any component doc for props, examples, and manual installation tabs.
  • Return to the homepage to explore live previews in the library section.