# Beste UI > Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade. Markdown rendition of https://ui.beste.co/block/hero172. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`. Last updated: 2026-08-12 Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json --- 1. / 2. [Blocks](/blocks) 3. / 4. [Hero](/blocks/hero) 5. / 6. Cover Band Hero For The Latest Issue # Cover Band Hero For The Latest Issue[PRO](/pricing) A tall photographic band with the newest piece set over a rising gradient, its dateline, display title, summary and seal button anchored to the bottom, above a hairline row of the issues before it. ViewCodeDocs Base UI ![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/hero172` ## Hero172: Cover Band Hero For The Latest Issue A tall photographic band with the newest piece set over a rising gradient, its dateline, display title, summary and seal button anchored to the bottom, above a hairline row of the issues before it. Upgrade to Pro Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first. [Upgrade NowUpgrade Now](/pricing) ### Installation Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account). **Radix flavor** bashCopy ``` npx shadcn add "https://ui.beste.co/r/hero172?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` **Base UI flavor** bashCopy ``` npx shadcn add "https://ui.beste.co/r-base/hero172?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` This installs the block to `components/beste/block/hero172.tsx`, the `badge6` component used for the eyebrow and the `button1` seal button that opens the issue. ### Quick start The installed file exports `hero172Demo` alongside the block: the exact props behind the preview above. Spread it to get a working cover hero in one line. tsxCopy ``` import { Hero172, hero172Demo } from "@/components/beste/block/hero172"; export default function HomePage() { return ; } ``` Then replace the demo with your own props. Written out, a trimmed setup looks like this: tsxCopy ``` import { Hero172 } from "@/components/beste/block/hero172"; export default function HomePage() { return ( ); } ``` ### Props | Prop | Type | Default | Description | | ------------- | ----------------- | ------- | -------------------------------------------------- | | eyebrow | string | – | Badge6 label on the band, tuned for a dark surface | | issueMeta | string | – | Dateline above the title | | title | string | – | The piece's own title, set at display size | | summary | string | – | One or two sentences under the title | | image | CoverImage | – | Photograph filling the band | | button | ActionButton | – | Seal button into the issue | | link | ArchiveLink | – | Plain link beside the button | | previousLabel | string | – | Label above the earlier issues | | previous | PreviousIssue\[\] | \[\] | Earlier issues, three across on desktop | | className | string | – | Extra classes for the outer section | tsCopy ``` type CoverImage = { src: string; alt: string; }; type PreviousIssue = { title: string; date: string; href: string; }; type ActionButton = { label: string; href: string; }; type ArchiveLink = { label: string; href: string; }; ``` ### Behavior notes * The scrim is a gradient rather than a flat wash, `from-foreground via-foreground/70 to-foreground/20`, so the top of the photograph stays visible while the text at the bottom keeps its contrast. * Everything on the band is `relative`, which puts it above the absolutely positioned image and the gradient without needing a z-index. * `Badge6` takes `labelClassName="text-background/70"` here, which is the documented way to move it onto a dark surface. * The band is `min-h-[34rem]` and `md:min-h-[40rem]` rather than an aspect ratio, so a long title lengthens the band instead of cropping the picture. * The button is `Button1` in its primary tone, which is the variant meant for dark surfaces. * Earlier issues sit outside the band on the page background, so the band stays the only thing carrying an image. ## More Hero blocks [View all Hero](/blocks/hero) [](/block/hero173) PRO hero173 ### Bylined Hero With Studio Band A hero that sets its position and paragraph against a seal button held at the right edge of the same row, then runs a captioned wide photograph beneath it and closes on one portrait card per writer. [](/block/hero166) PRO hero166 ### Split Headline Hero An editorial hero that breaks its display heading across two lines and slots a square image tile floating a live payment card into the gap, with the paragraph and action landing under a hairline. [](/block/hero159) PRO hero159 ### Photo Collage Hero A centered hero with an eyebrow, light display heading, and two actions above a staggered three-photo collage whose raised middle tile floats a live booking confirmation. [](/block/hero145) PRO hero145 ### Editorial Product Hero An editorial hero with an eyebrow and an oversized full-width light heading, then a lower row pairing a paragraph and two accent buttons with an image tile that floats a live app window frame. [](/block/hero162) PRO hero162 ### Indexed Rows Hero A hero that sets a light display heading and one action against a column of numbered hairline rows, then closes on a full-bleed image band with a live approval request pinned into its corner. [](/block/hero143) PRO hero143 ### Editorial Split Hero A light editorial hero with an oversized display heading on the left, an offset supporting paragraph and accent button on the right, and a full-bleed image band below. ## Ship the interface, keep the code. New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight. [Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing) ### Library * [Blocks](/blocks) * [Pages](/pages) * [Pieces](/pieces) * [Components](/components) * [Search](/search) ### Learn * [Docs](/docs) * [AI & MCP](/docs/mcp) * [Blog](/blog) * [Free tools](/tools) * [What's new?](/changelog) * [Website Builder](https://beste.co) ### More * [Pricing](/pricing) * [Referrals](/referrals) * [License](/license) * [GitHub](https://github.com/beste-co/beste-ui) ### Shadcn Blocks * [Shadcn Hero Blocks](/blocks/hero) * [Shadcn Feature Blocks](/blocks/feature) * [Shadcn Pricing Blocks](/blocks/pricing) * [Shadcn CTA Blocks](/blocks/cta) * [Shadcn FAQ Blocks](/blocks/faq) * [Shadcn About Blocks](/blocks/about) * [Shadcn Stats Blocks](/blocks/stats) * [Shadcn Footer Blocks](/blocks/footer) * [Shadcn Navigation Blocks](/blocks/navigation) * [Shadcn Auth Blocks](/blocks/auth) * [Shadcn Ecommerce Blocks](/blocks/ecommerce) * [Shadcn Portfolio Blocks](/blocks/portfolio) * [Shadcn Showcase Blocks](/blocks/showcase) * [Shadcn Careers Blocks](/blocks/careers) * [Shadcn Onboarding Blocks](/blocks/onboarding) * [Shadcn Coming Soon Blocks](/blocks/coming-soon) * [Shadcn Post Blocks](/blocks/post) * [Shadcn Legal Blocks](/blocks/legal) * [Shadcn Workflow Blocks](/blocks/workflow) * [Shadcn News Blocks](/blocks/news) © 2026, [Beste](https://beste.co). All rights reserved.