Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Split Layout Chat Skeleton Hero Block for React

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.

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-layout hero with a minimal AI chat app beside the copy, for React with Base UI. The section sits on the page's drafting lines: two solid rails at the edges of the page column that continue into the blocks above and below, and a rule along its top edge that runs to the page's edges, with a plus mark on each crossing. Every line is the theme's border colour, so it follows any preset. A divider splits the column, with a plus mark where it meets the top rule. On the start side an announcement pill links to Hollis 2.0, an assistant for codebases, then a headline, a subtitle, a primary ShineButton and an outline Button, both links. On the other side a tinted panel runs flush to the end rail, and the app runs off its start and foot edges and fades out: a conversation list and a thread, drawn as pulsing Skeleton bars, with avatars (the reply's with a bot icon), a source chip under the reply and a composer with a send button. Under the whole split a band with its own rule and plus marks closes the block with three cells, each an icon with a bold lead and a muted sentence. It's a sketch rather than a transcript, so it says "AI" without promising a particular answer. For AI SaaS products, copilots, chat assistants and developer tools.

FAQ

How do I change the chat app?

The prompt and the reply are lists of bar widths at the top of the file, PROMPT and REPLY, and CONVERSATIONS is the list's rows: add a width such as w-2/3 for one more line, or remove one. Each message is our Message with a MessageAvatar and a MessageContent holding Skeleton bars, so you can add another by copying one. To show real words instead of a sketch, put text in the MessageContent in place of the bars.

Can I show a screenshot of my product instead?

Yes. Replace the window's contents with your image, with object-top so the top of the app shows, and keep the panel and its edges that crop it. Give the image an alt that says what it shows, and remove aria-hidden and inert from the panel, which are only there because the sketch says nothing a screen reader could use.

How are the lines and the closing band drawn?

The page column has Guides bleed marks="top" rules="top": two side rails and one top rule with a plus on each crossing. The divider is the panel's lg:border-s with Guides marks="start" rules="none" sides={false}. The band under the split is a divide-x row of three cells with Guides marks="top" rules="top" sides={false} for its rule and the plus marks on the rails. The band is the block's last element, so the column has no bottom padding and the next block draws the next rule.

How does a screen reader read the hero?

It reads the announcement pill as a link, then the headline (the block's one h1), the paragraph, the two links and the three feature sentences. The chat app is a sketch with no words in it, so it's hidden from screen readers and out of the tab order.

How does it fit on a phone?

The columns stack below the lg breakpoint, with the panel under the copy behind a ruled line, 18rem tall, and the conversation list drops out so the thread keeps its width. The feature cells stack, divided by rules. Nothing scrolls sideways down to 320 px, and the Shine Button is on the first screen.

What moves, and can I turn it off?

The copy fades and rises in, the app fades and settles in just after it, and the skeleton bars pulse. It's all CSS, with no animation library. With reduced motion on, everything appears in place and the bars stay still.

  • Pro

    Split Layout Dark Terminal Hero

    Code and terminal

    A split hero for an API: the headline, a Shine Button and three ticks beside a dark terminal with a request, a status and a JSON response that writes itself out, above a band of three figures.

  • 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

    Centered Command Palette Mockup Hero

    Product windows

    A showcase hero for a keyboard-first issue tracker: a centred headline and two calls to action over a command palette drawn in a hairline frame.

  • Pro

    Dashboard Preview Hero

    Product windows

    A showcase hero with a headline, a Shine Button, an outline button and a trust line above a wide browser window in a hairline frame, a greyscale sketch of an analytics dashboard that runs on below the fold.

  • Pro

    Split Layout Tab-Switch Browser Hero

    Interactive demos

    A showcase hero for a project workspace: the headline beside its pitch and a Shine Button, then a browser window in a hairline frame whose tabs switch between three drawn views: Projects, Analytics and Settings.

  • Pro

    Split Code Preview Hero

    Code and terminal

    A reverse split hero for a job-queue SDK: a code window in a hairline frame with a copy button, beside the headline, three checks and two calls to action.

All 150 hero blocks