← All components
Showcase / component
Phone Showcase
Layered phone silhouettes, optical wallpapers and tactile finish selection for a product launch.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- An original Chungus UI product composition built around Magic UI’s MIT iPhone frame. Exact frame paths, 433:882 proportions, screen radius, buttons and island are retained. Original optical wallpaper is included as CSS; no Apple imagery or branding is bundled.
- Import PhoneShowcase for the complete composition or the included named Iphone export for the portable frame alone. The frame supports children, src, videoSrc, tone, paused and standard div attributes. Each instance uses unique SVG IDs. No Tailwind setup or external media is required.
- Finish controls are native radios with keyboard navigation. defaultFinish initializes selection and changes to it restart selection; use finish/onFinishChange for controlled state. replayToken restores the default. Pause and reduced motion remove decorative transitions while preserving selection.
- The three-device composition intentionally layers silhouettes; the center device remains readable. Side copies are inert, so custom screen controls have only one accessible instance. Use solo for interactive screen content. Spread is clamped to 40–150 and tilt to 0–30 degrees.
- Device frame colors follow the selected finish independently of the website theme. Source frames also support neutral light/dark tones. Custom videos pause when offscreen, hidden, explicitly paused or reduced motion is enabled; native video controls remain available.
React 19.2CSS container queriesResizeObserver
Magic UI · MIT; device frame geometry. See bundled magic-ui-device-LICENSE.txt.
Chungus UI · Project-authored composition, artwork and motion. Public distribution terms pending release decision.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
headline | string | "Made to stand out." | Headline |
defaultFinish | string | "titanium" | Starting finish |
arrangement | string | "trio" | Arrangement |
spread | number | 112 | Spread |
tilt | number | 14 | Perspective |
finish | PhoneFinish | undefined | Optional controlled finish. Paired with onFinishChange; overrides internal selection. |
onFinishChange | (finish: PhoneFinish) => void | undefined | Reports titanium, midnight or silver after a selection. |
screen | ReactNode | optical wallpaper | Custom screen content, repeated in the arrangement. Side copies are inert and hidden from accessibility APIs. |
imageSrc | string | undefined | Optional screenshot URL; takes precedence over default wallpaper, but custom screen takes precedence over this image. |
paused | boolean | false | Pause decorative motion; functional controls remain available. |
replayToken | number | 0 | Change to reset the presentation. |
className | string | '' | Additional outer classes. |