Install Next.js
Set up a new Next.js project for Hex UI components
Install Next.js
Get started by creating a new Next.js project. Hex UI components work best with Next.js 14+ and the App Router.
Create Project
Use the Next.js CLI to create a new project:
npx create-next-app@latest my-appWhen prompted, configure your project:
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? … Yes
✔ Would you like to customize the default import alias (@/*)? … YesNavigate to Project
cd my-appInstall Dependencies
Install the required dependencies for Hex UI components:
npm install framer-motion clsx tailwind-merge class-variance-authorityProject Structure
Your project should look like this:
my-app/
├── src/
│ ├── app/
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components/
│ └── lib/
├── public/
├── next.config.js
├── package.json
├── tailwind.config.js
└── tsconfig.jsonConfigure Components
Create a components.json file in your project root:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/app/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}Next Steps
- Install Tailwind CSS - Configure Tailwind CSS v4
- Browse Components - Explore available components
- Registry Setup - Learn about component installation