Split Screen Hero React component
A two-sided hero with a shared headline: two full-bleed photos meet at a seam, and the half under the pointer opens up to show its description and button. Stacks on phones.
About the Split Screen Hero component
Split Screen Hero gives a page two equal front doors. Two full-bleed photos meet at a thin seam under one shared headline, and whichever half the pointer is over opens up to show its description and button.
The seam moves opposite to the pointer, so the half you are reading grows toward you and the pointer never chases the edge. On phones the halves stack, with everything visible.
When to use it
Use it when a site serves two audiences or two products of equal weight, like buyers and sellers, sea and land, or personal and business.
If one option clearly matters more, use a single-focus hero such as Simple Hero Section.
Installation
Add the Split Screen Hero component to your project with the shadcn CLI. It lands in components/split-screen-hero.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/split-screen-heroOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<SplitScreenHero /> accepts 7 props (required ones are marked *). 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" |
| title The shared headline across both halves. | string | "Two ways to see the coast" |
| left | object | DEFAULT_LEFT |
| left.eyebrow | string | — |
| left.title* | string | — |
| left.description | string | — |
| left.image* | string | — |
| left.alt | string | — |
| left.cta | { label: string; href?: string; onClick?: () => void } | — |
| right | object | DEFAULT_RIGHT |
| right.eyebrow | string | — |
| right.title* | string | — |
- theme"dark" | "light"Default: "dark"
- title
The shared headline across both halves.
stringDefault: "Two ways to see the coast" - leftobjectDefault: DEFAULT_LEFT
- left.eyebrowstring
- left.title*string
- left.descriptionstring
- left.image*string
- left.altstring
- left.cta{ label: string; href?: string; onClick?: () => void }
- rightobjectDefault: DEFAULT_RIGHT
- right.eyebrowstring
- right.title*string
Show all 19 propsShow fewer
| right.description | string | — |
| right.image* | string | — |
| right.alt | string | — |
| right.cta | { label: string; href?: string; onClick?: () => void } | — |
| seamLabel Word in the badge on the seam. Pass an empty string to hide it. | string | "or" |
| range How far the seam can travel from the centre, in percent of the width. | number | 15 |
| minHeight Height from tablet width up, in px. | number | 720 |
- right.descriptionstring
- right.image*string
- right.altstring
- right.cta{ label: string; href?: string; onClick?: () => void }
- seamLabel
Word in the badge on the seam. Pass an empty string to hide it.
stringDefault: "or" - range
How far the seam can travel from the centre, in percent of the width.
numberDefault: 15 - minHeight
Height from tablet width up, in px.
numberDefault: 720
Collections
Use-case pages that compare Split Screen Hero with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Split Screen Hero FAQ
- How far does the seam move?
- The range prop sets it, in percent of the width from the centre. The default is 15, so the seam travels between 35% and 65%.
- Does it work with a keyboard?
- Yes. Tabbing to a button opens that half, the same way hovering does.
- What happens on phones?
- Below 720px of container width the halves stack and the descriptions stay visible, since there is nothing to hover.
- Do I need the badge on the seam?
- No. Pass an empty seamLabel to hide it.
