Free React Agency & Studio Components
Agency sites live or die on how the work is presented, and most portfolio grids flatten every project into the same thumbnail soup. These components take the opposite approach: a selected-work index that reads like a table of contents, a case study spread with editorial pacing, a capability matrix that says what you actually do, and a process reveal that walks clients through how an engagement runs. Built for studios that want the site itself to be proof of craft.
4 components · MIT licensed · installable with the shadcn CLI
Capability Matrix
An agency capability matrix, a seamed hairline grid of disciplines with plain summaries, deliverable receipts and a preformatted proof stat each. A React block themed with Tailwind.
Case Study Spread
A one-engagement case study spread, the client name in display type beside counted result metrics, scope receipts and an attributed quote. React and Tailwind, work-first.
Selected Work Index
A selected-work index for agency and studio sites, oversized project titles on hairline rows, each carrying sector, year and a preformatted result metric. React and Tailwind.
Studio Process Reveal
A studio process rail, oversized phase numerals reveal along a drawn hairline with a duration and deliverable per phase. An editorial React and Tailwind block where motion is the pitch.
Frequently asked questions
Are these components suitable for a freelance portfolio as well as an agency site?
Yes. The selected-work index and case study spread work at any scale, swap the studio "we" copy for first person and they read naturally as a solo portfolio. The capability matrix is the only one that assumes a team of services.
Do the agency components include real project imagery?
The demos ship with neutral placeholder panels so nothing clashes with your brand. Every image slot is a plain prop, pass your own case study photography or renders and the layout adapts.
Can I combine these with the templates category?
Yes, the Agency Studio template composes several of these components into a complete one-page studio site. If you want a full starting point rather than individual sections, start there and swap pieces out.