Hero Section
Landing hero with announcement pill, actions, media slot and logo strip in centered, split and stacked layouts.
pnpm dlx @glinui/cli@latest add hero-sectionInterfaces that feel finished on day one
Tokens, primitives and blocks that share one lighting model, so every screen you ship looks like the same product.
Used by small teams who care about detail
- Acme
- Nimbus
- Parallax
- Fernwood
- Quill
- Loomwork
Installation
pnpm dlx @glinui/cli@latest add hero-sectionPrefer the package?
Usage
Own design, composed from Badge, Heading, Text, Button and Reveal. Layout inspiration only from public MIT hero blocks; no upstream markup is copied.
The `background` slot takes any decorative node (GridPattern, AuroraBackground, a gradient). It is aria-hidden and never intercepts pointer events.
Links render real anchors through `href`; pass `onClick` for client routers.
Variants
Centered with a pill, and stacked media on a glass shell.
Stacked media on glass
Glass shells need a backdrop behind them.
<HeroSection title="Centered with a pill" announcement="New" primaryAction={{ label: "Start", href: "#" }} /><HeroSection variant="glass" layout="stacked-media" title="Stacked media" media={<Screenshot />} />In a layout
A hero followed by a feature section.
Interfaces that feel finished on day one
Tokens, primitives and blocks that share one lighting model, so every screen you ship looks like the same product.
Used by small teams who care about detail
- Acme
- Nimbus
- Parallax
- Fernwood
- Quill
- Loomwork
Why Glin
Everything a landing page needs
Six reasons to stop rebuilding the same section.
Accessible
Landmarks, focus rings and AA contrast built in.
Measurable
Hooks for analytics on every call to action.
Private
No third party requests, no tracking pixels.
Easy to leave
Plain React and Tailwind. Copy the file and own it.
<> <HeroSection ... /> <FeatureGrid ... /></>Accessibility
- A `section` labelled by the headline, which is the page h1 by default.
- Decorative background is aria-hidden.
- Announcement link and actions keep visible focus rings.
ARIA Attributes
- `aria-labelledby` points at the headline
- `aria-hidden` on the background layer
Reduced Motion
Entrance reveals and the copy blur-slide follow the Glin motion level. At level none or prefers-reduced-motion everything renders in its final static state.
API Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
layout | "centered" | "split" | "stacked-media" | No | centered | `split` puts copy at the start and media at the end (mirrored in RTL). |
variant | BlockLook | "default" | null | No | ambient | Omit `variant` to follow the ambient style: glinr (open canvas), plain under minimal, glass panel when opted in. |
title | React.ReactNode | Yes | - | Headline, rendered as an h1 (see `headingLevel`). |
description | React.ReactNode | No | - | Lede under the headline. |
announcement / announcementHref | ReactNode / string | - | - | Pill above the headline. A string gets an accent dot; a href makes it a link. |
primaryAction / secondaryAction | { label, href?, onClick?, icon?, variant? } | - | - | Two actions. With `href` they are anchors. |
media | React.ReactNode | No | - | Screenshot, video or illustration slot. |
logos | React.ReactNode | No | - | Strip under the hero, usually a LogoCloud. |
background | React.ReactNode | No | - | Decorative layer behind the content. |
entrance | boolean | No | true | Reveal the copy on mount through the motion engine. |
announcement | React.ReactNode | No | - | Small pill above the headline. A string gets a dot, a node is rendered as given. |
announcementHref | string | No | - | Link target for the announcement pill. |
headingLevel | 1 | 2 | No | 1 | Heading level of the headline. Default 1. |
primaryAction | HeroAction | No | - | Auto-generated from TypeScript source. |
secondaryAction | HeroAction | No | - | Auto-generated from TypeScript source. |
Source
Import directly from the package or browse the source on GitHub. Click any file to view it.
Import
import { HeroSection } from "@glinui/ui"Dependencies
@glinui/uiclass-variance-authorityGenerated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/hero-section.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
HeroSectionProps
HeroSectionProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
announcement | React.ReactNode | No | - | Small pill above the headline. A string gets a dot, a node is rendered as given. |
announcementHref | string | No | - | Link target for the announcement pill. |
background | React.ReactNode | No | - | Decorative layer behind the content (AuroraBackground, GridPattern, a gradient). Hidden from assistive tech. |
description | React.ReactNode | No | - | Lede paragraph under the headline. |
entrance | boolean | No | true | Entrance reveal of the copy. Follows the motion level; none at level none. Default true. |
headingLevel | 1 | 2 | No | 1 | Heading level of the headline. Default 1. |
layout | "centered" | "split" | "stacked-media" | No | "centered" | Variant option from contentVariants. |
logos | React.ReactNode | No | - | Optional strip under the actions (a LogoCloud, avatars, a rating line). |
media | React.ReactNode | No | - | Media slot: end column for `split`, below the copy for `stacked-media`. |
primaryAction | HeroAction | No | - | - |
secondaryAction | HeroAction | No | - | - |
title | React.ReactNode | Yes | - | Headline, rendered as the page level heading. |
variant | BlockLook | "default" | null | No | - | Block shell. Omit for the ambient style: glinr (open canvas), plain, or glass panel. |