---
title: Quickstart
description: Install a tweakcn preset in a new Next.js app and check light and dark mode. You do not need an account.
url: https://tweakcn.thally.app/quickstart
---

# Quickstart

Install a tweakcn preset in a new Next.js app and check light and dark mode. You do not need an account.

After this guide, you will have a Next.js app with shadcn/ui and the
**Modern Minimal** theme from tweakcn. The guide takes about 10 minutes.

## Before you begin

- Node.js 20 or later, with `npm`.
- A terminal and a web browser.

To start a project and apply the theme in one command, see
[Start a project with a theme](/cli/shadcn-create).

#### Create a Next.js app

```bash
npx create-next-app@latest my-app --ts --tailwind --eslint --app --no-src-dir --use-npm --yes
cd my-app
```

#### Add shadcn/ui

```bash
npx shadcn@latest init -y -d
npx shadcn@latest add button card
```

The first command creates `components.json` and adds the default theme to
`app/globals.css`.

#### Choose a theme in tweakcn

Open [the editor with Modern Minimal](https://tweakcn.com/editor/theme?theme=modern-minimal).
Select **Code**. The **Theme Code** dialog shows the install command.

![Theme Code dialog with the shadcn add command](/images/code-panel.png)

#### Install the theme

```bash
npx shadcn@latest add https://tweakcn.com/r/themes/modern-minimal.json
```

If the CLI asks to overwrite files, answer yes. The command updates
`app/globals.css`.

#### Load the theme fonts

The theme sets `--font-sans: Inter, sans-serif`, but the command does not load
Inter. Follow [Load the theme fonts](/guides/load-theme-fonts) to fix the font.

#### Show the theme

Replace `app/page.tsx` with this code.

```tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center p-8">
      <Card className="w-80">
        <CardHeader>
          <CardTitle>Modern Minimal</CardTitle>
        </CardHeader>
        <CardContent className="flex gap-2">
          <Button>Primary</Button>
          <Button variant="outline">Outline</Button>
        </CardContent>
      </Card>
    </main>
  )
}
```

Run `npm run dev` and open http://localhost:3000. The primary button is blue.

#### Check dark mode

Add the `dark` class to the `<html>` element in `app/layout.tsx`.

```tsx
<html lang="en" className="dark">
```

The page uses the dark colors from the theme. Remove the class when you are done.
To add a theme switch, use [next-themes](https://ui.shadcn.com/docs/dark-mode/next).

## Next steps

#### [Modify a theme](/themes/modify-a-theme)

    Change the preset before you install it.

#### [Fix install problems](/troubleshooting)

    Solve font, color, and URL problems.