# Hero Phone Mockup — Tailwind Hero Section

> A split hero with a floating CSS phone whose app screen stays alive: new expenses spring into the list and the balance rolls to match.

- Category: [Hero Sections](https://pixelpapa.com/components/heroes.md)
- Tags: hero, phone, mockup, app, mobile
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/heroes/hero-phone-mockup

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/hero-phone-mockup
```

The file is written to `components/pixelpapa/hero-phone-mockup.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/heroes/hero-phone-mockup.

## AI prompt

```text
Add the "Hero Phone Mockup" component from PixelPapa UI to this project.

What it is: A split hero with a floating CSS phone whose app screen stays alive: new expenses spring into the list and the balance rolls to match.
Category: Hero Sections. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/hero-phone-mockup
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/hero-phone-mockup.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/hero-phone-mockup.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/hero-phone-mockup" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More hero sections

- [Hero Before After Toggle](https://pixelpapa.com/components/heroes/hero-before-after-toggle.md) (Pro): A hero with a Before / After switch: the same nine request cards spring from a scattered pile into three labelled, colour-coded lanes and back.
- [Hero Cursor Spotlight](https://pixelpapa.com/components/heroes/hero-cursor-spotlight.md) (Pro): An always-dark hero where a soft light trails the pointer and reveals a hidden grid of service nodes; it wanders on its own until you move.
- [Hero Dashboard Lift](https://pixelpapa.com/components/heroes/hero-dashboard-lift.md): Centered headline over a product window that tilts flat as you scroll, with staggered entrance.
- [Hero Drifting Card Rows](https://pixelpapa.com/components/heroes/hero-drifting-card-rows.md) (Pro): Three tilted rows of small UI cards drift in opposite directions behind a headline that sits in a soft cleared pocket.
- [Hero Editorial Serif](https://pixelpapa.com/components/heroes/hero-editorial-serif.md) (Pro): A magazine-style opener: an oversized serif headline rises line by line from behind hairlines that draw across an asymmetric grid.
- [Hero Grid Cells Reveal](https://pixelpapa.com/components/heroes/hero-grid-cells-reveal.md): A hero on a spreadsheet-like grid where cells light up in rings that ripple out from the headline, and individual cells glow under the pointer.