Aacontent takes the lead. clear by default
01 / Tile
A quiet surface for type, numbers, and whatever matters.
<Tile label="…">A FAMILIAR FEELING. A NEW BEGINNING.
alive by
design.
Big type. Living tiles. Motion with meaning.
The spirit of Windows Phone, built for React.
THE START SCREEN, REIMAGINEDINTERACTIVE ↓
hello.a system with personality a little more human
3 mail
24° weather
less chrome.
more character. made to move
start here explore the componentsyour color. the details mattermore character. made to move
CONTENT FIRSTSQUARE BY NATUREBUILT TO RESPONDREACT + CSS
01 / THE BUILDING BLOCKS
small surfaces.
real personality.
A tile can be a destination, a changing piece of information, or a second side to a story. Try each one.
02 / TileLink
A real link. Press feedback follows your point of contact.
<TileLink href="…">03 / RevealTile
One stable control, two faces. Click, tap, or press Space.
<RevealTile front={…} back={…} />04 / LiveTile
Changes quietly. Pauses for focus, hover, and reduced motion.
<LiveTile items={…} />02 / THE PART YOU FEEL
nothing just
appears.
A surface arrives, leaves, and responds. Try an exit, reverse it mid-flight, or give it a slower tempo.
A surface turns around its leading edge. The movement gives departure and arrival a shared direction.
Respects your system’s motion preference
LIVE MOTION STAGEturnstile / forward
PURPOSEFUL MOTIONmake
an entrance.a little confidence goes a long way.
an entrance.a little confidence goes a long way.
InterruptibleChange direction without waiting for a timeline to finish.
Accessible by designExiting content is inert. Reduced motion settles immediately.
Yours to composeBring your router. The transition owns presence, not navigation.
IN CONTEXT / A SMALL JOURNEY
from a glance
to a closer look.
A composed example: turn the overview away, bring the detail in, then return with keyboard focus where you left it.
YOUR COLLECTION
ideas worth
opening.
One interaction, from start to finish.
Aa notice the little things
find your rhythm
leave some space
04 / EVERYDAY ACTIONS
make your move.
Clear labels, a familiar touch, and the right action exactly where you need it.
BUTTONS / TOUCH AND KEYBOARD
Small actions. Clear intent.
00 items in your collection
PENDING / KEEP YOUR PLACE
A moment, without a jump.
Start saving to see the pending state. Complete the preview to make the action available again.
05 / WORDS INTO ACTION
room for your words.
Labels that stay with you. Help where you need it. A clear way to put things right.
06 / MAKE IT YOURS
a choice that feels right.
A clear yes. A single choice. A switch that responds to your touch.
07 / FIND YOUR SETTING
just the right amount.
Choose a mode. Set a level. Familiar controls, with room for the details.
08 / EVERY MOMENT, ACCOUNTED FOR
a little reassurance.
Show how far things have come. Make the next step clear.
PROGRESS / YOUR COLLECTION
40%
40 of 100 photos ready
Try known and unknown totals. The line and ring tell the same story.
RING / THREE SIZES
MESSAGES / CLEAR NEXT STEPS
09 / A MOMENT TO DECIDE
one thing at a time.
A quiet space to make a change. A clear choice before saying goodbye.
DIALOG / MAKE IT YOURS
Weekend wanderings
24 photos · a collection of small discoveries
YOUR LAST CHANGE
Try Escape, Tab, and clicking outside. Deletion is a preview; your collection stays here.
10 / CLOSE AT HAND
right where you are.
A few useful actions. A little room to refine the view.
MENU / COLLECTION ACTIONS
City after dark
18 photos · light, reflections, and the way home
Try the arrow keys, Home, End, or type the start of an action.
POPOVER / FIND YOUR VIEW
Newest first · all photos
11 / MOMENTS, IN ORDER
a place for everything.
Browse a little. Find a favorite. Keep the moments that matter.
recently added
a little earlier
12 / ONE LANGUAGE, YOUR EXPRESSION
set the tone.
Scoped themes, five accents, and ordinary CSS custom properties. The whole workshop is your preview.
Aa
Type does the talking.
Your system font, beautifully at home.
13 / BUILD SOMETHING WITH FEELING
a little code.
a lot of character.
This is a local alpha. Build and pack the library from this repository to try it in your own React app.
npm run build:library
npm pack ./packages/reactyour-first-tile.tsx
import { Theme, TileLink } from
"@pane-ui/react";
import "@pane-ui/react/styles.css";
export function Start() {
return (
<Theme mode="dark" accent="blue">
<TileLink href="/hello" label="say hello">
hello, world.
</TileLink>
</Theme>
);
}