gamma logo

1

Rabbit Mascot

An expressive rabbit boy mascot with round glasses and mood-driven face animations.

Installation

pnpm dlx shadcn@latest add @gammaui/rabbit-mascot

Usage

"use client"
 
import { useState } from "react"
 
import { RabbitMascot, type RabbitMood } from "@/components/rabbit-mascot"
 
export default function Example() {
  const [mood, setMood] = useState<RabbitMood>("neutral")
 
  return (
    <RabbitMascot
      mood={mood}
      size={280}
      onClick={() => setMood("happy")}
    />
  )
}

Moods

MoodDescription
neutralDefault smile with round glasses
happyArc eyes, open mouth, sparkles
sadFurrowed brows and tears
loveStar eyes and heart twinkles
winkyOne-eye wink
surprisedSmall O mouth
thinkingHalf-closed lids
side-eyeSide glance
shyPeeking / password face

Props

PropTypeDefaultDescription
moodRabbitMood"neutral"Current facial expression
sizenumber280Width in pixels
classNamestringExtra CSS classes
onClick() => voidOptional click handler