Scaffold new shadcn project

Run the following command to set up a Vite + React project with shadcn/ui and Base UI primitives.

npx shadcn@latest init --preset bJfDQCDA --base base --template vite

LLM-Driven setup using rdc ui skills

In the future, you will be able to have an LLM set up the registry for you. For example, you can instruct it: Step 2 through 5 are manual now, but will be available as an LLM-driven option in the future.

VSCode - MCP server setup

Create or update .vscode/mcp.json and add the shadcn server:

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Update `./components.json`

Update components.json in the root of the project and include the RDC-UI registry namespace:

{
  "registries": [
    "@rdc-ui": "https://ui.rdc.nl/r/{name}.json"
  ]
}

Install Base Styles

The base styles include RDC brand colors, typography (GT Walsheim Pro), and design tokens. This is a prerequisite before adding any components:

npx shadcn add @rdc-ui/css

Uninstall preset font

The shadcn preset includes Inter as the default font. Since RDC UI uses GT Walsheim Pro, you can uninstall the preset font:

npm uninstall @fontsource-variable/inter

Update `./src/index.css`

Remove @import "@fontsource-variable/outfit"; and everything below @custom-variant dark (&:is(.dark *));

Add Components

This is how you manually add components to your project. If you're using an LLM, you can skip this and simply instruct the LLM to add components for you.

npx shadcn add @rdc-ui/logo

Usage

import Logo from "@/components/Logo"

export function Header() {
  return (
    <header>
      <Logo className="h-8 w-auto" />
    </header>
  )
}

What's Installed

When you install a component, the CLI:

Downloads the component source from the registry
Places it in your configured components directory
Installs any npm dependencies it requires
Resolves internal component dependencies

Manual Modifications

Components live in your source code. We recommend not modifying them unless necessary — for example when fixing bugs or when a component needs a specific feature not available in its base implementation. In those cases, prefer creating a new wrapper component around the base component(s).

Getting Started