Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Image Editor Hero Block for React

A split hero for a browser photo editor: the headline, three checks and a Shine Button beside a divider and a wide editor window that runs off the end rail, with a photo being cropped, adjustments and layers.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A split hero for Kelpie, a browser photo editor, on drafting lines. The copy sits at the start: the headline, a sentence, three checks and a Shine Button with an outline second action. A solid divider separates it from a wide editor window that runs off the end rail and fades at its foot: a tool rail with Crop pressed, a dotted canvas with a landscape photo being cropped (a thirds grid, eight handles, a size tag and a teammate's named cursor), and a panel of three adjustment sliders and a layers list, with collaborators' avatars in the title bar. The window is drawn in your theme's greys with foreground tones, so the Shine Button stays the one primary action. For photo editors, design tools, creative suites and visual collaboration products.

FAQ

How do I change the tools and the adjustments?

Edit the constants at the top of the file. TOOLS is the rail (set active on one), ADJUSTMENTS has a label, a value and the knob's position in percent, LAYERS is the panel's list and PEOPLE the avatars. The crop's handles are HANDLES.

How do I show a real photo on the canvas?

Replace <Photo /> with an img that fills the same box (absolute inset-0 size-full object-cover) and give the figure's section a text alternative if the photo matters. The crop rectangle, thirds and handles sit on top of it, so they keep working.

How is the window drawn past the rail?

The window is wider than the cell, positioned from the start, and the cell clips it, so it appears to run off the end rail; a mask fades its foot. The divider is a border-s on the cell with a + mark where it meets the top rule, from our Guides component, and below lg it becomes a rule between the stacked parts.

How does a screen reader read the hero?

It reads the headline (the block's one h1), the paragraph, the checklist and the two links. The editor is a picture of the product, so it's hidden from screen readers and marked inert: nothing in it can be focused or changed. The checklist's ticks are hidden too.

How does the editor fit on a phone?

The parts stack below the lg breakpoint, copy first and the editor under it in a 20 rem band: the tool rail and the canvas show and the panel runs off the end. The Shine Button sits on the first screen.

What moves on load, and can I turn it off?

The copy fades and rises in on load and the window settles in just after it. It's all CSS, with no animation library, and nothing loops. With reduced motion on, everything appears in place.

  • Pro

    Split Kanban Board Hero

    Product windows

    A reverse split hero for a sprint planner: a wide board window that runs flush to the start rail and fades at its foot, with a card mid-drag over a drop slot, then a divider and the copy with a Shine Button.

  • Pro

    Split Markdown Editor Hero

    Product windows

    A reverse split hero: a two-pane markdown editor in a hairline frame with + marks on its corners, then a divider, the headline, three checks and a Shine Button.

  • Pro

    Split Map Canvas Hero

    Diagrams and maps

    A split hero beside a wide map canvas that runs flush to the end rail: eight pulsing office pins and routes between them, with a closing band of three stats.

  • Pro

    Split Layout Chat Skeleton Hero

    Product windows

    A split hero for an AI assistant: a headline, a Shine Button and a second action beside a chat app sketched in skeleton bars that runs off a tinted panel, closed by a band of three feature cells.

  • Pro

    Split Architecture Diagram Hero

    Diagrams and maps

    A reverse split hero for an infrastructure platform: a service topology on a tinted canvas flush with the start rail, six icon nodes, a travelling request and an inspector, beside a headline, a Shine Button and three ticks.

  • Pro

    Split Layout Image Hero

    Product windows

    A reverse split hero for an AI code assistant: an editor drawn from UI runs edge to edge to the start rail, with a file tree, code, a ghost suggestion and an assistant panel; a divider and the copy sit at the end.

All 150 hero blocks