Device Mockup 2 - Centered tablet that breathesPro
A centered headline and CTA pair above a large tablet that slowly scales in and out like it is breathing, with a dashboard placeholder on screen. Use it to introduce a tablet or web dashboard product where the screen itself should stay readable.
About Device Mockup 2
A centered headline and CTA pair above a large tablet that slowly scales in and out like it is breathing, with a dashboard placeholder on screen. Use it to introduce a tablet or web dashboard product where the screen itself should stay readable.
Device Mockup 2 is a device mockup block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 93 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
- tablet
- breathe
- loop
- centered
- dashboard
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add device-mockup-02Dependencies installed automatically: motion.
Uses: button, device-frame, reveal, use-reduced-motion, utils.
Usage
import DeviceMockup02 from "@/components/blocks/device-mockup-02"
export default function Page() {
return <DeviceMockup02 />
}