shadcn.io is not affiliated with official shadcn/ui
Split Layout Browser Frame Hero Block for Svelte
A showcase hero with start-aligned copy, a band of three checklist cells and a browser window in a hairline frame showing a deployments list.
Installation
Overview
A showcase hero with a browser window under the copy, for Svelte with Ark UI. Between solid page rails, an announcement pill, a headline, one sentence and two calls to action for a fictional hosting platform sit on the start side: a ShineButton that sweeps a light across it on hover, and an outline Button, both links. A band of three checklist cells follows, ruled between the rails with + marks where it meets them. Below, a hairline frame with + marks on its corners holds a browser window, drawn in greyscale markup with its three dots and an address bar: a sidebar, a filter and a list of deployments, the newest still building with a progress bar. The window runs past the foot of the frame and fades out. The copy fades and rises in on load and the window settles in just after, with CSS transitions that stay still under reduced motion; the block renders on the server with no JavaScript of its own. For SaaS products, web apps, developer platforms and dashboards that live in the browser.
FAQ
How do I put a real screenshot in the browser window?
Replace the drawn deployments list inside DeploymentsWindow with an img that fills the window's body (size-full object-cover object-top), and give it an alt that says what the screen shows. Or keep the drawing and edit DEPLOYMENTS and NAV to match your product. The window is decoration while it shows the drawing, so its box is aria-hidden and inert: remove both once it shows a real screenshot.
How do I change the address in the window's bar?
Edit ADDRESS at the top of the file, for instance to your app's own domain. It sits after a lock icon in a bar that takes the rest of the window's width, up to a maximum, and a long address shortens with an ellipsis instead of pushing the window wider.
How do screen readers read the hero?
The headline is the page's one h1. The pill and both calls to action are links, each named by its text, and the checklist is a list whose check marks are hidden, so each feature reads as plain text. The browser window is hidden from assistive technology and taken out of the tab order with inert, since the drawing is decoration.
How does the hero adapt to phones?
Everything stacks: the copy, the checklist (three rows instead of three cells) and then the window, which is 18rem tall on a phone and drops its sidebar and extra columns, so the list stays readable. Both actions end within the first screen, the headline wraps, balanced, and nothing scrolls sideways down to 320 px.
What moves on load, and can I turn it off?
The copy fades in as it rises a few pixels, and the window fades in as it grows from 98% of its size, 150 ms later. Both are CSS transitions from starting: styles (@starting-style), with no animation library. Under reduced motion there are no transitions: everything renders in place.
When should I use a browser frame instead of a phone mockup?
Use a browser frame when your product is a web application people use on a desktop or laptop: the dots and the address bar say so at a glance. Use a phone mockup for mobile-first products and native apps, where the device itself tells visitors where they'll use it.