Mockup
Mockup components display content inside realistic UI shells — browser, code editor, phone, or OS window.
Installation
npx jsx-daisyui add mockupBrowser
Default
mockup-browser-default
Page content goes here
With background
mockup-browser-colored
Page content goes here
SaaS dashboard
mockup-browser-saas
Code
Default
mockup-code-default
npm install daisyuiMulti-line
mockup-code-multiline
npm install daisyuiinstalling...Done!Highlighted line
mockup-code-highlight
import daisyui from "daisyui" plugins: [daisyui], // ← add this export default configColored
mockup-code-colored
npx create-next-app@latestscaffolding project...Done! Run: npm run devPhone
Default
mockup-phone-default
It's Glowtime.
App UI
mockup-phone-app
Window
Default
mockup-window-default
Window content goes here
With background
mockup-window-colored
Window content goes here
Props
MockupBrowserToolbar
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | - | URL to display in the browser address bar. |
MockupCodeLine
| Prop | Type | Default | Description |
|---|---|---|---|
prefix | string | - | Text to display at the start of the line (e.g. '$', '>', or line numbers). |