General

New to code

Never opened a terminal? This guide takes you from an empty computer to your first WunderUI screen in about 15 minutes. You copy a line, paste it and press Enter. You don’t need to understand the code yet.

1What you need

A computer with Windows, macOS or Linux
An internet connection
About 15 minutes

You type every command into the terminal, a window for text commands. On Windows, open Start, type (or ) and press Enter. On macOS, press Cmd + Space, type and press Enter. Paste a command, press Enter and wait until the terminal is ready for the next line.

2Install Node.js

Node.js is the engine that runs the tools in this guide. Download the LTS version from nodejs.org and click through the installer. Or install it from the terminal:

bash

winget install OpenJS.NodeJS.LTS

The macOS command needs Homebrew. On Linux, pick your system on nodejs.org/en/download. Then close the terminal, open a new one and check both versions:

bash

node -v
npm -v

Two numbers like these mean it worked. Node has to start with v20 or higher:

text

v24.20.0
11.19.0

3Get an editor

Install VS Code or Cursor. Both are free, show your project’s files in a sidebar and have a terminal built in (Terminal › New Terminal).

4Create a project

This command creates a folder called with a ready website (Next.js with React and Tailwind CSS). It lands in the folder your terminal is in. The second line moves the terminal into it.

bash

npx create-next-app@latest my-app --yes
cd my-app

The first time, npx asks “Ok to proceed? (y)”. Type and press Enter. Then open the folder in your editor (File › Open Folder).

5Add WunderUI

This copies three components (button, badge, card) into your project:

bash

npx wunderui-cli add button badge card

Now open in the editor, delete everything in it, paste these three lines and save. They load Tailwind, load WunderUI’s colours and fonts, and tell Tailwind where the components live.

css

@import "tailwindcss";
@import "../styles/wunderui.css";
@source "../components";

6See it in the browser

bash

npm run dev

Open http://localhost:3000 in your browser. This terminal now runs your site, so leave it open and use a second terminal for other commands. Ctrl + C stops it.

Open , replace everything with this code and save. The browser updates by itself and shows a card and a button.

tsx

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export default function Home() {
  return (
    <main className="flex flex-1 flex-col items-center gap-4 bg-background p-10 text-foreground">
      <Card className="w-full max-w-sm">
        <CardHeader>
          <CardTitle>Revenue</CardTitle>
          <CardDescription>Last 30 days</CardDescription>
        </CardHeader>
        <CardContent className="flex items-center justify-between">
          <span className="text-3xl font-semibold">$12,480</span>
          <Badge color="green">+8.2%</Badge>
        </CardContent>
      </Card>
      <Button>Save changes</Button>
    </main>
  )
}

7Your first dashboard in one sentence

A coding agent writes the screen for you. Install Claude Code or Cursor (both need an account). Then, in a second terminal inside , give the agent WunderUI’s skills:

bash

npx skills add wunder-ui/wunderui --agent claude-code cursor -y

Connect the WunderUI MCP server, so the agent can look up every component while it works. With Claude Code:

bash

claude mcp add wunderui '--' npx -y wunderui-mcp

With Cursor, create the file in with this content:

json

{
  "mcpServers": {
    "wunderui": { "command": "npx", "args": ["-y", "wunderui-mcp"] }
  }
}

Start the agent in the project (type , or open the chat in Cursor) and paste:

text

Build a revenue dashboard in app/page.tsx with four KPI cards, a monthly goal progress bar and a recent orders table. Use WunderUI (Free plan).

What the Free plan builds

KPI cards, progress bars, a table, badges and buttons. Charts, the Data Grid and the app sidebar come with WunderUI Core or Pro; with a plan, ask for “a line chart” or “a sidebar” in the same sentence. See the plans.