how to use shadcn ui in next js 13

In this tutorial, we will see how to install & setup shadcn ui in next js 13. We will see how to use next 13 with typescript. there is multiple way you can use shadcn ui in next js 13.

1. Clone Next 13 Shadcn UI Repo

Run the following command to create a new Next.js project using the next-template template.

# with npm
npx create-next-app -e https://github.com/shadcn/next-template
# with yarn
yarn create next-app -e https://github.com/shadcn/next-template

This creates a new Next.js 13 project with the following features.

Next.js App directory

Tailwind CSS

TypeScript

ESLint

Prettier

page.tsx

import Link from "next/link"

import { siteConfig } from "@/config/site"
import { buttonVariants } from "@/components/ui/button"

export default function IndexPage() {
  return (
    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10">
      <div className="flex max-w-[980px] flex-col items-start gap-2">
        <h1 className="text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
          Beautifully designed components <br className="hidden sm:inline" />
          built with Radix UI and Tailwind CSS.
        </h1>
        <p className="max-w-[700px] text-lg text-muted-foreground">
          Accessible and customizable components that you can copy and paste
          into your apps. Free. Open Source. And Next.js 13 Ready.
        </p>
      </div>
      <div className="flex gap-4">
        <Link
          href={siteConfig.links.docs}
          target="_blank"
          rel="noreferrer"
          className={buttonVariants()}
        >
          Documentation
        </Link>
        <Link
          target="_blank"
          rel="noreferrer"
          href={siteConfig.links.github}
          className={buttonVariants({ variant: "outline" })}
        >
          GitHub
        </Link>
      </div>
    </section>
  )
}

install shadcn ui in next js 13

2. Install Shadcn UI in Next 13 with CLI

Run below command to create a new project.

# with npm
npx create-next-app my-app
# with yarn 
yarn create next-app my-app
# with pnpm
pnpm create next-app my-app

Let's Build a Project Like This.

npx create-next-app@latest my-app --typescript --tailwind --eslint

Run shadcn cli.

# with npm
npx shadcn-ui init

This will install dependencies, setup Tailwind CSS, and configure the cn utils for you.

Note: For latest version you can check https://ui.shadcn.com/docs/installation

If you want Manual Installation you can check https://ui.shadcn.com/docs/installation .

Related Posts

create a accordion in nextjs 13 with shadcn ui

create sidebar in next 13 with shadcn ui

create footer section in next 13 with shadcn ui

create file upload in nextjs 13 with shadcn ui

next 13 with shadcn ui input field example

next 13 with shadcn ui cards example

next 13 with shadcn ui search bar example

next 13 with shadcn ui login page example

next 13 with shadcn ui sign up form example

next 13 with shadcn ui radio group example

next 13 with shadcn ui buttons example

next 13 with shadcn ui pagination example

next 13 with shadcn ui table example

next 13 with shadcn ui checkbox example

next 13 with shadcn ui dropdown menu example

how to use skeleton loading next 13 with shadcn ui

how to use data table next 13 with shadcn ui

how to use modal dialog next 13 with shadcn ui

how to use tabs next 13 with shadcn ui

how to use toggle switch next 13 with shadcn ui