Shadcn Portfolio Blocks
Build a portfolio with 500 Portfolio blocks for shadcn/ui. Heroes, work grids, case studies, about, services, and contact sections for creatives and studios.
Portfolio Developer Portfolio: Skills and Projects
A two-column block with the technology stack organised into labelled chip categories on the left and a ruled list of representative projects on the right.
Portfolio Awards and Recognition: Single Award Feature
A two-column block spotlighting one award with a ruled context list on the left and a large award callout card on the right.
Portfolio Resume and CV: Compact Resume
A tight single-column CV with a positioned summary, three bulleted roles, and a two-column skills and education grid.
Portfolio Stat: Inline Stats Row
A single ruled band of four tabular figures with short labels, the slimmest way to surface career numbers without a card grid.
Portfolio Studio and Team: Founders Row
A three-column grid of studio founder cards each with a named avatar, role, and a single concrete bio line.
Portfolio Collaboration: Collab Logos
A four-column wordmark grid of collaborated companies each showing the brand name and the type of engagement as a secondary line.
Portfolio Press Kit: Quick Facts
A ruled definition list of ten key editorial facts covering name, location, focus, notable work, and a clickable press contact email.
Portfolio Shop and Product: Featured Product
A two-column split highlighting one digital product with a Placeholder image, price in tabular-nums, description, and an itemised includes list.
Portfolio Now and Use: Uses Page
Daily gear and software listed across Desk Setup, Software, and Everyday Carry groups, each item with a model name and a one-line why.
Portfolio Speaking and Event: Past Talks Grid
A three-column card grid of speaking engagements showing event, talk title, year, and a watch link or a no-recording note.
Portfolio Now and Use: Reading List
Books listed as ruled rows with title, author, a one-line connection to current practice, and a reading, finished, or queued status badge.
Portfolio Process: Checklist Process
Four project stages in a two-column card grid each listing the deliverables as checked items so scope is unambiguous.
Portfolio Music and Audio: Releases Row
A four-column grid of recent album and EP cards each with a Placeholder cover, title, year, format, and a listen link.
Portfolio Availability and Hire: Next Opening Card
A two-column split showing the next available start date with slot details and a three-step claim process ending in a contact action.
Portfolio Now and Use: Gear List
Kit organised into category groups as cards with a placeholder visual, a model name, and a sentence on why each piece earned its place.
Portfolio Availability and Hire: Status Band
A slim card stating current booking status, next opening month, and response time with a direct contact button in one horizontal strip.
Portfolio Social and Link: Links Card
A compact bordered card listing email, social handles, and a newsletter as ruled rows with an icon and platform label per entry.
Portfolio Social and Link: Icon Row
A centered strip of brand-icon links for GitHub, LinkedIn, X, and Instagram with accessible labels and hover transitions.
Portfolio Process: Two Column Process
A working philosophy in three paragraphs on the left balanced against four numbered process steps in a ruled card on the right.
Portfolio Experience: Highlights Band
A four-cell bordered grid strip presenting standout career moments each with a bold label and a concrete outcome sentence.
Portfolio Now and Use: Currently Card
A compact ruled card of six status rows covering building, reading, listening, learning, availability, and location as a live snapshot.
Portfolio Pricing: Pricing With Faq
Two tier cards with from prices and included lists beside three plainly answered pricing questions that remove common objections.
Portfolio Footer: Columns And Social Footer
A three-column footer with a brand bio, a navigation column, and a contact column, topped by a social icon row and copyright bar.
Portfolio Photography: Series Feature
A photography series feature with a large lead frame, a four-still strip with location captions, and a series note naming the shooting constraint and frame count.
Portfolio Experience: Compact History
A ruled list of roles showing company, title, and year range in tabular-nums, fitting five positions into a minimal footprint.
Portfolio Process: Vertical Steps
Five numbered stages stacked in a ruled list each with a title and a description that names a concrete commitment.
Portfolio Video and Motion: Featured Video
A single video piece highlighted as a full-width play frame above a two-column panel with the description, creative constraint, and a ruled credits list.
Portfolio Footer: Big Name Footer
A footer centred on the name and a tagline set at heading scale, with a ruled divider separating a short page link row and a copyright line.
Portfolio Pricing: Single Package Card
One clearly presented package with a from price, a bulleted included list, a not-included list, and a call to action button.
Portfolio Service: Services and CTA
A two-column block pairing a concise services table on the left with a get-in-touch card on the right that names availability and prompts enquiry.
Portfolio Navbar: Compact Nav
A slim 12-unit header with a name mark on the left and three minimal text links on the right, nothing else.
Portfolio Newsletter: Split Newsletter
A two-column block with the pitch and four dated recent issue titles on the left and a signup form card with cadence and reader count on the right.
Portfolio Testimonial: Quote With Stats
A client quote paired with a ruled table of four project result figures giving the measurable outcomes behind the praise.
Portfolio Video and Motion: Reel Grid
A three-column grid of video work thumbnails each with a centred play button, a duration badge, and a client and year line.
Portfolio Navbar: Wide Nav
A full-width header with the name mark on the left, five centred navigation links, and a contact button on the right in a generous 16-unit bar.
Portfolio Work Grid: Work By Year
Projects grouped under ruled year headings with an inline project count, each tile showing the project name, client kind, and role.
Portfolio Coaching and Mentoring: Coaching Hero
A full-fold hero naming the coach, their one-line premise, the next availability date, primary and secondary actions, and a three-cell credential strip.
Portfolio Now and Use: Now Page
A dated snapshot across Work, Learning, and Life sections with specific items so the page reads as a live signal rather than a static bio.
Portfolio Service: Numbered Services
An editorial services list of large-numbered ruled rows each carrying a service title and a plain description with a stated scope limit.
Portfolio Testimonial: Scrolling Quotes
A horizontal overflow strip of five fixed-width quote cards each attributed with avatar, role, and company.
Portfolio Gallery: Thumbnail Strip
A compact responsive grid of square Placeholder thumbnails labelled with a series name and year for browsing a photographic archive.
Portfolio Contact: Availability And Form
An availability strip showing current status and four project criteria sits above a name plus email plus message form so visitors self-qualify before writing.
Portfolio Newsletter: Centered Signup
A centered heading, pitch, and email-and-button form with a cadence note naming the send dates, frequency, and unsubscribe policy.
Portfolio Writing Portfolio: Featured Clips
Three standout writing pieces as cards with the publication, headline, an excerpt from the argument, and a read link.
Portfolio Work Grid: Featured Three
Three equal project tiles each with a full-width image, client type, role, year, a one-line outcome description, and a case study link.
Portfolio Coaching and Mentoring: Office Hours
Open weekly slots with a spots-remaining count, a good-for list, a not-the-right-fit list, and a how-it-works breakdown for free 25-minute advice calls.
Portfolio FAQ: Faq Three Column
Nine questions and answers laid out in three equal columns as plain text blocks for at-a-glance scanning without interaction.
Portfolio Gallery: Full Width Rows
Large images stacked at full container width with a title, a context-naming caption, and a two-digit series counter beneath each.
Portfolio Service: Icon Services Grid
A services grid of four cards each with a lucide icon, a service name, and one sentence naming what is included and what is not.
Portfolio Comparison: Comparison Table
Nine criteria rows comparing this person against a typical alternative using check and minus icons, with honest gaps on both sides.
Portfolio Contact: Contact Card Grid
Six reach channels laid out as linked cards in a three-column grid, each naming the platform, the handle, and what that channel is best for.
Portfolio Testimonial: Three Column Quotes
Three equal client quote cards each anchored to a named project outcome and attributed with avatar and role.
Portfolio Writing Portfolio: Essay List
A ruled-row essays archive with title, publication name, read time, and date per entry for a scannable writing index.
Portfolio Work Grid: Masonry With Captions
A CSS-columns masonry of six project tiles at mixed aspect ratios, each captioned with the project name, role, and year.
Portfolio Blog and Writing: Three Card Row
Three equal blog post cards each with a Placeholder cover, title, date, and reading time in a responsive three-column grid.
Portfolio FAQ: Centered Faq
A centered heading and lede above a narrow max-w-2xl accordion of six working-together questions with specific policy answers.
Portfolio Case Study: Full Bleed Case
A case study section with a full-width container image and an attached ruled panel carrying the title, summary, and outcome figures.
Portfolio Contact: Centered Contact
A centred narrow column with a heading, a framing sentence, and a name plus email plus message form with a reply-time note below the button.
Portfolio Comparison: Freelance Vs Inhouse
A three-column table of five signals arguing honestly for hiring a freelancer or building in-house across project length, budget, and team structure.
Portfolio Coaching and Mentoring: Mentorship Card
A free or low-cost mentorship offer naming who it is for, the monthly cadence, the pay-what-you-can cost, and a four-step application process.
Portfolio About: Journey About
A ruled vertical list of three dated milestones tracing the career path from first role to going independent, each with a year, heading, and body.
Portfolio Blog and Writing: Featured And List
A writing landing with one promoted post shown at full width with a cover image and excerpt above a ruled list of four recent posts.
Portfolio Case Study: Two Column Writeup
A dense case study section with the project narrative split across two prose columns and a four-figure result strip below.
Portfolio Testimonial: Single With Photo
A single detailed client quote beside a context image and a ruled attribution card naming the role and engagement.
Portfolio Calls to Action: Split Availability Cta
A two-column CTA with booking criteria and an availability dot on the left and what to send plus a project brief button on the right.
Portfolio Awards and Recognition: Press Logo Row
A heading and lede above a single ruled grid of six publication wordmarks where the practice has been featured.
Portfolio Developer Portfolio: Project List
A ruled-row developer projects index with stack chips, a one-line summary, and separate repo and live links per project.
Portfolio About: Stats And Bio
A two-column section pairing a career bio paragraph with a 2x2 grid of four concrete career figures in large tabular numerals.
Portfolio Coaching and Mentoring: Coaching Packages
Three named coaching packages with session counts, durations, prices, and included items, one marked recommended, plus a scoping note confirming fit before payment.
Portfolio Comparison: What Makes Me Different
Three distinctive approach points each paired with an explicit tradeoff so the block reads as credible rather than promotional.
Portfolio Skills and Tool: Core And Tools
A ruled list of core disciplines each with a plain-language description and a chip row of the supporting tools used.
Portfolio Resume and CV: Cv Download Band
A slim card showing the last updated date beside a Download CV button for the linked PDF resume.
Portfolio Case Study: Intro and Gallery
A case study section with a short project intro paragraph followed by a captioned gallery of process frames in a three-column grid.
Portfolio Calls to Action: Full Bleed Cta
A bold section-filling heading with a concrete availability line and a single primary button, no gradient and no overlay.
Portfolio About: Letter About
A card-framed signed note with three personal paragraphs and a ruled sign-off naming the designer and their location.
Portfolio Resume and CV: Resume With Photo
A CV header pairing a square Placeholder portrait with the name, contact details, and summary before experience and skills follow below.
Portfolio Stat: Stats With Icons
Four career figures each paired with a small lucide icon and a label in individual cards, making a numbers strip visually scannable.
Portfolio Design Portfolio: Visual Grid
A dense nine-item square grid of design shots with minimal captions for explorations and process fragments that did not fit a case study.
Portfolio Skills and Tool: Badge Cloud
A wrapped chip cloud that renders core disciplines larger and bolder so the primary expertise registers at a glance.
Portfolio Coaching and Mentoring: Book Session
A two-column booking block showing what a single session covers, the duration and price, a four-step booking sequence, and an honest list of what coaching is not.
Portfolio Comparison: Freelance Vs Agency
A three-column table comparing freelance and agency across seven criteria including cost, speed to start, and institutional knowledge.
Portfolio Clients and Logo: Two Row Logos
A centered heading with a client count above two even ruled rows of five client wordmarks each, covering ten names across two sectors.
Portfolio Hero: Cta Focused Hero
A conversion-first hero with a single confident headline, a start-a-project button, and a four-figure trust signal strip at the base of the fold.
Portfolio Project Card: Text Only Card
A typographic work index of ruled rows, each naming the project, role, year, and a one-sentence outcome with no thumbnail.
Portfolio Design Portfolio: Work Showcase
A four-project design grid where each card names the client type, the role, the year, and the specific deliverables the designer owned.
Portfolio Skills and Tool: Two Column Skills
A two-column skills layout grouping chips by project phase across Research, Design, Systems, and Delivery columns.
Portfolio Clients and Logo: Logos And Testimonial
A ruled wordmark row of seven clients above one attributed pull quote that names a specific deliverable and outcome.
Portfolio Hero: Intro Paragraph Hero
A hero that opens with a first-person paragraph above the name and headline, followed by a single action button and a three-field detail strip.
Portfolio Project Card: Duo Tone Card
A project card grid where each tile pairs a thumbnail with a muted caption panel in a contrasting surface tone, no gradient.
Portfolio Comparison: Why Work With Me
Four honest reasons as cards, each pairing a direct claim with the substance that makes it verifiable, the differentiation block.