Installation

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

pnpm add lucide-react

bun add lucide-react

Add a Utility Helper

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

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

pnpm add clsx tailwind-merge

bun add 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://unlogg.com/r/star-rating-basic-ex-01.json

npx shadcn@latest add https://unlogg.com/r/star-rating-basic-ex-01.json

bun shadcn@latest add https://unlogg.com/r/star-rating-basic-ex-01.json

And then import the component in your project like:

"use client";

import StarRatingBasic from "@/components/unlogg-ui/test";
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>
  );
}