Changelog

Every shadcn component now imports cn from the cn package.

For years, every shadcn project started with the same five lines in lib/utils.ts: import clsx, import twMerge, wrap one in the other, export it as cn. It worked, but it meant two dependencies and a helper you had to copy into every project and every registry.

We have moved that into a package. cn is a drop-in replacement for twMerge(clsx(...)). It is smaller, faster and ships the same API, so nothing changes at the call site.

Copyimport { cn } from "cn"
 
;<div className={cn("flex items-center", className)} />

What changed#

• Registry components, blocks and examples import cn from cn instead of @/lib/utils.
• npx shadcn init installs cn and generates a one-line lib/utils.ts.
• Every registry item that uses cn declares it as a dependency, so npx shadcn add installs it in projects created before this change.

lib/utils.ts#

The utils registry item still exists. It now re-exports cn so your own code keeps working and you still have a single place for project helpers.

Copyexport { cn } from "cn"

Existing projects#

Nothing breaks. Your lib/utils.ts keeps working and new components install cn next to it. To move the rest of your project over and drop clsx and tailwind-merge, run the migration:

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate cn
Copy

It rewrites imports, replaces twMerge(clsx(...)) calls and removes the old packages when nothing references them anymore. See the CLI docs for details.

GitHub registries now work with private repositories.

In June, we made it possible to turn any public GitHub repository into a registry. Teams asked for the same thing for their internal code: design systems, feature kits, agent rules and conventions that should not be public.

You can now install from private repositories. If you can read the repository, the CLI can install from it.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add acme/internal-toolkit/auth-kit
Copy

Zero configuration#

If you are logged in to the GitHub CLI, there is nothing to set up.

Copygh auth login

When a repository is not publicly readable, the CLI reads it through gh using your stored credentials. The token stays inside the GitHub CLI. It never enters the shadcn process.

Copy✔ Using gh credentials.
✔ Checking registry.
✔ Created 1 file:
  - lib/auth.ts

CI support#

Where the GitHub CLI is not installed, set GH_TOKEN or GITHUB_TOKEN:

CopyGH_TOKEN=github_pat_xxx npx shadcn@latest add acme/internal-toolkit/auth-kit

We recommend a fine-grained personal access token scoped to the repository with Contents: Read-only access.

Works with every command#

Private repositories work with the same commands as public GitHub registries.

pnpmnpmyarnbun
pnpm dlx shadcn@latest list acme/internal-toolkit
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest search acme/internal-toolkit --query auth
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest view acme/internal-toolkit/auth-kit
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest registry validate acme/internal-toolkit
Copy

How it works#

• Public repositories are read anonymously, exactly as before. No credentials are used and the GitHub CLI is never invoked.
• The CLI tries anonymous access first and only uses your credentials when the repository is not publicly readable.
• Private files are read through GitHub's Contents API, pinned to the resolved commit SHA.
• A token from GH_TOKEN is only ever sent to api.github.com. Stored GitHub CLI credentials are read by gh, not by the CLI.

See the Private repositories docs for the full guide.

@shadcn/helpers can now mock human-in-the-loop flows for the AI SDK. A scripted conversation can pause for real user input, wait for an approval, and continue with whatever the user decided.

Everything streams through the real useChat lifecycle, so your tool cards, approval prompts, and question flows behave exactly as they would in production.

Copyimport { createChat } from "@shadcn/helpers/ai-sdk"
 
const chat = createChat<ChatMessage>()
  .user("Help me plan the next prototype.")
  .assistant(({ writer }) => {
    writer.text("A couple of questions before I start.")
    writer.tool("askQuestions", { input: { questions } })
  })
  .assistant(({ writer, toolCall }) => {
    writer.text(
      toolCall?.name === "askQuestions" && toolCall.output
        ? `Starting with ${toolCall.output.answers.direction}.`
        : "Starting now."
    )
  })

Pass needsApproval to pause behind the user's decision. The scripted output streams after approval, and denial streams automatically.

Copychat
  .assistant(({ writer }) => {
    writer.text("That will archive 3 drafts. I need your approval.")
    writer.tool("archiveDrafts", {
      input: { count: 3 },
      needsApproval: true,
      output: { archived: 3 },
    })
  })
  .assistant(({ writer, toolCall }) => {
    writer.text(
      toolCall?.approved ? "Archived 3 drafts." : "Okay, leaving them in place."
    )
  })

Today, we're releasing Questionnaire, a new component for multi-step question flows. Use it for agent clarification prompts, onboarding, surveys, intake forms, and configuration.

Questionnaire is available for Base UI, React Aria, and Radix across all eight styles.

"use client"

import * as React from "react"

Features#

• Single and multiple selection with native radios and checkboxes.
• Freeform answers alongside fixed choices.
• Explicit skipping for optional questions.
• Previous, next, submit, and custom progress controls.
• Required and custom validation.
• Controlled navigation, saved defaults, and conditional questions.
• Keyboard navigation with optional letter or number shortcuts.
• Native form serialization and server-rendered collection state.
• Standalone, Card, and Dialog composition.

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add questionnaire
Copy

@shadcn/react#

The <Questionnaire /> component is also available as an unstyled headless primitive in @shadcn/react. Read the docs to learn more.

Registries can now handle search server-side.

When you run shadcn search, the CLI forwards the search parameters to your registry as query params:

CopyGET /r/registry.json?q=button&limit=50&offset=0

Return the matching items with a pagination object and the CLI uses your results as-is. This makes search fast for large registries: no more downloading the full catalog to search it.

Copy{
  "name": "acme",
  "homepage": "https://acme.com",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "description": "A button component."
    }
  ],
  "pagination": {
    "total": 12,
    "offset": 0,
    "limit": 1,
    "hasMore": true
  }
}

Dynamic search is opt-in. Static registries ignore the query params and keep working without any changes.

See the Dynamic Search docs for the full guide.