# Frost Device Frame

Device frame showcase with a glass laptop and phone around product screenshots.

- id: `frost-device-frame`
- Page: https://agentic-ui-kit.com/components/frost-device-frame
- Live preview: https://agentic-ui-kit.com/live/piece/frost-device-frame?piece=frost-device-frame

## Install

```bash
agentic-ui add frost-device-frame
npx shadcn@4.17.0 add @agentic-ui/frost-device-frame
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** glass-device-frames, laptop-and-phone-mockup, custom-screen-slots, built-in-mockups, frost-style, dark-mode
- **Intents:** communicate, show-composition
- **Suits domains:** marketing, saas, media
- **Interaction:** read-only
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** device frame showcase with a glass laptop and phone around product screenshots, frosted device mockups to present an app on desktop and mobile
- **Avoid when:** animated 3D device mockups (use motion-device-mockups), real screenshots that need exact device bezels
- **Preserve when adapting:** decorative-mock-alt
- **Replace when adapting:** laptop-screen, phone-screen, title
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **npm dependencies:** lucide-react
- **Registry dependencies:** lib-primitives