Device mockups are a great way to showcase your designs in a realistic way!
You can use the daisy_device component to display a phone mockup.
= daisy_device(css: "mockup-phone", display_css: "overflow-auto") do
.flex.flex-col.gap-4.p-4.pt-14.pb-8.bg-base-100
.text-center.text-2xl.font-bold
Beautiful Landscapes
= image_tag("landscapes/beach.jpg", class: "rounded-lg")
= image_tag("landscapes/desert.jpg", class: "rounded-lg")
= image_tag("landscapes/forest.jpg", class: "rounded-lg")
= image_tag("landscapes/mountain-river.jpg", class: "rounded-lg")
You can simulate a tablet by hiding the camera (show_camera: false)
and overriding the container's aspect ratio, max-width, and border
radius. Because DaisyUI v5 uses CSS Grid for the phone mockup layout,
the sizing must be applied to the container via css:, not the inner
display.
= daisy_device(css: "mockup-phone border-primary max-w-none w-[600px] aspect-[16/10] rounded-[30px]", display_css: "overflow-auto rounded-[24px]", show_camera: false) do
.flex.flex-col.gap-4.p-4.bg-base-100
.text-center.text-2xl.font-bold
Beautiful Landscapes
= image_tag("landscapes/beach.jpg", class: "rounded-xl")
= image_tag("landscapes/desert.jpg", class: "rounded-xl")
= image_tag("landscapes/forest.jpg", class: "rounded-xl")
= image_tag("landscapes/mountain-river.jpg", class: "rounded-xl")
Create virtual credit / debit cards to keep your real info safe.
Get $5 when you sign up — free to start!
Everything you need to grow your business with confidence!
CRM, Lead Generation, Project Management, Contracts, Online Payments, and more!
The ads above are affiliate links to products I regularly use and highly
recommend.
I may receive a commission if you decide to purchase.