Introducing Aceternity UI Pro - 70+ premium component packs and templates to build amazing websites.
Logo

Focus Cards

Hover over the card to focus on it, blurring the rest of the cards.

Open in
Forest Adventure
Forest Adventure
Valley of life
Valley of life
Sala behta hi jayega
Sala behta hi jayega
Camping is for pros
Camping is for pros
The road not taken
The road not taken
The First Rule
The First Rule

Installation

Run the following command

npx shadcn@latest add @aceternity/focus-cards

Props

ComponentPropTypeDescription
CardcardCardThe card object containing title and src properties
CardindexnumberThe index of the card in the array
Cardhoverednumber | nullThe index of the currently hovered card, or null if no card is hovered
CardsetHoveredReact.Dispatch<React.SetStateAction<number | null>>Function to update the hovered state
FocusCardscardsCard[]An array of Card objects to be rendered

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

Aceternity UI Pro Demo - Light Mode
A product by Aceternity
Building in public at @mannupaaji