Hover Reveal Card
A free card component with actions that rise into view.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Hover Reveal Card is a free card hover reveal React component for Next.js, styled with Tailwind, that keeps an action row in normal flow and lifts it into view on fine-pointer hover. Keyboard focus reveals the same controls immediately, so no focused action spends a painted frame inside an invisible ancestor.
The component is pure CSS and remains server compatible. Touch, no-hover and reduced-motion users receive permanently visible actions, while the reserved row height prevents layout shift in every state.
Interaction pattern
Actions arrive without shifting the story
The action row owns its space from the start, then rises into view for a fine pointer or appears instantly for keyboard focus.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/card-hover-revealUsage
import { CardHoverReveal } from "@/components/ui/card-hover-reveal";
export function Example() {
return (
<CardHoverReveal
actions={
<a
className="rounded-md focus-visible:outline-2"
href="/work"
>
View project
</a>
}
>
<h2 className="text-2xl font-semibold">Project Atlas</h2>
<p className="mt-2 text-muted">A concise project description.</p>
</CardHoverReveal>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Main card content rendered before the action row. |
| actions | ReactNode | required | Interactive controls kept in normal flow, in the tab order and in reserved space. |
| className | string | undefined | Additional classes merged onto the card root. |
Customisation
Hover Reveal Card intentionally exposes no Tier 3 CSS variables. Use className to adjust the card width or spacing, and style the children and action controls directly with semantic Tailwind utilities:
<CardHoverReveal
className="max-w-xl p-8"
actions={
<a
className="rounded-md text-primary focus-visible:outline-2"
href="/work"
>
Read the case study
</a>
}
>
<h2 className="text-3xl font-semibold">Project Atlas</h2>
</CardHoverReveal>Frequently asked questions
- Is Hover Reveal Card free for commercial use?
- Yes. Hover Reveal Card is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Hover Reveal Card accessible and performant?
- Yes. Actions stay in normal flow and in the tab order, keyboard focus reveals them synchronously, and hidden actions cannot intercept pointer input. The optional transition changes transform and opacity only, while touch and reduced-motion users always see the final state.
- How do I customise Hover Reveal Card?
- Pass semantic Tailwind utilities through className to change the card width and spacing, then style the children and actions you provide. There are no component-specific colour or motion variables to maintain.