How to install Radix Themes in the Next.js App Router?

Next.js App Router

How to install Radix Themes in the Next.js App Router?

Install and set up the Radix themes.

The Radix UI team launched a new library called Radix Themes. Previously In Radix UI, You downloaded or installed the Radix component individually according to your project requirement.

If you require a dialog component or aspect ratio, you can easily install Separately one by one.

# Dialog
npm install @radix-ui/react-dialog

# Aspect Ratio
npm install @radix-ui/react-aspect-ratio

Now in the Radix Theme library, compile every component, and turn it into a single library. You do not need to install components separately in your project. Now You import every component directly from the Radix themes.

import { AspectRatio, Dialog } from "@radix-ui/themes";

## Note

All the code available on GitHub and check out the live demo website.

Content

· How to install Radix Themes Package in the Next.js app router?
∘ Steps
· Create a new nextjs Application.
∘ Install Radix Themes
· Setup Radix Theme
∘ Import the CSS file
∘ Add the Theme component
∘ Start your development server
· Build a Dark mode toggle.
∘ Steps
∘ Install the…