Images Badge
A badge with images that can be hovered to reveal more images.
Installation
Run the following command
npx shadcn@latest add @aceternity/images-badgeExamples
Default
Large
Compact
Wide Spread
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The text to display next to the folder |
| images | string[] | - | Array of image URLs (max 3 displayed) |
| className | string | - | Additional class name for the container |
| href | string | - | Optional link URL to make the badge clickable |
| target | string | - | Link target attribute (e.g., "_blank" for new tab) |
| folderSize | { width: number; height: number } | { width: 32, height: 24 } | Folder dimensions in pixels |
| teaserImageSize | { width: number; height: number } | { width: 20, height: 14 } | Image dimensions when teased (peeking) in pixels |
| hoverImageSize | { width: number; height: number } | { width: 48, height: 32 } | Image dimensions when hovered in pixels |
| hoverTranslateY | number | -35 | How far images translate up on hover in pixels |
| hoverSpread | number | 20 | How far images spread horizontally on hover |
| hoverRotation | number | 15 | Rotation angle for fanned images on hover (degrees) |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
