Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Centered Browser Frame Hero Block for Svelte

A centered showcase hero over a full-width browser window showing the product, a logs explorer with a request histogram and a log, held by a hairline frame and faded below the fold.

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 centered showcase hero for Svelte with Ark UI, here for Gauge, a logs platform for edge apps. An announcement link, the headline, a sentence and a ShineButton with an outline Button sit at the top; below them the product runs on past the first screen in a browser window (Frame), held by a hairline frame with + marks on its top corners and faded at its foot. The window is a logs explorer in greyscale: a request histogram with a selected span in the foreground tone, and the log for that span with levels as chips. The window is decoration: it is hidden from assistive technology and inert. Each part fades in once with CSS, and the window scales in; both stop for reduced motion.

FAQ

What is in the window, and can I swap it?

A fixed-height box (h-80, sm:h-[32rem], lg:h-[38rem]) holding an icon rail, a search bar, a histogram built from 60 bars and a log of sixteen requests. It uses container queries, so it drops its rail and columns as the window narrows. Replace the arrays at the top with your product's data, or swap the whole box for your own screenshot.

Is the window accessible?

It is decoration, so it is aria-hidden and inert: none of it takes focus, and the headline and the two links carry the content. The level chips use a fill or a border as well as their label, so errors and warnings don't depend on colour.

Why does the window fade out?

A mask on the window fades it to nothing at its foot, and the frame's side lines fade the same way, so the product seems to continue below the fold and the next section starts clean. The mask is a CSS mask-image, with no script.

Where is the primary button, and is it a link?

The ShineButton is the only primary control, a link on every framework: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria. The second action is an outline Button. Both sit above the window, within the first screen.

Does it work in right-to-left languages?

Yes. The announcement arrow mirrors, the log's times and routes and the histogram stay left-to-right, as code and time axes should, and the rest of the window follows the page direction.

How does it behave on a phone?

The headline steps down to text-4xl, the buttons wrap, and the window becomes a shorter h-80 box, with its rail, the time column and the millisecond column dropped by the container queries, so what stays is readable: the search, the histogram and the route list.

All 150 hero blocks