Grid of book cards displaying cover images, titles, authors, star ratings, and category badges. Perfect for sharing reading lists and book recommendations on personal sites.
Grid of book cards for a reading list, each showing a portrait cover image, title, subtitle, a five-star rating, and an optional category badge.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/portfolio70"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/portfolio70"This installs the block to components/beste/block/portfolio70.tsx and its dependencies.
The installed file exports portfolio70Demo alongside the block: the exact props behind the preview above. Spread it to get a working reading-list grid in one line.
import { Portfolio70, portfolio70Demo } from "@/components/beste/block/portfolio70";
export default function ReadingPage() {
return <Portfolio70 {...portfolio70Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Portfolio70 } from "@/components/beste/block/portfolio70";
export default function ReadingPage() {
return (
<Portfolio70
heading="Currently reading"
description="A few books worth your time this quarter."
items={[
{
title: "Deep Work",
subtitle: "Cal Newport",
image: { src: "https://images.unsplash.com/photo-1543002588-bfa74002ed7e?w=400&h=600&fit=crop", alt: "Deep Work book cover" },
rating: 5,
badge: "Productivity",
},
{
title: "The Pragmatic Programmer",
subtitle: "Hunt & Thomas",
image: { src: "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?w=400&h=600&fit=crop", alt: "The Pragmatic Programmer book cover" },
rating: 4,
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | – | Section heading |
description | string | – | Section intro text |
items | BookItem[] | [] | Book cards rendered in the grid |
className | string | – | Extra classes for the outer <section> |
type BookItem = {
title: string;
subtitle?: string;
image: { src: string; alt: string };
rating: number;
badge?: string;
};Star icons; item.rating fills stars via i < item.rating on a zero-based loop, so non-integer ratings fill the same number of whole stars a Math.floor would (partial stars aren't supported).h-44 w-28 box and scales on hover (group-hover/portfolio70:scale-105), while the whole card also picks up a hover:bg-muted/50 background change.oud.pics rather than Unsplash; swap image.src for any accessible cover URL.badge renders as plain muted caption text below the stars, not a shadcn Badge component, and only appears when set.portfolio101
Portfolio grid of project cards with hover-zoom imagery, numbered titles, category tags and a seal arrow link.
portfolio89
Grid of partner cards featuring circular avatars, names, roles, skill badges, and clickable links. Perfect for showcasing team members, collaborators, or professional network.
portfolio114
A monochrome three-column grid of uniform project cards, each pairing an image with a title, client / year / service chips, and a link to the case.
portfolio107
Selected-work section with a row of category filter tabs that filter a monochrome project grid client-side; each card links out to the project.
portfolio110
One large featured project with image, category, and title, followed by a row of smaller project cards. Monochrome studio styling.
portfolio106
Discipline-tabbed project gallery using shadcn Tabs with a grid of cards per category.