# 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/hero7. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2025-12-24

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. Centered Hero with Media

# Centered Hero with MediaFREE

Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/hero7`

## Hero7: Centered Hero with Media

Centered, text-first hero: badge, heading, description, and up to two CTA buttons stacked in a single column, with an optional full-width featured image below the text block. The image is not clipped into a card or aspect box; it renders edge to edge inside a `max-w-4xl` wrapper with rounded corners.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/hero7"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/hero7"
```

This installs the block to `components/beste/block/hero7.tsx` and the `Badge` and `Button` shadcn/ui primitives it uses.

### Quick start

The installed file exports `hero7Demo` alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

tsxCopy

```
import { Hero7, hero7Demo } from "@/components/beste/block/hero7";

export default function Page() {
  return <Hero7 {...hero7Demo} />;
}
```

Then replace the demo with your own props. Written out, the same setup looks like this:

tsxCopy

```
import { Hero7 } from "@/components/beste/block/hero7";

export default function Page() {
  return (
    <Hero7
      badge={{ label: "New Release", variant: "secondary" }}
      heading="Build stunning websites with easy tools"
      description="Drag, drop, and customize templates without writing a line of code."
      buttons={[
        { label: "Get Started", href: "/signup" },
        { label: "Watch Demo", href: "/demo", variant: "outline" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200&h=800&fit=crop",
        alt: "Product dashboard screenshot",
      }}
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                                      |                                       |
| ----------- | --------------------------------------------------- | ----------- | ------------------------------------------------ | ------------------------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                                | Optional pill badge above the heading |
| heading     | string                                              | –           | Main headline (required, no fallback)            |                                       |
| description | string                                              | –           | Supporting paragraph under the heading           |                                       |
| buttons     | Hero7Button\[\]                                     | –           | CTA buttons rendered in a centered, wrapping row |                                       |
| image       | { src: string; alt: string }                        | –           | Featured image below the text block              |                                       |
| className   | string                                              | –           | Extra classes for the outer <section>            |                                       |

tsCopy

```
type Hero7Button = {
  label: string;
  href: string;
  variant?: "default" | "outline";
};
```

### Behavior notes

* `heading` is the only required prop; badge, description, buttons, and image are all conditionally rendered and the section still lays out cleanly with just a heading.
* The image sits below the text block, capped at `max-w-4xl`, and is not wrapped in a card or bordered container: it is a plain `<img>` with `w-full rounded-lg`, so its own aspect ratio drives the height.
* Buttons wrap in a centered `flex flex-wrap` row; each button's `variant` defaults to `"default"` only when the array item omits it, so mixed default/outline pairs (as in the demo) are explicit per button.
* There is no animation or client-side state in this component; it is a static server-renderable layout.

## More Hero blocks

[View all Hero](/blocks/hero)

[](/block/hero68)

FREE

hero68

### Centered Hero with Feature Icons

Centered hero with three feature highlights displayed as icon cards with descriptions below the CTA. Perfect for platform and infrastructure products.

[](/block/hero144)

PRO

hero144

### Centered Product Hero

A centered hero with an eyebrow pill, a large light heading, a supporting paragraph, two accent buttons, and a wide image tile below that floats a live product micro-asset.

[](/block/hero36)

FREE

hero36

### Centered Hero with Logo Cloud

Centered hero with gradient-highlighted heading text and trusted-by logo cloud below CTA buttons. Perfect for B2B SaaS and enterprise products.

[](/block/hero50)

PRO

hero50

### Centered Hero with Announcement Pill

Clean centered hero with clickable announcement banner pill above the heading with sparkle icon. Perfect for product launches and feature announcements.

[](/block/hero120)

PRO

hero120

### Editorial Image Hero

Centered editorial hero with eyebrow, large heading, description, dual dark and outline CTAs, and a wide 16:9 image with a mono caption below.

[](/block/hero80)

PRO

hero80

### Cinematic Hero with Overlapping Media

Centered hero with inset background media and overlapping product image

## 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.