shadcn.io is not affiliated with official shadcn/ui
Centered Minimal Hero Block for Radix UI
A compact centered type-only hero: a two-line headline with a muted second line, one sentence, a Shine Button and a second action, on faded rails.
Installation
Overview
A compact, centered, type-only hero for React with Radix UI, here for Hushnote, a notes app. It is a two-line h1 whose second line is muted, one supporting sentence, a ShineButton with an outline Button as links, and a quiet line of platforms. The only structure is the page's solid rails and + marks, which fade in from the top over a faint monochrome glow. Each part fades in once with CSS, and nothing moves for visitors who ask for reduced motion. Made for early-stage products, launches, and any landing page where the value proposition can stand on its own.
FAQ
How do I control where the headline breaks?
The two lines are separated by a br, and the second is a muted span, so the hierarchy is in the colour of the words, not a second element. Keep the max-w-2xl on the heading so a long headline doesn't run the full width, and let text-balance even out the lines on a phone.
Why is the second line muted?
A bold lead and a muted continuation is how this set sets display type: the first line says the thing, the second adds the turn. The muted colour is text-muted-foreground, which passes AA contrast on the page background in light and dark.
What do the rails do here?
They are the same page rails every block in this set draws, with the top rule and + marks, but with fade="top", so the side lines appear from nothing at the top, which suits a hero that opens a page. When this hero follows another block, remove the fade so the rails stay unbroken.
Why a Shine Button, and how is it a link?
The ShineButton is the one primary control: a band of light sweeps across it once on hover or focus, and fades in instead for visitors who ask for reduced motion. Both actions are real links: asChild with an a on Ark and Radix, render with nativeButton={false} on Base UI, and href on React Aria.
Is this minimal hero accessible?
Yes. The page has one h1, both calls to action are links named by their visible text with a visible focus ring, and the muted line, the sentence and the platform note all pass AA contrast. The entrance only fades and lifts each part a few pixels, and it is off under reduced motion.