Project Setup
Create Next.js app
npx create-next-app@15.0.3choices:
√ What is your project named? ... google-docs-clone
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like your code inside a `src/` directory? ... No / Yes
√ Would you like to use App Router? [recommended] ... No / Yes
√ Would you like to use Turbopack for next dev? ... No / Yes
√ Would you like to customize the import alias [@/* by default]? ... No / YesDon’t worry if you see the following npm warns:
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm warn deprecated eslint@8.57.1: This version is no longer supported. Please see https://eslint.org/version-support for other options.As long as you see Success!, it means that you’ve finished the first step.
Now cd to your project file, and open it with vscode:
cd google-docs-clone
code .Now you can see your project structure like this:
- favicon.ico
- global.css
- layout.tsx
- page.tsx
- .eslintrc.json
- .gitignore
- next-env.d.ts
- next.config.ts
- package-lock.json
- package.json
- postcss.config.mjs
- README.md
- tailwind.config.ts
- tsconfig.json
To make sure you have the same package version with me, please check your package.json file:
{
"name": "google-docs-clone",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",
"next": "15.0.3"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "15.0.3"
}
}Then you can run:
npm run devand visit http://localhost:3000 in your browser. You should see the default page of Next.js:

Install ShadcnUI
ShadcnUI is a group of beautifully designed components that you can copy and paste into your apps, and it’s accessible, customizable and open source.
We can follow the installation document for NextJS .
To ensure that we have the same version, don’t use npx shadcn@latest init, use:
npx shadcn@2.1.6 initto initialize shadcn.
You could run npx shadcn@latest --version to check the version of the latest shadcn.
Here are the choices:
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
√ Which style would you like to use? » New York
√ Which color would you like to use as the base color? » Neutral
√ Would you like to use CSS variables for theming? ... no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src\app\globals.css
Installing dependencies.
It looks like you are using React 19.
Some packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).
√ How would you like to proceed? » Use --legacy-peer-deps
✔ Installing dependencies.
✔ Created 1 file:
- src\lib\utils.ts
Success! Project initialization completed.
You may now add components.You could check the commit changes in the vscode to see what have been added to the project:


we can see the configs about shadcn we just initialized:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}You could check other file changes by clicking the filenames in the source control area of vscode.
Add Shadcn components
You can add any components of shadcn you want by just running the installation command in your terminal.
For simplicity, we install all components at once.
Again, to ensure we have the same version, run the specific version, which is @2.1.6 in this project, instead of latest:
npx shadcn@2.1.6 add --allthen choose the --legacy-peer-deps as we did when initializing.
Successfully installed shadcn components in terminal
✔ Installing dependencies.
✔ Created 50 files:
- src\components\ui\accordion.tsx
- src\components\ui\alert.tsx
- src\components\ui\alert-dialog.tsx
- src\components\ui\button.tsx
- src\components\ui\aspect-ratio.tsx
- src\components\ui\avatar.tsx
- src\components\ui\badge.tsx
- src\components\ui\breadcrumb.tsx
- src\components\ui\calendar.tsx
- src\components\ui\card.tsx
- src\components\ui\carousel.tsx
- src\components\ui\chart.tsx
- src\components\ui\checkbox.tsx
- src\components\ui\collapsible.tsx
- src\components\ui\command.tsx
- src\components\ui\dialog.tsx
- src\components\ui\context-menu.tsx
- src\components\ui\drawer.tsx
- src\components\ui\dropdown-menu.tsx
- src\components\ui\form.tsx
- src\components\ui\label.tsx
- src\components\ui\hover-card.tsx
- src\components\ui\input.tsx
- src\components\ui\input-otp.tsx
- src\components\ui\menubar.tsx
- src\components\ui\navigation-menu.tsx
- src\components\ui\pagination.tsx
- src\components\ui\popover.tsx
- src\components\ui\progress.tsx
- src\components\ui\radio-group.tsx
- src\components\ui\resizable.tsx
- src\components\ui\scroll-area.tsx
- src\components\ui\select.tsx
- src\components\ui\separator.tsx
- src\components\ui\sheet.tsx
- src\components\ui\sidebar.tsx
- src\components\ui\tooltip.tsx
- src\hooks\use-mobile.tsx
- src\components\ui\skeleton.tsx
- src\components\ui\sonner.tsx
- src\components\ui\switch.tsx
- src\components\ui\table.tsx
- src\components\ui\tabs.tsx
- src\components\ui\textarea.tsx
- src\components\ui\toast.tsx
- src\hooks\use-toast.ts
- src\components\ui\toaster.tsx
- src\components\ui\toggle.tsx
- src\components\ui\toggle-group.tsxNow we have all the shadcn components installed. Then let’s try something on the home page.