Device frame
Generic phone, slim phone, tablet, laptop, desktop, watch and browser frames drawn purely with CSS and neutral tokens; every measurement scales with the frame width via container units, and children render as the screen.
About Device Frame
Generic phone, slim phone, tablet, laptop, desktop, watch and browser frames drawn purely with CSS and neutral tokens; every measurement scales with the frame width via container units, and children render as the screen.
Device Frame is a free animated component for React, built on shadcn/ui and Tailwind CSS. It ships as 208 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- mockup
- device
- phone
- laptop
- browser
- frame
- screenshot
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/device-frameUses: utils.
Usage
import DeviceFrame from "@/components/chocolate/device-frame"
export default function Page() {
return <DeviceFrame />
}