Docs
Animated Card 3
Animated Card 3
An animated hover card that can showcase almost anything—it all comes down to the caption you choose.
Random Data Visualization
Displaying some interesting stats.
+15,2%
+18,7%
Just find the right caption
This card will tell everything you want
Installation
pnpm dlx shadcn@latest add to-setup
Usage
import {
AnimatedCard,
CardVisual,
CardBody,
CardTitle,
CardDescription,
} from "@/components/ui/animated-card";
import { Visual3 } from "@/components/ui/visual-3";<AnimatedCard>
<CardVisual>
<Visual3 mainColor="#ff6900" secondaryColor="#f54900" />
</CardVisual>
<CardBody>
<CardTitle>Just find the right caption</CardTitle>
<CardDescription>This card will tell everything you want</CardDescription>
</CardBody>
</AnimatedCard>Props
animated-card props.
| Prop | Type | Description | Default |
|---|---|---|---|
| className | String | Additional custom classes. | - |
| props | React.HTMLAttributes<HTMLDivElement> | Additional HTML attributes. | - |
visual-3 props.
| Prop | Type | Description | Default |
|---|---|---|---|
| mainColor | String | Main color used for certain elements in the component. | "#8b5cf6" |
| secondaryColor | String | Secondary color used for other elements in the component. | "#fbbf24" |
| gridColor | String | Grid background color for the component. | "#80808015" |
Note
- Many more cards are coming in the future. If you need a card for a specific theme, feel free to send me a request. If it's something that could benefit many people, I'll build it.
Credits
This component is inspired by Wope