shadcn.io is not affiliated with official shadcn/ui
Split Layout Chat Skeleton Hero Block for Radix UI
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.
Installation
Overview
A split-layout hero with a minimal AI chat app beside the copy, for React with Radix 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.