Installation

shadcn-admin-kit is a React library of components for admin apps. You can install it with any React framework:

• Install with Next.js
• Install with Vite

Install with Next.js

The first step is to create a new Next.js project using the create-next-app command. Name your app ‘e.g., my-app, and answer Yes to the question about recommended Next.js defaults:

npx create-next-app@latest
✔ What is your project named? … my-app
✔ Would you like to use the recommended Next.js defaults? › Yes, use recommended defaults
...
Success! Created my-app at /path/to/my-app

Next, go to your project directory and pull the shadcn-admin-kit components using the shadcn command:

cd my-app
npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/admin.json
✔ You need to create a components.json file to add components. Proceed? … yes
✔ Which color would you like to use as the base color? › Neutral
✔ Writing components.json.
✔ Checking registry.
✔ Updating CSS variables in app/globals.css
✔ Installing dependencies.
✔ Created 114 files

This will add some components to the components/admin and components/ui directories, as well as some utilities inside the hooks/ and lib/ directories.

You’re ready to bootstrap your app. Create an app/admin directory and an app/admin/App.tsx component file that will contain the admin app.

app/admin/App.tsx

"use client";

import { Admin } from "@/components/admin";

const App = () => <Admin></Admin>;

export default App;

Expose that admin app at the /admin URL by adding a app/admin/page.tsx file. this page should dynamically import the admin component and render it with SSR disabled:

app/admin/page.tsx

"use client";

import dynamic from "next/dynamic";

const App = dynamic(() => import("./App"), {
  ssr: false, // Required to avoid react-router related errors
});

export default function Page() {
  return <App />;
}

Finally, run npm run dev and go to http://localhost:3000/admin to access your admin app.

Next step: Read the Quick Start Guide to learn how to use the components in your admin app.

Install with Vite.js

shadcn-admin-kit is built on React, so you need to create a Vite single-page app to use it.

npm create vite@latest my-app -- --template react-ts
or
yarn create vite my-app --template react-ts

Then, cd into your new project directory and install shadcn/ui. To do so, add Tailwind CSS.

npm install tailwindcss @tailwindcss/vite
# or
yarn add tailwindcss @tailwindcss/vite

Install node types as a development dependency:

npm install -D @types/node
# or
yarn add -D @types/node

Replace everything in src/index.css with the following:

src/index.css

@import "tailwindcss";

Edit tsconfig.json file. Add the baseUrl and paths properties to the compilerOptions section of the tsconfig.json and tsconfig.app.json files:

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    // ...
   "verbatimModuleSyntax": true,
   "verbatimModuleSyntax": false,
   "baseUrl": ".",
   "paths": {
     "@/*": [ "./src/*" ]
   },
  }
}

Add the following code to the vite.config.ts so your app can resolve paths without error:

vite.config.ts

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Now, run the shadcn init command to setup your project:

npx shadcn@latest init
# or
yarn shadcn init

You will be asked a few questions to configure components.json.

You can now start adding components to your project. Let’s start with the shadcn-admin-kit components.

npx shadcn@latest add https://marmelab.com/shadcn-admin-kit/r/admin.json

The main entry point of your new application is main.tsx, which renders the App component into the DOM.

src/main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
    <StrictMode>
        <App />
    </StrictMode>,
);

The <App> component currently renders a default Vite application. You can replace all its content by the following to serve your new shadcn-admin-kit application.

src/App.tsx

import { Admin } from "@/components/admin";

const App = () => <Admin></Admin>;

export default App;

It’s time to test! Run the following command to run your project.

npm run dev
# or
yarn dev

You should see this:

Next step: Read the Quick Start Guide to learn how to use the components in your admin app.