shadcn.io is not affiliated with official shadcn/ui
Three Stage Side Projects Team Block for Radix UI
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 Radix 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.