Installation

Follow these steps to set up VizStats UI in your project using Next.js and shadcn/ui. This guide provides a comprehensive setup process, including all necessary prerequisites.

Prerequisites

Before installing VizStats UI, ensure you have the following installed:

• Node.js (v14.0.0 or later)
• A package manager: npm, pnpm, yarn, or bun

Step 1: Create a new Next.js project

Start by creating a new Next.js project with TypeScript and Tailwind CSS:

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

Step 2: Navigate to your project directory

cd my-vizstats-app

Step 3: Install shadcn/ui

Install and initialize shadcn/ui in your project:

npx shadcn@latest init

During the initialization, you'll be prompted to answer some questions. Here are the recommended answers:

Would you like to use TypeScript (recommended)? › yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › yes

Step 4: Install additional dependencies

Install the following additional dependencies:

npm install framer-motion gsap zustand react-responsive

Step 5: Add components

You can now start adding shadcn/ui components to your project. For example, to add the Button component:

npx shadcn@latest add button

Next Steps

Now that you have set up your project with Next.js, shadcn/ui, and the additional dependencies, you can start building your application using VizStats UI components. Check out our component documentation for usage examples and customization options.