Skip to content
Pane UI0.1 / alpha

A DIFFERENT RHYTHM FOR THE WEB

Software that
feels alive.

Big type. Living tiles. Motion with a purpose.
The spirit of Windows Phone, reimagined for the web.

Read the docs Explore the phone

React 19 · TypeScript · Yours to build with

START SOMETHING DIFFERENT09:41
people
3
 mail photos
24°
 weather build music motion
REAL COMPONENTS. TRY A TILE.
native at heartmotion by designaccessible foundationszero framework lock-in

01 / THE DESIGN LANGUAGE

Less chrome.
More character.

A design language that puts your content first. Every component speaks the same language, from a quiet checkbox to a screen full of living tiles.

01

Let the type do the talking.

Confident headings, generous space, clear hierarchy. Your content sets the tone.

Explore the foundations
02
A little more
beneath the surface.

A little life on every surface.

Tiles reveal, update, and open into something more. Small windows into your app.

Meet the tiles
03
01
02
03
04

Movement that connects.

Turnstiles, panoramas, and layered transitions preserve a sense of place.

Get a feel for motion

02 / FEEL THE DETAILS

Go on.
Make yourself at home.

Not a picture of an interface. The real components, ready for your keyboard, your touch, and your next idea.

Explore the components
native inputsvisible focusshared tokens
PERSONAL SETTINGS LIVE PREVIEW

a little more you.

A little space for yourself.

65% · Just the way you like it.

Try changing a detail.

03 / THE PHONE THAT STARTED IT

Remember
this feeling?

A cyan Nokia Lumia 520. My first smartphone. Its live tiles and impossible-to-forget transitions stayed with me. Pane UI is an ode to that feeling, made for the web.

Meet your new old phone A working web demo. No downloads, no accounts.
NOKIA
09:41start
peoplemail24°sunnyphotosmusic

04 / BUILD SOMETHING REAL

A starting point,
not a blank screen.

All examples
FORMS + FEEDBACK

A place for preferences.

Validation, selection, saving, and the little details in between.

LISTS + DIALOGS

A quieter kind of inbox.

Find a conversation, read a message, write something back.

05 / YOUR NEXT PROJECT

Make it
your own.

The component package is independent of Next.js and Tailwind. Start with the runnable React example, or install the alpha from npm into your own app.

Start building
PUBLIC ALPHAterminal
01 npm install @pane-ui/react@alpha

Requires React 19. APIs may change during alpha.
See the complete setup guide →