22 public components have split in the name, and they are three different jobs wearing one layout: a hero with the pitch on one side, a sign-in with the form on one side, and a testimonial with the face on one side. The layout is a two-column grid, which is about four lines of CSS. What you are actually choosing is what happens when the two columns become one.
The components
Split Hero With Image Cards is the marketing version, with a serif headline on one half and stacked image cards on the other, and the hero guide covers the rest of that family.
Sign In Split Screen is the auth version: form on one side, a branded panel on the other, which the login guide treats as the default shape for a desktop sign-in.
Split Testimonial pairs a quote with a portrait and steps through both together, and Lightning Split is the decorative end: a WebGL effect down the seam, with the cost that comes with a shader, per the shader guide.
The stack order is the decision
At the breakpoint the two halves become one column, and the order they take decides what a phone reader sees first. Put the message first and the picture second, always. A split hero that stacks image-first gives half of your traffic a screen of decoration before a single word.
That is a source-order decision, not a CSS one. Reordering visually with order leaves the reading order and the tab order unchanged, so the screen reader and the keyboard still get the old sequence. Write the markup in the order it should be read and let the grid place it.
The other four details
The decorative half is decorative. An image that carries no information takes an empty alt attribute so it is skipped rather than announced. If it does carry information, it needs a real description, and if it needs a real description it probably belongs in the content half.
Full height is a trap on mobile. 100vh includes the browser chrome that appears and disappears while scrolling, which is the classic split-screen jitter. 100dvh is the fix, with min-height rather than height so content longer than the screen still fits.
Independent scrolling needs a guard. If one half is sticky while the other scrolls, the sticky half breaks the moment its content is taller than the viewport, and it fails silently on the smallest screens first.
The form half owns the heading. In a split sign-in the h1 goes with the form, not on the marketing panel, or the page announces itself as an advertisement.
What a split screen is not
A comparison slider looks like a split screen and is a different component: Image Comparison Slider and Feature with Image Comparison put two images in the same space with a draggable seam, which is a before-and-after control rather than a layout. Reaching for one when you wanted the other is a common wrong turn, because both are described as split.
Where else to look
The honest list, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS grid | The layout itself, in four lines | You still make every decision above |
| Tailwind Plus | Conventional split heroes and auth screens | Paid, and widely used |
| A blocks registry | Assembled sections with the breakpoints set | You inherit its type and spacing |
| 21st | Split heroes, split auth and split testimonials with previews | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue.
Frequently asked
- What order should a split screen stack in on mobile?
- Message first, picture second, always. A split hero that stacks image-first gives phone traffic a screen of decoration before a single word, and because reordering with CSS order leaves reading and tab order unchanged, the markup itself has to be in the reading order.
- Why does my split screen jitter on a phone?
- 100vh includes the browser chrome that appears and disappears while scrolling. Use 100dvh, and set it as a min-height rather than a height so content taller than the screen still fits.
- Where does the heading go in a split sign-in?
- With the form, not the marketing panel. If the h1 sits on the branded half, the page announces itself as an advertisement to anyone reading it as a document, including search engines.
- Is a comparison slider a split screen?
- No, and confusing the two is a common wrong turn since both are described as split. A comparison slider puts two images in the same space with a draggable seam, which is a before-and-after control; a split screen is a layout with two independent halves.