Phone Fan Hero React component
An app launch hero: five phones open out from a stack into a fan, and the one you point at rises while its neighbours step aside. Comes with drawn screens, or use screenshots.
About the Phone Fan Hero component
Phone Fan Hero shows a whole app at once. Five phones open out from a single stack into a fan along the bottom of the hero, and the one you point at rises and straightens while its neighbours step aside.
The default screens are drawn in code, so it looks finished before you have screenshots. Swap them for your own images, or pass any content sized in em and it scales with the phone.
When to use it
Use it for app launches and download pages, especially when one screenshot can't show the range of what the app does.
For a web product, a browser mockup tells the story better.
Installation
Add the Phone Fan Hero component to your project with the shadcn CLI. It lands in components/phone-fan-hero.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/phone-fan-heroOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<PhoneFanHero /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| eyebrow | string | "Now on iPhone and Android" |
| title | string | "Your whole day, in one pocket" |
| description | string | "Money, plans, music and the way home, without switching apps." |
| primaryAction | { label: string; href?: string; onClick?: () => void } | null | { label: "Get the app" } |
| secondaryAction | { label: string; href?: string; onClick?: () => void; } | null | { label: "See the tour" } |
| screens Phones from left to right. Odd numbers fan best. | { label: string; image?: string; content?: React.ReactNode }[] | DEFAULT_SCREENS |
| spread Degrees between neighbouring phones. | number | 9 |
| frameColor Finish of the phone frames. | "Natural Titanium" | "Blue Titanium" | "White Titanium" | "Black Titanium" | "Natural Titanium" |
| minHeight Height from tablet width up, in px. | number | 720 |
- theme"dark" | "light"Default: "dark"
- eyebrowstringDefault: "Now on iPhone and Android"
- titlestringDefault: "Your whole day, in one pocket"
- descriptionstringDefault: "Money, plans, music and the way home, without switching apps."
- primaryAction{ label: string; href?: string; onClick?: () => void } | nullDefault: { label: "Get the app" }
- secondaryAction{ label: string; href?: string; onClick?: () => void; } | nullDefault: { label: "See the tour" }
- screens
Phones from left to right. Odd numbers fan best.
{ label: string; image?: string; content?: React.ReactNode }[]Default: DEFAULT_SCREENS - spread
Degrees between neighbouring phones.
numberDefault: 9 - frameColor
Finish of the phone frames.
"Natural Titanium" | "Blue Titanium" | "White Titanium" | "Black Titanium"Default: "Natural Titanium" - minHeight
Height from tablet width up, in px.
numberDefault: 720
Collections
Use-case pages that compare Phone Fan Hero with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Phone Fan Hero FAQ
- What size should my screenshots be?
- Portrait, around 9:19.5, the shape of a modern phone. They are cropped to fit.
- How many phones can I use?
- Any number, but odd numbers look best because one phone sits in the middle. Five suits most widths.
- Does it work on touch screens?
- Yes. Tapping a phone lifts it, and tapping it again lets it settle.
- Can I change the angle of the fan?
- Yes, with spread, in degrees between neighbouring phones.
- Can I change the colour of the phones?
- Yes. frameColor takes Natural Titanium, Blue Titanium, White Titanium or Black Titanium, the same finishes as Phone Marquee Showcase.
