Shadcn Portfolio Blocks
Build a portfolio with 752 Portfolio blocks for shadcn/ui. Heroes, work grids, case studies, about, services, and contact sections for creatives and studios.
Portfolio FAQ: Timeline FAQ
A vertical numbered timeline of three project stages, each node carrying a stage title and two always open questions with paragraph answers.
Portfolio Gallery: Frame Study
A single frame study pairing one large photograph with its title, story, and a bordered list of camera, exposure, film, and print details.
Portfolio Navbar: Side Rail Nav
A fixed left rail with the name mark and role, stacked section links with an active highlight, and a bottom row of social icons.
Portfolio FAQ: Objections FAQ
A centered heading over a chat styled thread of four exchanges, each a right aligned objection bubble answered by a reply beside a designer avatar.
Portfolio Music and Audio: Streaming Stats
A four stat strip of listener and stream totals above a split of most streamed tracks with bars and a ranked list of top cities.
Portfolio Hero: Inquiry Form Hero
Split hero with a first person invitation and expectations strip on the left beside a labelled inquiry form for name, email, company, and project.
Portfolio Music and Audio: Song Story
A two column split pairing a lyric excerpt card with the written story of a song, closed by a ruled credits list and a listen link.
Portfolio Hero: Service Menu Hero
Split hero pairing a first person intro and availability facts with a bordered service menu panel listing each offering, its scope, and starting price.
Portfolio Footer: Elsewhere Footer
A grid of four bordered profile tiles, each with a platform icon, handle, and posting note, above a bar with nav and copyright.
Portfolio Music and Audio: Live Sessions
A three card grid of filmed live sessions, each with a still, song title, venue and year line, and a watch link with duration.
Portfolio Music and Audio: Session Credits
A ruled credit table listing year, artist and record, and role for each session, closed by an availability note and a full credits link.
Portfolio Developer Portfolio: Incident Postmortem
A two column incident retro pairing the story, root cause, and follow up changes with a static minute by minute timeline panel.
Portfolio Design Portfolio: Design Directions
Three visual directions for one project as tiles with trait rows for type, color, and feel, a verdict line, and the selected pick marked.
Portfolio Contact: Brief Upload Form
A two column brief intake with submission facts on the left and a form pairing contact fields, a static upload zone, and a link field.
Portfolio Calls to Action: Featured Work CTA
A bordered closer with a heading, lede, and two actions beside a featured project card showing a cover image, title, meta, and outcome.
Portfolio Contact: Contact By Inquiry Type
A three card contact router splitting inquiries by intent, each card pairing an icon, a description, a dedicated email, and a reply time note.
Portfolio Comparison: Project vs Retainer
Two engagement models compared down a central spine of six criteria, closed by paired pick this when lists so a prospect can self select.
Portfolio Coaching and Mentoring: Between Sessions
Four channel rows with response expectations beside a sample fortnight timeline and a single boundary rule, showing the support layer between calls.
Portfolio Coaching and Mentoring: Focus Areas
Six topic cards mapping the territory a coaching practice covers, each pairing a short description with a real client question, plus a booking footer.
Portfolio Comparison: AI vs Hiring Me
Five design tasks stacked as cards, each pairing what AI tools honestly deliver against what hiring me adds, with one task conceded outright.
Portfolio Coaching and Mentoring: Session Anatomy
Minute by minute breakdown of a sixty minute coaching session as a four segment list beside panels for what clients send before and receive after.
Portfolio Case Study: Goals vs Outcomes
Four ruled rows pairing each kickoff target with its measured outcome and a status pill, closed by an honest note on the goal that missed.
Portfolio Collaboration: Collab Disciplines
A heading, intro, and count line above a grid of six discipline cells, each with a working note, a joint project count, and a frequent partner.
Portfolio Availability and Hire: Availability Statement
A centered availability statement with a large headline naming the open window, a supporting line, two actions, and a ruled three column facts strip.
Portfolio About: Elsewhere About
Heading and intro above a ruled list of talks, podcasts, essays, and teaching, each with a year, format, title, venue, and note.
Portfolio Writing Portfolio: Pitch Process
A four step walkthrough of how a commission runs from brief to publication, each step a numbered card with a timing line and deliverable.
Portfolio Writing Portfolio: Year Archive
Published pieces grouped under large year numerals in a two column ruled layout, each entry carrying its title, publication, and month.
Portfolio Video and Motion: Discipline Columns
Three columns splitting work by discipline, each with a thumbnail, film count, positioning line, three titles with runtimes, and a link.
Portfolio Work Grid: Work Accordion
An accordion work index of ruled project rows that each expand to a thumbnail, summary, deliverables list, and case study link.
Portfolio About: Influences About
Heading and intro above a two column ruled grid of four cards, each pairing a type badge with an influence title and a lesson.
Portfolio Newsletter: Topic Picker
Centered newsletter signup card with a checkbox list of three letters, each with a description and cadence, above a labeled email form.
Portfolio Experience: Promotion Path
A connected stepper telling six years at one company as four titles, each carrying the year, what changed in the work, and a scope fact.
Portfolio Navbar: Underline Tabs Nav
A header whose page links behave like full height tabs, the active one carrying a bottom border that sits flush against the header rule.
Portfolio Gallery: Triptych Gallery
A triptych gallery where each work is a row of three tall panels under a title and edition line, with one shared caption beneath.
Portfolio Gallery: Alternating Gallery
An alternating editorial gallery of full width rows that swap the image left and right beside a series title, story, and bordered facts list.
Portfolio Experience: Experience Accordion
An accordion work history where each ruled row shows company, title, and years, expanding to a first person summary, highlights, and a departure note.
Portfolio FAQ: Numbers FAQ
A left aligned heading above a three column grid of six rule topped cards, each pairing a question with a large number and detail.
Portfolio Newsletter: Author Note
Centered newsletter signup framed as a first person letter in a bordered note, signed with avatar, name, and role above a labeled email form.
Portfolio Newsletter: Issue Anatomy
Two column newsletter signup pairing a pitch and labeled email form with a numbered breakdown of the four recurring segments, each with a read time.
Portfolio Developer Portfolio: ADR Log
A single column architecture decision log of ruled rows, each pairing a record id and date with the decision, reasoning note, and status chip.
Portfolio Footer: Quote Footer
A large centered client quote with an avatar attribution, closed by a ruled bar carrying nav links, social icons, and a copyright line.
Portfolio Developer Portfolio: Pull Request Showcase
A two column pull request case study pairing the change narrative, review notes, and merge stats beside a static diff panel of the reworked hunk.
Portfolio Design Portfolio: Responsive Pairs
Three projects each shown as a paired desktop and mobile frame with a note explaining the specific adaptation decision behind the small screen.
Portfolio Calls to Action: Starting Rate CTA
A bordered closer with a heading, lede, and primary action beside a rate card stating the starting price and a checked list of inclusions.
Portfolio Contact: Booking Window Strip
A six month availability strip of status dot cells, plus a footer pairing an earliest start note with a reserve by email action.
Portfolio Calls to Action: FAQ CTA
A two column closer with a heading, lede, and primary action beside a ruled list of four common questions each answered in a sentence.
Portfolio Comparison: Should You Hire Me
A four step decision path where each numbered question branches into yes and no outcomes, ending in a short verdict panel.
Portfolio Clients and Logo: Referral Chain
A split layout pairing a large referral share figure and fact rows with a ruled list naming who introduced whom, the work, and the year.
Portfolio Clients and Logo: Confidential Clients
A split layout pairing an NDA explanation and shareable detail rows with a grid of dashed anonymized cards naming client, work, and sector.
Portfolio Collaboration: Collab Availability
A split layout pairing an explanation of how slots are booked with a ruled ledger of four seasons, each showing the format and a booking status.
Portfolio Case Study: Deliverables Case
A six-cell grid counting everything shipped to the client, each cell naming the count, format, and where it lives, closed by a handoff note.
Portfolio Collaboration: Collab Gallery
A heading and intro above three joint project cards, each with a Placeholder image, the project name, the partner and field, a role split line, and the year.
Portfolio Coaching and Mentoring: Meet The Coach
Split bio pairing a framed portrait and quick-fact rows with a first person career account, a four-line role history, and credential chips.
Portfolio Blog and Writing: Article Table of Contents
A long form article layout pairing a sticky numbered table of contents and publish meta with a prose column of titled sections.
Portfolio Availability and Hire: Timezone Overlap
A two column block pairing an async policy intro and schedule rows with a timezone overlap chart plotting each city against your business hours.
Portfolio Awards and Recognition: Awards By Project
Heading and intro above ruled rows grouped by project, each pairing a name and summary with the list of honours that work earned.
Portfolio About: Press Bio About
Heading, intro, and a portrait with usage notes beside three labelled cards holding ready to paste bios at one line, short, and full lengths.
Portfolio Awards and Recognition: Interviews List
Heading and intro above ruled rows of media appearances, each with a format badge, the show, episode title, year, and a listen or watch link.
Portfolio Awards and Recognition: Press Quote Spotlight
Two column layout pairing a large pull quote from a publication with its attribution on the left beside a ruled card of further press mentions.
Portfolio Writing Portfolio: Writing Services
Three commission cards naming the kinds of work this writer takes on, each with a pitch, a ruled detail list of length, turnaround, and rate.
Portfolio Navbar: Mega Panel Nav
A desktop header shown with its Work menu open, a full width panel laying out three category cards with thumbnails, counts, and a footer row.
Portfolio Navbar: Announcement Bar Nav
A header topped by an inverse announcement strip with a booking note, inline arrow link, and dismiss button, above the name mark and page links.
Portfolio Experience: Role References
A three card work history pairing each role with a short quote from the manager or founder who was in the room, credited beneath.
Portfolio Hero: Project Index Hero
Editorial index hero with a name and positioning intro above a ruled, text only list of selected projects showing number, title, client, discipline, and year.
Portfolio Experience: Tenure Spans
A tenure chart drawing every role as a horizontal bar across a shared year axis, with a legend separating full time roles from freelance work.
Portfolio Newsletter: Greatest Hits
Centered newsletter signup leading with a two by two grid of the most opened issues, each with a topic badge, summary, and open rate.
Portfolio Hero: Awards Hero
Split hero with a first person intro and actions beside a two by two grid of award cells, each naming the issuer, honour, and year.
Portfolio Gallery: Mosaic Gallery
A mosaic gallery with one large anchor frame spanning two columns and two rows beside eight square supporting tiles, above a view all link.
Portfolio Footer: Awards Footer
A full width recognition ledger of ruled rows pairing each award with its body, project, and year, above a bar with copyright and social icons.
Portfolio Developer Portfolio: Performance Wins
A single column list of optimization stories as ruled rows, each pairing the narrative and an improvement chip with before and after metric bars.
Portfolio FAQ: Myth FAQ
A left aligned heading over a ruled stack of five two column rows, each pairing a quoted assumption with the reality that corrects it.
Portfolio Footer: Stats Footer
A ruled band of four practice numbers, each a large numeral with a label and detail line, above a bar with copyright, email, and nav.
Portfolio Design Portfolio: Research Decisions
Three ruled rows pairing a real research quote with the exact design change it drove and the measured result after shipping.
Portfolio Design Portfolio: Iteration Timeline
One product screen across four dated design rounds in a ruled grid, each pairing a snapshot with the round name, date, and a change note.
Portfolio Contact: Copy Email Contact
A centered formless contact block with one email in a bordered field, a copy button, a mailto link, and a three cell fact strip.
Portfolio Calls to Action: Client Logos CTA
A bordered closer with a centered heading, one line pitch, and primary action above a ruled four cell strip of client wordmarks.
Portfolio Comparison: Specialists vs Generalist
A roster of four priced specialists beside my single generalist panel, where a three dot coverage meter rates my depth per discipline.
Portfolio Clients and Logo: Engagement Lengths
A ruled panel of clients ordered by how long each engagement ran, every row pairing company and year span with a proportional bar and months figure.
Portfolio Collaboration: Collab Split
A heading and intro above two ruled columns setting out what the studio carries and what the partner carries, closed by a three cell band of shared duties.
Portfolio Case Study: Iteration Rounds Case
Three columns tracking one screen across three usability rounds, each with a version frame, what testing showed, and a ruled list of changes made.
Portfolio Blog and Writing: Link Roundup
A curated reading digest grouping shared links under month headings, each row carrying the title, source domain, and a one line note.
Portfolio Clients and Logo: Client Timeline
A heading and lede above ruled year bands, each pairing a large year label and note with the clients signed and work delivered.
Portfolio Blog and Writing: Published Elsewhere
A guest writing section grouping essays by publication, each pairing an SVG mark and wordmark with a ruled list of pieces, dates, and links.
Portfolio Case Study: Research Insights Case
A four-cell method stat strip above three numbered research insights, each pairing a finding, a participant quote, and the design response it produced.
Portfolio Blog and Writing: Newsletter Issues
A newsletter archive with a subscribe panel on the left showing cadence stats and an email field beside a ruled list of past issues.
Portfolio Availability and Hire: Engagement Matrix
An availability table, one row per engagement type showing scope, length, next start, and status, with a heading above and a booking action below.
Portfolio Availability and Hire: Quarter Outlook
A row of four quarter panels, each with a segmented slot meter, status line, and focus note, closed by an update line and booking action.
Portfolio Work Grid: List With Preview
An interactive work list where selecting a project row swaps the side panel to that project's thumbnail, summary, role, and case study link.
Portfolio About: Expectations About
Heading and intro above two bordered lists side by side, what a client can expect from you and what you ask of them in return.
Portfolio Video and Motion: Episode Playlist
A series layout with a large play frame and synopsis for the current episode beside a card listing every episode with numbers and durations.