Hover Card
Esthetic hover card component with a glowing effect on the edges.
NOTE: If you are seeing bad background color try editing the after:bg-background/90 class in the HoverCard component, or try twiking your children's bg color.
Examples
Effect on Card
Free plan
2 Monthly free games, trials and perks for you to enjoy.
- Dedicated Low-Latency Gaming Servers
- Monthly Multiplayer Tournament Entry
- Exclusive In-Game Rewards & Cosmetics
- Early Access to New Game Releases
- Ad-Free Gaming Experience
Effect on custom elements with colours
Hey Kitty
Kitty is so chill, because she uses Aether UI. Are you using it?
April 2, 2025
Installation
npx shadcn@latest add "https://aetherui.in/c/hover-card.json"
Usage
You can customize the content of the hover card by passing the following props to the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string (Optional) | blue | The color of the hover card. |
| className | string | Additional class names to be applied to the hover card. | |
| children | ReactNode | Content to be displayed inside the hover card. | |
| size | number (Optional) | 300 | The size of the hover card. |
| ...props | any | Additional props to be passed to the hover card. |