UI Components

Components

Live previews, grouped by what they do. The three headers share one card. Open any card for the source, or pick a single header in the sidebar.

Dashboard

components/issue-list

Dashboard

Issue list

A 4px grid, 16px icons on the text line, labels and ids on the left, numbers and dates on the right.

components/status-select

NOR-142

Empty state for archived projects

Status

Dashboard

Status select

The Board status menu. A 32px trigger, grey status icons, and the open row in tawny.

Maps

components/ui/dotted-map

Maps

Dotted Map

SVG dotted world map with markers for location moments.

components/route-sheet

Route

1 hr

Start

Your Location

Pickup

W 84 St & Amsterdam Ave

Bikes

30

EBikes

25

Dropoff

Barrow St & Hudson St

Parking

41

Destination

Wall Street

Maps

Route sheet

A timeline for bike, drive, and transit. One accent, a hairline border, and a 4px grid.

People

components/social-post

Matt James
5 Jun
Did a PhD in Naming Layers at Facebook and just became a Founder at Layers
United KingdomEnergytechClimate+2 more
Xingyu Wu
19 Jun
Did a PhD in computer science at EPFL and just became a Founder at Stealth Startup
Ex-UnicornSwitzerlandTechnical founder+2 more

Xingyu Wu

Founder, Stealth Startup

Switzerland

Building a Stealth Startup from scratch—it's fun :)

2009–2014

Doctor of Philosophy—PhD—Statistics

University of Glasgow

People

Social post

Two posts. A feed post carries the sentence, tags, and actions. A profile post carries the person, place, and education.

Portfolio

components/vcard/testimonials

Mina Ortiz
A short quote so the card can show the clamped excerpt and open the detail view when someone wants the rest of the sentence.
Jules Park
A second card sits beside the first and keeps the row from looking empty. The full note stays in the dialog.
Sam Adeyemi
A third card runs past the edge so the horizontal scrollbar has somewhere to go, and the modal can show this whole paragraph.

Portfolio

Testimonials

Horizontal quote cards from the vcard. Click a card to open the full note.

components/vcard/photos

Cover crop titled Courtyard — Courtyard

Cover crop titled Studio — Studio

Cover crop titled Paper — Paper

Cover crop titled Evening — Evening

Cover crop titled Shelf — Shelf

Portfolio

Tilted photos

A sideways strip of tilted covers. Hover straightens a card and shows its title.

components/vcard/lifestyles

Field notes
Short writeups from weekend builds, kept as a running log.
Walks
A camera comes along for ridgelines, campuses, and city blocks.

Portfolio

Lifestyle cards

Gradient icon cards for short personal notes.

components/headers

DarkBrowse designs

Navigation

Headers

Tawny, Art, and Dev in one frame. Open a header in the sidebar for its own source.

Motion

components/ui/motion

Build with motion

Motion

Motion Primitives

WordRotate and ShimmerButton for headlines and CTAs.

Effects

components/ui/effects

0 designs

Headers, motion, and map primitives — rendered live at real desktop ratio.

Effects

Border & Counters

BorderBeam, AnimatedGradientText, and NumberTicker in one panel.

Embed

components/embed-card

Embed

Embed Card

URL embed cards for YouTube, X, Instagram, Reddit, Maps, Vimeo, TikTok, and a link-preview fallback.

Pair them with live designs

Explore the Art and Dev showcases to see these building blocks in full product contexts.