Focus Cards

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

Forest Adventure

Valley of life

Sala behta hi jayega

Camping is for pros

The road not taken

The First Rule

Installation

npx shadcn@latest add @aceternity/focus-cards

Component	Prop	Type	Description
`Card`	`card`	`Card`	The card object containing title and src properties
`Card`	`index`	`number`	The index of the card in the array
`Card`	`hovered`	`number \| null`	The index of the currently hovered card, or null if no card is hovered
`Card`	`setHovered`	`React.Dispatch<React.SetStateAction<number \| null>>`	Function to update the hovered state
`FocusCards`	`cards`	`Card[]`	An array of Card objects to be rendered

Next.js 15, Tailwind CSS v4 and Motion for react powered templates

100+ templates and blocks combined

Ready to copy paste component blocks, save days of development time