PhoneFrame
Hardware chrome for a phone screenshot or live screen on a landing.
TodayThree things left
- GroceriesMaya · due today
- Bins outJonah · tonight
- School pickupAri · 15:30
View code
<PhoneFrame bezel="#161412">
<div mix={[screenCorners(), /* home screen */]}>
…
</div>
</PhoneFrame>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
- CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
- Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
- plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
- UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
- QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { PhoneFrame } from "@sdxc/ui/landing";The bezel around a phone screen. The capture carries its own status bar, so the frame adds only the hardware rim.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
bezel | string | No | Bezel fill. Defaults to var(--app-bezel) so a page can paint every phone from one token, then to DEFAULT_BEZEL when that token is unset. |
children | RemixNode | Yes | The screen: a capture, a picture, or live UI, clipped with screenCorners. |
Also accepts everything in TagProps<"div">.
Also exported
Other components this module publishes.
screenCorners