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

Create a new Next.js project

To get started with VizStats UI, you'll need to create a new Next.js project. Follow these steps:

npx create-next-app@latest --ts --tailwind my-app

cd my-app

Setup shadcn/ui

Next, install shadcn/ui using your preferred package manager. Run the following command in your terminal:

npx shadcn@latest init

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

npx shadcn@latest add button

Install additional dependencies

Install the necessary dependencies using your preferred package manager:

npm i framer-motion zustand react-responsive

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.