shadcn.io is not affiliated with official shadcn/ui
Converging Founder Paths About Block for React
Two founders of a pair-programming editor, each with an ordered list of what they did before they met, joined by a drawing into one shared line.
Installation
Overview
Two converging founder paths for React with Base UI, written for Twinbridge, a fictional pair-programming editor. A start header names the idea. Under a top rule, two columns each hold a founder: initials, the name, what they build, and a short ordered list of what they were doing before they met. A symmetric drawing joins the two paths into one node, and a shared line sits under it as a quotation. On a phone the lists stack and the join follows both. The page's rails and top rule come from the Guides spine, and the join is framed with corner marks. It's built from Avatar and Guides, with a CSS entrance on the header and the two lists and your theme's tokens for every colour. For an about page that should show how two people became one company. The people and the line are example copy.
FAQ
How do I change the two founders?
The two people are the constants ADEOLA and SOREN. Each has a name, a role and a steps array of { id, text }. The start column renders the first and the end column renders the second, so a third founder is a change to those components, not a new row in a list. The initials are derived from the name. The shared line is PHILOSOPHY.
How is it read by a screen reader?
The heading is the section's only h2. Each founder is an h3, and the steps are an ordered list whose numbers are written in the row. The initials avatar is decorative, because the name is written beside it. The drawing has a visually hidden caption that says the two paths join. The shared line is a quotation with a caption naming both founders. The lines are drawn by a layer hidden from assistive technology.
What does the drawing show?
Two curves start at the two columns and meet at one filled node. It is symmetric, so a mirrored page still meets in the middle. The caption, not the strokes, is what a screen reader hears.
How are the step numbers kept in step with the list?
Each list numbers its own steps from 1, from the array. The sentence above the list counts steps.length, so the words stay true if you add a step.
How does it fit on a phone?
The two lists stack, with a rule between them. The drawing spans the column under both lists, and the quotation wraps under that. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the divider moves to the other side of the second list, and the drawing still meets in the middle.
Related
- Pro
Founder Letter with Margin Notes About
Company storyA founder letter for a document-signing company, set on a sheet with margin notes that line up beside each paragraph and fold under it on a narrow screen.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
Advisory Board About
Team and leadersAn advisory board for a legal-software company: five advisors in an accordion, each with the practices they cover, why they advise, and one piece of advice.
- Pro
Repo Cards Open Source About
Press and recognitionThree repository cards for a developer toolkit, drawn like repo headers: owner and name, a description, a language letter, rolling star counts, forks, contributor initials and latest release, with a used-by line.
- Pro
Testimonial Split About
Company storyA construction-management company's description beside one customer quote: a split on a solid divider with the quote on a card in a card, read-only stars, the author and a link to their story.
- Pro
Two Column About
Company storyA freight forwarder's story in two columns on a solid divider: prose at the start, and six figures at the end as a description list with numbers that roll up once on view, one ruled row each.