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

Last updated: 2026-01-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. Centered Hero with Logo Cloud

# Centered Hero with Logo CloudFREE

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

ViewCodeDocs

Base UI

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

## Hero36: Centered Hero with Logo Cloud

Centered hero built for B2B landing pages: badge, a heading with a gradient-clipped highlighted phrase, description, CTA buttons, and a "trusted by" logo row beneath the buttons. The logos sit desaturated by default and turn to full color on hover, one at a time.

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/hero36"
```

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Hero36, hero36Demo } from "@/components/beste/block/hero36";

export default function Page() {
  return <Hero36 {...hero36Demo} />;
}
```

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

tsxCopy

```
import { Hero36 } from "@/components/beste/block/hero36";

export default function Page() {
  return (
    <Hero36
      badge={{ label: "Introducing v2.0", variant: "outline" }}
      heading="The future of <strong>product development</strong>"
      description="Build, test, and ship products faster, with tools your whole team can use."
      buttons={[
        { label: "Start Free Trial", href: "/signup" },
        { label: "Book a Demo", href: "/demo", variant: "outline" },
      ]}
      trustedBy={{
        label: "Trusted by innovative teams",
        logos: [
          { name: "Acme", logo: "/logos/acme.svg", href: "/customers/acme" },
          { name: "Northwind", logo: "/logos/northwind.svg" },
        ],
      }}
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                                                       |                                       |
| ----------- | --------------------------------------------------- | ----------- | ----------------------------------------------------------------- | ------------------------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                                                 | Optional pill badge above the heading |
| heading     | string                                              | –           | Headline HTML; wrap a phrase in <strong> to gradient-highlight it |                                       |
| description | string                                              | –           | Supporting paragraph under the heading                            |                                       |
| buttons     | ButtonItem\[\]                                      | \[\]        | CTA buttons rendered in a centered, wrapping row                  |                                       |
| trustedBy   | { label: string; logos: LogoItem\[\] }              | –           | Caption plus a row of partner/customer logos                      |                                       |
| className   | string                                              | –           | Extra classes for the outer <section>                             |                                       |

tsCopy

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

type LogoItem = { name: string; logo: string; href?: string };
```

### Behavior notes

* `heading` is rendered via `dangerouslySetInnerHTML`, following the project's highlighted-text convention: only the text wrapped in `<strong>` gets the gradient (`bg-gradient-to-r from-primary via-primary/80 to-primary bg-clip-text text-transparent`); plain text around it stays the normal heading color.
* Each logo starts at `grayscale opacity-50` and transitions to full color and opacity on hover, per logo, with a plain CSS `transition-all`; there is no JavaScript involved.
* The section has no image, video, or floating-card media slot at all: this hero is text plus a logo row only.
* Padding is `py-24 md:py-32`, heavier than the standard `py-16 md:py-24` section wrapper, which is intentional for a large top-of-page hero.
* Logo links fall back to `href="#"` when a `LogoItem` omits its `href`.

## 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/hero7)

FREE

hero7

### Centered Hero with Media

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

[](/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/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/hero78)

PRO

hero78

### Centered Hero with Founder Social Proof

Centered hero with avatar stack and founder count text between buttons and featured image. Perfect for startup products and B2B SaaS.

[](/block/hero151)

PRO

hero151

### Centered Photo Trust Hero

Full-bleed photographic hero with a centered statement, paragraph and outline pill CTA over a tinted scrim, closed by a ruled client logo strip rendered inverted so the marks read on the dark 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.