Installation

A simple guide to set up commerce ui with the required dependencies and structure.

This project is built with Next.js, using TypeScript and Tailwind CSS for all components. Some components also rely on shadcn/ui and Motion.

Install Tailwind CSS

The components are styled using Tailwind CSS.
Follow the official installation guide to set it up in your project.

Install Motion

To use components with animations, you’ll need to add Motion to your project.

npm install motion

Add a Utility Helper

To make it easier to conditionally apply Tailwind CSS classes, add this cn helper function to your project.

lib/utils.ts

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

You're good to go!

Installation

Install Tailwind CSS

Install Motion

Add a Utility Helper

On this page