Device Frame
Wraps any React UI in a phone with notch, status bar and side buttons, or a browser window with a URL bar. Built from theme tokens for light and dark.
src/registry/blocks/device-frame.tsx/r/device-frame.json
Installation#
bash
npx shadcn@latest add https://ui.minidev.pro/r/device-frame.json
Usage#
tsx
import { DeviceFrame } from "@/components/ui/device-frame"
export function Example() {
return <DeviceFrame />
}
API reference#
| Prop | Type | Default |
|---|---|---|
device | "phone" | "browser" | - |
url | string | - |
time | string | - |
children | React.ReactNode | - |
className | string | - |
screenClassName | string | - |
Dependencies#
npm
lucide-react
Built from
No other MiniDev files
Related media components#
Media LibraryA Tailwind media library panel with an upload action and a two column grid of assets showing file name, size and a type badge for image, video, vector or doc.Audio PlayerMinimal React audio player row with a play and pause toggle, title, subtitle and an accessible progress bar. Controlled, so it works with any audio source.AvatarShadcn compatible avatar on Base UI with image and initials fallback, three sizes, a status badge and an overlapping avatar group with a plus count.CarouselScroll snap React carousel with previous and next buttons, arrow key support and a labelled region. Shows one, two or three slides by breakpoint, no library.File ListA stacked list of file rows showing each name and metadata such as size or date, with an optional download button per item. Good for React attachment lists.File RowA single file row with an icon, a truncated name, an optional meta line and a ghost download button with an accessible label. Styled with Tailwind.
All media and upload components