Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Markdown Editor Hero Block for React

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.

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 reverse split-layout hero with a markdown editor, between solid rails: the editor is at the start and the copy at the end, in the same order of reading as the page (the copy comes first below the lg breakpoint). The editor is a window named launch-notes.md with a toolbar and two panes side by side, held in a hairline frame with + marks on its corners: on the left, the source of a short post with line numbers, its frontmatter, a heading, bold text, a list and a TypeScript code fence; on the right, the same post rendered, with its title, the bold word, the bullets and the code in a chip; a status line closes the window. A divider, with a + mark where it meets the top rule, separates it from the copy: an announcement pill, the headline, a sentence, a three-point checklist and two calls to action, a Shine Button and an outline button. The window is our Frame on your theme's tokens, in greyscale. For writing tools, blogging platforms, documentation builders and developer notebook apps.

FAQ

How do I change the sample post?

Both panes are plain markup in the block, one line per element, so edit them together. Each line of the source is a span with the LINE class, which numbers it with a CSS counter, so you add or remove lines without renumbering; the preview pane shows the same content as it would render. Keep each line short: the panes are narrow, and a line that doesn't fit ends with an ellipsis rather than wrapping.

Can visitors type in the editor?

Not as shipped: the editor is a picture of the product, so it's hidden from screen readers and inert. To make it live, replace the source pane with a Textarea that has a visible or screen-reader label, keep its value in state, and render it into the preview pane with a markdown parser such as remark or marked, sanitising the HTML before you show it. Then remove aria-hidden and inert from the frame.

How does a screen reader read the hero?

It reads the pill, the headline, the paragraph, the checklist and the two calls to action, all links named by their text. The editor is decoration: hidden from screen readers and inert, so nothing in it is read or focused, and the sample post doesn't interrupt the pitch. The checklist's ticks are hidden too, and the headline is the block's one h1.

How does the editor fit on a phone?

The two halves of the hero stack below the lg breakpoint, with the copy first and the editor under it, so the Shine Button is on the first screen. The two panes stay side by side at every width, since source next to preview is the point; on small screens their padding and type step down a little, the toolbar keeps three of its five buttons, and long lines end with an ellipsis, so nothing scrolls sideways down to 320px. The headline steps down from text-5xl to text-4xl.

What happens in right-to-left layouts?

The copy, the checklist and the calls to action follow the page's direction, and the editor moves to the other side of the hero. The editor window itself stays left to right, as code and markdown source do, so the source pane keeps its place before the preview and every line keeps its marks at its start.

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

The copy fades and rises in, and the editor fades and settles in just after it. Both are CSS transitions that run once, with no animation library, and with reduced motion on both halves appear in place.

  • Pro

    Split Layout Code Diff Hero

    Code and terminal

    A showcase hero for a code review tool: a centred headline, a Shine Button, a second action and three ticks over a wide pull request window in a hairline frame, with a diff whose changes play out line by line.

  • Pro

    Split Image Editor Hero

    Product windows

    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.

  • Pro

    Showcase File Explorer Hero

    Code and terminal

    A showcase hero for a code editor: a centred headline, a Shine Button and three ticks above a wide editor window in a hairline frame, with a working file tree beside a sketched editor pane.

  • Pro

    Install Command Snippet Hero

    Code and terminal

    A compact centred hero for a web framework: an install command with a copy button, two calls to action and a band of three stats.

  • Pro

    Split Layout Form Builder Hero

    Product windows

    A reverse split hero for a form builder: a builder window with a palette and a canvas of fields in a hairline frame with + marks, then a divider, the headline, three checks and a Shine Button.

  • 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.

All 150 hero blocks