How to install dependencies and structure your app.
Run the init command to create a new Next.js project or to setup an existing one:
npx shadcn@latest initYou will be asked a few questions to configure components.json:
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yesnpm install next-themes"use client";
import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}Add the ThemeProvider to your root layout.
import { ThemeProvider } from "@/components/theme-provider";
export default function RootLayout({ children }: RootLayoutProps) {
return (
<>
<html lang="en" suppressHydrationWarning>
<head />
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
</>
);
}Place a mode toggle on your site to toggle between light and dark mode.
You can now start adding components to your project.