Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Image Editor Hero Block for Ark UI

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.

All 150 hero blocks