Blog Card
Article card with a gradient cover, category chip, author and read time, using a stretched link with hover lift and arrow nudge.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
BlogCardProps
Also accepts all props of Omit<React.ComponentProps<"article">, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| title* required | string | — | — |
| excerpt* required | string | — | — |
| category* required | string | — | — |
| author* required | string | — | — |
| readTime* required | string | — | — |
| href | string | "#" | — |
| coverClassName | string | "from-indigo-500 via-violet-500 to-pink-500" | Tailwind gradient utilities for the cover, e.g. "from-indigo-500 to-pink-500" |
Install
$ npx shadcn@latest add https://chromotion.dev/r/blog-card.json