The landing kit, in React.
A small, typed component set that carries the starteammate.com look. Import from ~/components/ui and build.
Buttons
Primary and secondary, in two sizes.
Cards
Three sizes, each with the landing's layered edge.
Small surface
For tiles and compact rows.
Default surface
For most content blocks.
Large surface
For heroes and feature panels.
Icon frames
A four-layer edge around one icon.
Honey
The warm landing background, fitted to its parent.
Marquee
A duplicated row that loops on the landing's curve.
Type scale
The landing's sizes, weights and tracking.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Star Cloud
Colour
The starting tokens. The dark theme swaps them in place.
FAQ
A details/summary list with the landing's framed plus.
Frequently asked questions
Where do these components come from?
They are a React port of the UI used on starteammate.com: the same Tailwind theme, the same class strings and the same self-hosted fonts.
Do they import the product app?
No. This repo is standalone. There is no dependency on the Star monorepo, @starteammate/core or app.starteammate.com.
How do I add a new component?
Put it in app/components/ui, export it from index.ts and use the existing tokens. If a file is getting close to 700 lines, split it before adding more.
Use it on the next page.
Import from ~/components/ui, keep the tokens in app/app.css and stay under the 700-line file limit.
Back home