Docs
Animated Card 1
Animated Card 1
An animated hover card that can showcase almost anything—it all comes down to the caption you choose.
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 { Visual1 } from "@/components/ui/visual-1";<AnimatedCard>
<CardVisual>
<Visual1 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-1 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