shadcn.io is not affiliated with official shadcn/ui
Three Stage Side Projects Team Block for React
One maker's three side projects at an indie game studio in three columns that share hairlines: Shipped, Building and Idea, each with a status dot, a name, a sentence and a link.
Installation
Overview
A one-person side-projects section for React with Base UI, written for Hexham & Rye, a fictional indie game studio. A split with a divider that runs from the top rule to the foot: at the start a header ("What Mateo makes on the side"), a sentence and a figure with the designer's initials and caption; at the end three columns that share their hairlines, rail to rail, one for each stage, Shipped, Building and Idea. Each column has a status dot with the state in words (Live, In progress, Not started yet), the project's name, one sentence and a link. The columns stack on a phone, and the divider becomes a rule between the two parts. It is built from Status, Avatar and Guides with your theme's tokens. The projects and the person are made up for the example.
FAQ
How do I change the projects?
Edit STAGES at the top of the file: a stage word, a name, a sentence, what the state says in words, and the text of the link. The dot is picked from the stage in Dot: Shipped is the success token, Building is the info token and Idea is a hollow ring.
Is colour the only thing that tells the stages apart?
No. Each column says its stage and its state in words ("Shipped, Live"), the dots are hidden from assistive technology, and the hollow ring differs in shape from the filled ones. The two coloured dots follow your theme's success and info tokens.
Where do the links go?
They point to #: replace them with the project's page, a store link or the notes. Each link's name includes the project ("Play it for Lampmoor"), so a list of links on its own still makes sense.
How is the divider drawn, and what happens on a phone?
The column on the start side has no vertical padding of its own; its parts carry it, so the divider (a border on the end part, with + marks) runs from the top rule to the block's end. Below lg the parts stack, the divider is replaced by a rule between them, and the three columns stack one above another, still sharing hairlines.
Related
- Pro
Sortable Side Projects Team
Interests and clubsEight side projects of a maker marketplace's team in a two-column hairline grid, each with stars, forks, a start month and stack chips, a sort by stars or newest and an accordion description.
- Pro
Quarter Goals Team
Learning and mentoringOne person's quarter for a project tracker: an objective with its overall completion and three key results as rows, each with a bar and a tick for how far the quarter has gone, an owner, a status word with an icon, and notes that open in place.
- Pro
Swimlane Projects Team
Projects and workloadOne person's next twelve weeks as swimlanes: three projects as bars with the role inside and a status word at the end, a shaded column for this week and a last lane that adds up the time per week, with a table of the same facts on a phone.
- Pro
Ranked Winners Team
RecognitionA hackathon's three judged places as ranked rows with a big place numeral, the project, its team and judges' score, plus a people's-choice band with a vote toggle and its count.
- Pro
Course Steps Learning Path Team
Learning and mentoringOne person's study path for a certification as read-only vertical steps: five courses in hairline rows, ticked when done, a halo on the one in progress, each with a quiet bar and the hours to go.
- 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.