Getting Started

Quick setup guide to get your design system up and running in minutes.

Requirements

Node.js

18.0 or higher

required

npm/yarn/pnpm

Latest version

required

Next.js

13.0 or higher

recommended

TypeScript

5.0 or higher

optional

Installation

1

Create a new Next.js project

Start with a fresh Next.js application or use an existing one.

Terminal
bash
npx create-next-app@latest my-design-system
cd my-design-system
2

Install Tailwind CSS

Set up Tailwind CSS for styling your components.

bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js:

javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
3

Initialize shadcn/ui

Set up the shadcn/ui component library.

bash
npx shadcn-ui@latest init

Configuration

You'll be prompted to configure your project. Choose your preferred settings for TypeScript, styling, and components location.

4

Install CraftJS

Add CraftJS for the interactive page builder functionality.

bash
npm install @craftjs/core @craftjs/layers @craftjs/utils
5

Add base components

Install essential shadcn/ui components for your design system.

bash
npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add card
npx shadcn-ui@latest add badge
npx shadcn-ui@latest add dialog
6

Create your first page

Set up the basic structure and start building.

jsx
// pages/index.js
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'

export default function Home() {
  return (
    <div className="p-8">
      <h1 className="text-4xl font-bold mb-4">
        Welcome to your Design System
      </h1>
      <Card className="p-6">
        <Button>Get Started</Button>
      </Card>
    </div>
  )
}

You're all set!

Your design system is ready. Run npm run dev to start development.

Next Steps

Explore Components

Browse our collection of atoms, molecules, and organisms in the Blocks section.

View Components

Try the Playground

Test and build layouts using our interactive CraftJS-powered editor.

Open Playground

Resources

shadcn/ui Docs

Official documentation

CraftJS Docs

Page builder documentation

Tailwind CSS

Utility-first CSS framework