ObsidianUIObsidianUI
DocumentationLeave Rating

Leave Rating

An interactive star rating component with an animated emoji face that changes expression based on the selected rating.

Install using CLI

npx shadcn@latest add "https://obsidianui.dev/r/leave-rating.json"

Install Manually

1

Install dependencies

npm install framer-motion lucide-react clsx tailwind-merge
2

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';


export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3

Copy the source code

Copy the code into components/ui/leave-rating.tsx

Usage

1import { LeaveRating } from "@/components/ui/leave-rating"
2

3export function Demo() {
4return (
5  <LeaveRating
6    question="How was your experience?"
7    buttonText="Submit"
8    onSubmit={(rating) => console.log("Rating:", rating)}
9  />
10)
11}

Props

Prop NameTypeDefaultDescription
questionstring"How was your experience?"Question text
buttonTextstring"Submit"Submit button text
onSubmit(rating: number | false) => void-Callback on submit
Jelly LoaderLight Lines