Random Data Visualization
Displaying some interesting stats.
This card will tell everything you want
import {
AnimatedCard,
CardBody,
CardDescription,
CardTitle,
CardVisual,
} from "@/components/ui/animated-card"
import { Visual3 } from "@/components/ui/visual-3"
export function AnimatedCard3Demo() {
return (
<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>
)
}
pnpm dlx shadcn@latest add https://badtz-ui.com/r/animated-card-3.json
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>animated-card props.
| Prop | Type | Default |
|---|---|---|
className? | string | - |
props? | React.HTMLAttributes<HTMLDivElement> | - |
visual-2 props.
| Prop | Type | Default |
|---|---|---|
mainColor? | string | "#8b5cf6" |
secondaryColor? | string | "#fbbf24" |
gridColor? | string | "#80808015" |
This component is inspired by Wope