Show live UI inside a laptop or a phone. The lid opens and the whole device turns, but the screen is an ordinary subtree laid out at the device's true width (1280 or 390 pixels) inside a size container, so breakpoints and container queries behave exactly as in the product.
Files · 14
Dependencies
npm packages
@radix-ui/react-slot
clsx
lucide-react
tailwind-merge
Registry items
https://caliperui.site/r/styles.json
Registry Items
device-frame
Configuration
Name
device-frame
Type
UI
Description
Show live UI inside a laptop or a phone. The lid opens and the whole device turns, but the screen is an ordinary subtree laid out at the device's true width (1280 or 390 pixels) inside a size container, so breakpoints and container queries behave exactly as in the product.