Anime Card

A glassmorphism-styled media card perfect for hero sections or media showcases.

Preview

Demon Slayer
NEW

Demon Slayer

98% Match

Component not found in registry.

Usage

tsx
12 lines
1
2
3
4
5
6
7
8
9
10
11
12
import { AnimeCard } from "@/components/ui/anime-card"

export default function MyPage() {
  return (
    <div className="flex justify-center p-8">
      <AnimeCard 
         title="Character Name"
         matchPercentage={90}
      />
    </div>
  )
}

Props

PropTypeDescription
imagestringURL of the background image (default: Unsplash Image).
titlestringTitle text displayed on the card (default: 'Person').
matchPercentagenumberMatch percentage value (default: 95).
progressnumberProgress bar percentage (0-100) (default: 75).
badgeTextstringText inside the top badge (default: 'AUTO').
badgeColorstringTailwind class for the badge/progress color (default: 'bg-green-500').
classNamestringAdditional CSS classes.