Shadcn Portfolio Blocks
Build a portfolio with 656 Portfolio blocks for shadcn/ui. Heroes, work grids, case studies, about, services, and contact sections for creatives and studios.
Portfolio Speaking and Event: Organizer Quotes
Three organizer testimonial cards, each pairing an avatar, name, and role with a quote and the event it refers to in a ruled footer.
Portfolio Testimonial: Praise Timeline
A vertical timeline rail of four short client quotes from one project, from kickoff through six months after launch, each with an avatar.
Portfolio Testimonial: Client Interview
A two column testimonial with a client and engagement summary card on the left and four honest question and answer pairs on the right.
Portfolio Studio and Team: Studio Timeline
Two column layout with a heading and founder quote card on the left beside a ruled list of year marked studio milestones on the right.
Portfolio Social and Link: Reach Guide
A split contact guide ranking channels by reply speed, an intro column of location and hours beside a numbered list of channels with response chips.
Portfolio Service: Service Outcomes
A heading and intro above a ruled list of services, each pairing a scope description with a large result stat and its context line.
Portfolio Skills and Tool: T-Shaped Skills
An asymmetric split pairing one deep discipline, unpacked as a ruled card of facets, with a breadth column of two labeled skill chip groups.
Portfolio Stat: Work Mix Split
A heading and lede above a single segmented distribution bar showing how billed time splits across four kinds of work, with a percentage legend beneath.
Portfolio Service: Engagement Comparison
A heading and intro above a scrollable table that compares three engagement types row by row across fit, length, communication, and pricing.
Portfolio Service: Services Tabs
A heading and intro above a tabbed explorer where each service tab opens a two column panel with scope, meta rows, and a deliverables list.
Portfolio Project Card: Stat Project Card
An imageless three column grid where each card leads with a large metric and context line, then the project name, meta, summary, and link.
Portfolio Project Card: Quote Project Card
Two project cards in a grid, each pairing a thumbnail with a short client quote attributed by avatar, name, role, and a view link.
Portfolio Project Card: Timeline Project Card
A vertical rail grouped by year, each project a compact row with a square thumbnail, name, role, and a one line outcome.
Portfolio Process: Phase Allocation
A heading and intro above a segmented proportional bar, with a ruled legend listing each phase, its percentage share, and what the time buys.
Portfolio Process: Revision Rounds
A heading and intro above three feedback round cards, each naming its scope and an example note, plus a two panel footer on process.
Portfolio Pricing: Add-On Pricing
Two category panels list a la carte extras as divided rows, each pairing a name and one line description with a plainly stated price.
Portfolio Press Kit: Headshot Gallery
Heading with a download button, three headshot crops in a grid with resolution and use captions, and a required photo credit panel.
Portfolio Press Kit: Press FAQ
Two column press FAQ with a heading and response time list beside an accordion answering the questions journalists ask before covering a studio.
Portfolio Photography: Photo Book
A book cover and three spread thumbnails beside the monograph story, a full specifications table, a stockist list, and a direct order button.
Portfolio Photography: Commission Brief
Three commission types with day rates and inclusions beside a booking panel walking four steps from enquiry to delivery with an availability note.
Portfolio Newsletter: Reader Quotes
A centered newsletter signup above a three card row of short reader quotes, each attributed with avatar art, a name, and a role.
Portfolio Music and Audio: Sync Placements
Selected sync licensing credits in three columns for film and television, advertising, and games, each a ruled list with a licensing link below.
Portfolio Hero: Career Timeline Hero
A split hero with name, lede, actions, and availability note beside a bordered timeline panel listing each chapter with years, role, and detail.
Portfolio Music and Audio: Studio Services
Three service cards for mixing, mastering, and production, each with a rate, a checklist of what is included, and a turnaround line.
Portfolio Navbar: Pill Links Nav
Header with a name mark, page links inside a bordered rounded pill segmented control with the active one highlighted, and a quiet arrow link.
Portfolio Navbar: Nav with Location and Time
Header with a name mark on the left, centered page links, and a location readout showing the city and a local time label on the right.
Portfolio Gallery: Index Preview Gallery
A numbered list of works with medium and year on the left beside a large preview of the highlighted row with its caption and counter.
Portfolio Gallery: Year Archive Gallery
Work grouped into bordered rows by year, each pairing a large year heading, frame count, and note with a four image row of selects.
Portfolio FAQ: Anchored FAQ
A FAQ with a sticky anchor rail listing three topic sections beside always open ruled answers, keeping long lists navigable without accordions.
Portfolio Testimonial: Testimonial Tabs
An interactive switcher showing one featured client quote at large scale above a row of avatar tabs that flip between four clients.
Portfolio Studio and Team: Studio Week
Two column layout with a heading, exceptions list and note on the left beside a ruled five day breakdown of the studio's working week.
Portfolio Social and Link: Big Type Links
An index of social destinations in oversized type, each ruled row pairing a mono number, a large platform name, a handle, and a hover arrow.
Portfolio Social and Link: Platform Feeds
Three platform panels previewing recent posts, each with a brand icon header, handle, and follow action above a ruled list of titles with dates.
Portfolio Stat: Before After Stats
A heading and lede above ruled rows that pair each metric and its measurement note with a before figure, an arrow, and an after figure.
Portfolio Skills and Tool: Skills In Practice
A heading and lede above a ruled list where each row pairs a skill with the project that proved it, its outcome, and the year.
Portfolio Social and Link: Platform Stats
A grid of platform cards, each pairing a brand icon and handle with a large audience count, a short note, and a follow action.
Portfolio Service: Services By Audience
A heading and intro above three columns, one per client type, each naming who it serves and listing the services most relevant to them.
Portfolio Skills and Tool: Skills Matrix
A heading and lede above a bordered table pairing skill rows with three engagement columns, one filled dot per row marking lead, build, or refer.
Portfolio Skills and Tool: Skills Timeline
A heading and lede above a dotted vertical timeline where each entry marks the year a skill arrived, its status word, and a note.
Portfolio Shop and Product: Product Bundle
A two column bundle offer: included product tiles with struck prices beside a pricing column showing the combined value, bundle price, and saving.
Portfolio Project Card: Before After Card
Two redesign cards in a grid, each pairing captioned before and after thumbnails side by side with a name, meta line, and result figure.
Portfolio Resume and CV: References Row
A heading and intro above three reference cards, each with an avatar, name, role, a note, and a relationship and overlap meta footer.
Portfolio Process: Process Comparison
A heading and intro above a two column comparison table, contrasting the usual studio approach with how I work across five ruled aspect rows.
Portfolio Pricing: Usage Licensing
A formula strip showing creation fee times usage multiplier equals final fee sits above four license tier cards, closed by notes on exclusivity.
Portfolio Process: Horizontal Steps
A centered heading above four numbered steps on a connected rail, each marker with a title and short description that stacks on small screens.
Portfolio Photography: Exhibition History
Two ruled lists set side by side, selected exhibitions with venue, city, and year beside publications naming each outlet, piece, and date.
Portfolio Press Kit: Press Inquiry
Two column press inquiry with a heading and what to include checklist beside a labeled contact form for outlet, deadline, and request.
Portfolio Now and Use: Paid Tools
Ruled rows of the subscriptions behind an independent practice, each showing the tool, its plan, a monthly price, closing on a total row.
Portfolio Now and Use: Now Archive
Dated snapshots of a now page, each pairing a date column with a three column panel of what started, stopped, and kept going.
Portfolio Now and Use: Media Diet
Four category cards for listening, watching, playing, and following, each holding three titled items with meta notes and one highlighted pick.
Portfolio Newsletter: Inbox Preview
A two column newsletter signup pairing a pitch and labeled email form with a drawn inbox mockup listing five recent issues by subject and date.
Portfolio Music and Audio: Booking Panel
A live booking split pairing a ruled list of set formats with a details card of availability, a rider link, and a request button.
Portfolio Hero: Client Quote Hero
A hero with name, role lede, and two actions above a full width client quote strip carrying the quote, an avatar, and attribution.
Portfolio Navbar: Divided Nav
Full width header where the name mark and each page link occupy their own border separated cell, ending in a solid inverse contact cell.
Portfolio Developer Portfolio: Engineering Principles
Six numbered engineering principles in an editorial three column grid, each pairing a mono index with a short title and a first person note.
Portfolio Developer Portfolio: Published Packages
A ruled list of maintained npm packages, each row with the name, version, license, weekly downloads, a short description, and an install command.
Portfolio Developer Portfolio: System Design Case
A case study split pairing the problem, numbered architecture decisions, and outcome metrics with a blueprint panel tracing the ingest and read paths.
Portfolio Developer Portfolio: Career Timeline
Reverse chronological engineering roles as ruled rows pairing period and tenure with role, company, summary, a shipped highlight, and stack tags.
Portfolio Gallery: Filmstrip Gallery
A horizontally scrolling row of wide film frames with mono frame codes and captions beneath each, plus roll metadata beside the heading.
Portfolio FAQ: Yes No FAQ
A rapid FAQ of nine questions in a three column card grid, each led by a Yes, No, or Depends badge above a short answer.
Portfolio Testimonial: Rating Scorecard
A two column scorecard with an average rating and per criterion bars on the left and two supporting client quotes on the right.
Portfolio Speaking and Event: Speaking FAQ
A speaking FAQ with a heading and an accordion of organizer questions beside a small ruled card listing what to include in a first invite.
Portfolio Studio and Team: Extended Team
A heading and intro above a two column grid of collaborator cards, each with avatar, discipline, project count and tenure, plus a credit note.
Portfolio Speaking and Event: Booking CTA
A speaker booking closer with an invitation heading, a booking checklist, and dual actions beside a ruled card of speaking formats and logistics.
Portfolio Stat: Headline Stat
One oversized centerpiece figure above a heading and a context paragraph, closed by a ruled row of three small supporting figures.
Portfolio Studio and Team: Open Roles
A heading above a two column layout: a ruled list of open roles with salary bands beside a numbered hiring process and application card.
Portfolio Speaking and Event: Talk Topics
A talk topics catalog of numbered ruled rows, each with a title, abstract, and a meta column of format, length, and audience fit.
Portfolio Shop and Product: Product Comparison
A comparison table for three packs, with prices as column headers, feature rows mixing counts, text, and check marks, and a buy button row.
Portfolio Stat: Projects Per Year
A heading and lede above a bordered card of ruled year rows, each pairing a year with a proportional bar and a project count, plus a total footer.
Portfolio Shop and Product: Product List
A dense shop list inside one bordered panel, each row with a thumbnail, product name, one line description, format chip, price, and a view action.
Portfolio Shop and Product: License Tiers
Three license cards, each with a name, one time price, scope line, feature checklist, and buy action, the commercial tier flagged as most chosen.
Portfolio Resume and CV: Cover Letter
A centered letter with a name and contact letterhead, date and recipient lines, three body paragraphs, a signed sign off, and an enclosures footer.
Portfolio Resume and CV: Publications and Talks
A heading and intro above a single ruled list of writing and speaking, each row with a year, title, venue, and a format badge.
Portfolio Resume and CV: Certifications and Awards
A heading and intro above two ruled lists in a grid, one for certifications with issuer and ID, one for awards with presenter and note.
Portfolio Pricing: Budget Guide
Three stacked budget bands pair a price range and engagement with a good fit list and a keep in mind list, the middle band flagged.
Portfolio Pricing: Payment Schedule
Three numbered payment stages with percentage splits sit beside a worked example panel that breaks a project fee into three payments with terms.
Portfolio Press Kit: By the Numbers
Heading and lede above a hairline grid of eight large stat tiles with labels and notes, closed by a verification footnote.
Portfolio Photography: Edit Breakdown
The raw scan and final print file side by side, four numbered edit steps, and a closing note on what the retouching never includes.
Portfolio Newsletter: Newsletter Tiers
A two tier newsletter signup pairing side by side Reader and Supporter cards, one carrying the email form and the other a feature list.
Portfolio Newsletter: Newsletter FAQ
A two column newsletter signup pairing the pitch and labeled email form with a bordered list of five short questions and plain answers.
Portfolio Now and Use: App Defaults
Two ruled columns pairing twenty everyday categories with the single app that wins each job, a dot flagging any default changed this year.
Portfolio Hero: Process Steps Hero
A hero with a first person intro, lede, and two actions above a numbered three step strip showing how an engagement runs end to end.
Portfolio Hero: Featured Case Hero
A split hero with name, positioning lede, detail strip, and actions beside a single featured case study panel showing a thumbnail and outcome rows.
Portfolio Music and Audio: Press Kit
A press kit section pairing an approved short bio and press pull quotes with two photos and a ruled list of downloadable assets.
Portfolio Experience: Growth Matrix
Areas of responsibility as rows and career levels as columns, with filled, faded, and empty dots marking what was owned or contributed at each stage.
Portfolio Navbar: Numbered Nav
Header with a name mark on the left, horizontal links each carrying a zero padded index number, and a small index caption on the right.
Portfolio Experience: Career Chapters
The full history grouped into three named eras as columns, each with a year range, a first person narrative, and a ruled list of roles.
Portfolio Experience: Client Engagements
Freelance work listed as a ruled index, each row pairing client and sector with a one line deliverable, an engagement type badge, and the year.
Portfolio Gallery: Contact Sheet
A ring framed sheet panel with a roll header above a dense grid of numbered mono frames, two ringed as picks marked for print.
Portfolio Experience: Experience Tabs
A vertical rail of companies switches a detail panel showing the role title, a first person summary, what you owned, and a stat row.