Docs / Getting Started

Getting Started

From zero to a working component in under 2 minutes.

Step 1 — Create a Next.js project

bash
npx create-next-app@latest my-app --typescript --tailwind --appcd my-app

Step 2 — Initialize shadcn/ui

bash
npx shadcn@latest init

When prompted: choose Default style, select your base color (Neutral recommended for RDS), confirm globals.css path.

Step 3 — Add the RDS font stack

In app/layout.tsx, add Google Fonts:

import { Instrument_Serif, DM_Mono, DM_Sans } from "next/font/google"const instrumentSerif = Instrument_Serif({  subsets: ["latin"], weight: "400", variable: "--font-display",})const dmMono = DM_Mono({  subsets: ["latin"], weight: ["400", "500"], variable: "--font-mono",})const dmSans = DM_Sans({  subsets: ["latin"], variable: "--font-sans",})

Apply to body:

<body className={`${instrumentSerif.variable} ${dmMono.variable} ${dmSans.variable} font-sans`}>

In globals.css, add:

css
:root {  --font-display: var(--font-display);  --font-mono: var(--font-mono);  --font-sans: var(--font-sans);}

Step 4 — Add your first component

bash
npx shadcn@latest add button
import { Button } from "@/components/ui/button"export default function Page() {  return <Button>Hello RDS</Button>}

Step 5 — Run it

bash
npm run dev

Requirements

  • Next.js 14+ (App Router)
  • React 18+
  • Tailwind CSS 4+
  • Node.js 18+

What’s Next