How to Install shadcn in a Next.js Project: Step-by-Step Guide
......
Loading...
Similar articles
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Never miss an update
Subscribe to receive news and special offers.
By subscribing you agree to our Privacy Policy.
Installation may seem difficult, but this guide will walk you through each step for a smooth installation. It offers powerful, pre-built components that save time while maintaining an elegant, consistent design.
Shadcn is a great addition to a project. Its flexible styles and features make it stand out. Its customizable components and easy-to-understand documentation have changed the way we develop websites.
If you use Typescript, you can create one with the following command:
To begin, create a new Next.js project with built-in TypeScript, Tailwind CSS, and ESLint configuration:
npx create-next-app@latest my-shadcn-app --typescript --tailwind --eslintThen, navigate to your project directory:
cd my-shadcn-appIf you don't need Typescript, you can use the following command and follow the prompts:
First things first, if you’re starting from scratch, creating a new Next.js project is quick and easy. Just run:
npx create-next-app@latest my-shadcn-appNavigate to your project directory:
cd my-shadcn-appThis command sets up a new project with the essential tools to build a robust application. Already have a project? No problem! Just ensure it’s up to date to make sure everything runs smoothly.
To start using shadcn, initialize the library in your project. . Don’t worry, it’s a breeze:
npx shadcn-ui@latest initThis command will guide you through configuring components.json to set up the base style, color, and CSS variables. Choose your preferred options, such as the default style, base color (like Slate), and whether or not to use CSS variables.
Tip: Select the elements you want to use in your code by answering a few questions about your project structure and configuring the
components.jsonfile.
By default, shadcn uses the Inter font, which you can replace with any other font of your choice. To configure Inter:
import '@/styles/globals.css'
import { Inter as FontSans } from 'next/font/google'
import { cn } from '@/lib/utils'
const fontSans = FontSans({
subsets: ['latin'],
variable: '--font-sans',
})
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang='en' suppressHydrationWarning>
<head />
<body
className={cn(
'min-h-screen bg-background font-sans antialiased',
fontSans.variable
)}
>
...
</body>
</html>
)
}Update your tailwind.config.js to extend the theme with the new font:
const { fontFamily } = require('tailwindcss/defaultTheme')
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: ['app/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}'],
theme: {
extend: {
fontFamily: {
sans: ['var(--font-sans)', ...fontFamily.sans],
},
},
},
}Great news! You can now run the npm run dev command to see a preview of the home page. While you won't see any changes yet, you'll be able to install the components you want to use very soon!
Your globals.cssfile will update like this:
@tailwind base;
@tailwind components;
@tailwind utilities;For more information, you can customize your theme with the copy paste from this link : Shadcn Theme
Use this structure for your project before using and installing the components. It is well organized and will simplify your development process:
├ my-shadcn-app
...
├── app
│ ├── layout.tsx
│ └── page.tsx
├── components
│ ├── ui
│ │ ├── alert-dialog.tsx
│ │ ├── button.tsx
│ │ ├── dropdown-menu.tsx
│ │ └── ...
│ ├── main-nav.tsx
│ ├── page-header.tsx
│ └── ...
├── lib
│ └── utils.ts
├── styles
│ └── globals.css
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── tsconfig.jsoncomponents/ui.<MainNav /> and <PageHeader /> can be placed in the main components folder.lib folder.With Tailwind CSS configured, you can now use shadcn components. Import the necessary components into your files:
import { Link } from 'shadcn';Then, use these components in your React pages or components:
export default function Page() {
return (
<div>
<Link href='https://shadcn.com'>Click here</Link>
</div>
)
}Congratulations on successfully installing shadcn! By completing these steps, you've created a powerful development environment for building sleek and user-easy interface. Continue experimenting with the components to maximize their capabilities and enhance your projects.
Hesitate to try different approaches and tailor your setup to suit your particular requirements. Enjoy creating with shadcn and Next.js!