Pane UI
Pane UI brings large typography, square tiles and coordinated motion to ordinary React applications. It is an independent, framework-independent library inspired by Windows Phone. It has no affiliation with Microsoft and includes no Microsoft font or image assets.
This is a public alpha, version 0.1.0-alpha.0, available on npm under the alpha tag. The site is a working reference for the current implementation; APIs may change before 1.0.
Start with a real application
Install the package, import the stylesheet, and put your interface inside a Theme. Use TileLink for destinations, Button for commands, and native fields for input. Then add motion where it explains the change of context.
- Explore the phone: a web recreation with local sample content, working navigation and settings.
- Open the examples: settings and inbox flows you can adapt.
- Visit the workshop: component combinations and edge cases.
What belongs to the library
Themes, visual surfaces, native controls, accessible relationships, focus behavior for supported overlays, and interruptible motion live in the package. Your application owns data, validation policy, navigation/history, permissions and network operations. A callback asks you to update state; it never silently saves data or changes routes.
Find a component
| Need | Start here |
|---|---|
| A start screen or dashboard | Tiles, RevealTile, LiveTile |
| Commands and navigation | Buttons, AppBar, Pivot, Panorama |
| Entering and leaving content | Transition and Stagger, TileSequence |
| User input | Fields, Select and Slider, Selection controls |
| Status and feedback | ProgressDots, Progress, MessageBanner |
| Temporary surfaces | Dialog, Menu and Popover |
| Collections and empty results | Lists |
Read the support contract before adopting the alpha. Automated coverage is useful evidence, but manual assistive-technology and real-device release checks remain outstanding.