Work With Tabs
A work grid with three discipline tabs switching between four-tile project sets via state, for multi-discipline creatives presenting Design, Code, and Writing separately.
A work grid with three discipline tabs switching between four-tile project sets via state, for multi-discipline creatives presenting Design, Code, and Writing separately.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Work With Tabs gives a multi-discipline creative one grid with three tab buttons, Design, Code, Writing, each switching to its own four-tile project set via useState. The Design tab holds Ledger, Tend, Meridian, and Atlas. Code holds Northlight (TypeScript, React), Field Notes (Full-stack build), Cove API (Node.js, documentation), and Baseline CLI (Go, shell scripts). Writing holds The Long View, System Thinking, Craft Notes, and On Constraints. Each tile names kind and role separately so the practice depth is legible within the tab.
Twelve projects share one typed array with a Discipline union field. The tab strip sits inside a rounded muted container and uses aria-pressed like the chip row. The distinctive detail is the role specificity per discipline: the Code tab showing Go, shell scripts under Baseline CLI tells a technical visitor something the tile image cannot.
Reach for this block as the work section of a homepage or work page for someone who genuinely works across more than one discipline and wants visitors to navigate by interest rather than scroll past irrelevant work. The installer replaces discipline names, project lists, and roles to match their actual practice split.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the design-plus-code-plus-writing folio. Other tab uses:
Tip: each tab should hold four tiles minimum, a tab with one or two items signals a weak discipline and invites the visitor to question whether it belongs.