Shared assets
Mockups
Device and card frames: Browser (toolbar), iPhone (status bar + home indicator), MacBook Pro, Screen 3:2 / Modern screen and Credit card. Pass src for a screenshot or children for live UI. Figma: Miscellaneous assets.
import
{ BrowserMockup, PhoneMockup, LaptopMockup, ScreenMockup, CreditCardMockup } from "@pepulux/ui"Browser
pepulux.com
iPhone and MacBook Pro
9:41
Screen mockups — 3:2 and modern
Credit card
Pepulux
•••• •••• •••• 4242
Card holderOlivia RhyeExpires06/28
Pepulux
•••• •••• •••• 4242
Card holderOlivia RhyeExpires06/28
Pepulux
•••• •••• •••• 4242
Card holderOlivia RhyeExpires06/28
Pepulux
•••• •••• •••• 4242
Card holderOlivia RhyeExpires06/28
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src / alt | string | — | Screenshot shown inside the device screen |
| children | ReactNode | — | Live UI rendered inside the screen instead of an image |
| toolbar (BrowserMockup) | "simple" | "address" | "simple" | Traffic lights only, or with an address bar |
| statusBar (PhoneMockup) | boolean | true | iOS status bar and home indicator |
| variant (ScreenMockup) | "frame" | "modern" | "frame" | Bordered 3:2 frame or floating modern card |
| variant (CreditCardMockup) | "dark" | "brand" | "light" | "gradient" | "dark" | Card colourway; also number, name, expiry |