logo
commerce-ui
Blog
Commerce API

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.

Install Tailwind CSS

The components are styled using Tailwind CSS v.4.

Follow the official installation guide to set it up in your project. If you are still using Tailwind CSS v.3, you can follow the Tailwindcss v.4 migration guide.

Install lucide-react icons

For the components that use icons, we use Lucide React icons.

npm install lucide-react

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 might need to install the clsx and tailwind-merge packages.

npm install clsx tailwind-merge

Add your first component

Now that you have set up the required dependencies, you can start adding components to your project.

For example, to add the StarRating component, you can just:

pnpm shadcn@latest add https://ui.stackzero.co/r/star-rating-basic-ex-01.json

And then import the component in your project like:

layouts/review.tsx
"use client";
 
import StarRatingBasic from "@/components/commerce-ui/star-rating/basic/star-rating-basic";
import { useState } from "react";
 
export default function Rating() {
  const [rating, setRating] = useState(3);
  return (
    <div className="flex flex-row items-center gap-4">
      <StarRatingBasic value={rating} onChange={setRating} maxStars={5} />
      <p>({rating})</p>
       {/* Rest of your code... */}
    </div>
  );
}

Done! 🎉

You can now manually copy-paste the components or use the CLI to add components, blocks, and pages to your project.

Some components also rely on other third-party libraries like shadcn/ui and Motion. These dependencies are specified in the component documentation.

We recommend using the CLI

If you are using the CLI to add components, you don't need to worry about the dependencies. The CLI will take care of installing them for you. See the CLI documentation for more information.

Overview

Build commerce sites faster than ever

CLI

Use the CLI to add components, blocks and pages to your project.

On this page

Power your apps with stackzero API

Create a fully functional commerce website or apps in minutes with the official API integration.

Commerce API