Project Card

A project card with a cover image, dates, technology tags, and source and live demo links.

A fantastic new web application with real-time features and a modern UI.

Installation

Install the component automatically via Shadcn CLI.

npx shadcn@latest add https://www.grettech.com/api/registry/project-card

An internal company dashboard. The source code is private and there is no public demo.

Private source

Prop	Type	Default	Description
project	Project	Sample project	The project to show. Leave it out to preview the card with sample content; a passed project shows only the fields you set.
imageAs	React.ElementType	"img"	Component used for the cover image, e.g. next/image's Image. It receives src, alt, sizes and className.
linkAs	React.ElementType	"a"	Component used for the Source and Live Demo links, e.g. next/link's Link. It receives href, target, rel and className.
variant	"default" \| "outline"	"default"	"outline" draws a thicker border.
size	"default" \| "sm"	"default"	"sm" uses smaller text.
className	string	-	Extra classes for the card.
...props	React.HTMLAttributes<HTMLDivElement>	-	Any other attributes (id, style, aria-*, etc.), passed to the card.