Project Cards at a Glance
A projects list condenses a portfolio of active work into a single scannable view. This block renders it as a responsive grid of project cards, each carrying a color coded top border and icon, a category badge, a description, a progress bar with its percentage, a due date with time remaining, and an overlapping stack of team member avatars. A dropdown menu on every card holds quick actions, and tooltips reveal teammate names on hover.
The result reads like the overview screen of a project management tool, but it arrives as one self contained React file you can reshape freely.
Dashboards Where the Grid Belongs
Admin panels and team dashboards are the natural home: drop the grid on a workspace landing page so members see status, ownership, and deadlines without opening each project. Agencies can use it as a client work overview, and product teams as a lightweight portfolio wall next to deeper tools.
It pairs well with neighboring blocks. Cards can link into a kanban board for execution detail or a task list for the day to day, turning the grid into the navigation layer of a small PM suite.
Built on Card, Progress, and Avatar
The block composes six Shadcn UI components: Card as the container, Progress for completion, Avatar with image and fallback for the team stack, Badge for categories, Button for triggers, and DropdownMenu plus Tooltip for the interactive touches. Project data is a typed array at the top of the file, with Lucide icons assigned per project.
There is no state library and no client fetching, it is a pure presentation component in React and TypeScript. That makes it cheap to render server side and trivial to hydrate with real data from any source.
Status Colors That Survive Dark Mode
Each project's accent, the top border, icon tint, and progress tone, is defined with paired Tailwind classes that include dark variants, so the color coding stays readable when the theme flips. Everything else rides on the standard tokens: bg-card, text-muted-foreground, and border colors from globals.css.
To rebrand, adjust the token variables for the base surfaces and swap the accent class pairs if your product uses a different status palette. Grid density is a one line change to the Tailwind grid columns.
Bringing In Your Own Projects
Install the block with the shadcn CLI command at the top of its page, available for npm, pnpm, yarn, and bun, or copy the single page file from the code tab. As a pro block, code access and CLI install come with the All Access plan.
React, Vuejs, and Svelte versions are all available, the Vuejs and Svelte editions built on the shadcn-vue and shadcn-svelte ports. Wiring real data means mapping your projects API onto the card array, fields for title, category, progress, due date, and members are already modeled, and attaching handlers to the dropdown actions for edit, archive, or share.