Hero

Open source

Marketing hero sections: centred, split, search, form, video, stats, screenshot and more; the centred hero takes a switchable backdrop.

Add to page builder

2 of 15

resources/views/blocks/hero-search.blade.php Blade

@props([
    'eyebrow'     => 'New',
    'heading'     => 'Find your next favourite destination',
    'subheading'  => 'Search thousands of listings, experiences, and local guides — all in one place.',
    'placeholder' => 'Where do you want to go?',
    'suggestions' => [],
])

@php
    if (empty($suggestions)) {
        $suggestions = ['Paris', 'Bali', 'New York', 'Tokyo', 'Cape Town'];
    }
@endphp

<section {{ $attributes->merge(['class' => 'bg-background py-20 text-foreground sm:py-28']) }}>
    <div class="mx-auto max-w-3xl px-4 text-center">

        {{-- Eyebrow badge --}}
        <div class="mb-6 flex justify-center">
            <x-ui.badge variant="secondary">{{ __($eyebrow) }}</x-ui.badge>
        </div>

        {{-- Headline --}}
        <h1 class="text-balance text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
            {{ __($heading) }}
        </h1>

        {{-- Subcopy --}}
        <p class="mx-auto mt-6 max-w-xl text-lg text-muted-foreground">
            {{ __($subheading) }}
        </p>

        {{-- Search bar --}}
        <form action="#" method="GET" class="mt-10" role="search">
            <div class="flex items-center gap-2 rounded-md border border-border bg-card px-4 py-2 shadow-sm focus-within:ring-2 focus-within:ring-ring">

                {{-- Leading search icon --}}
                <span class="shrink-0 text-muted-foreground" aria-hidden="true">
                    <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.197 5.197a7.5 7.5 0 0 0 10.606 10.606Z" />
                    </svg>
                </span>

                {{-- Divider --}}
                <div class="mx-2 h-5 w-px shrink-0 bg-border" aria-hidden="true"></div>

                {{-- Query input --}}
                <x-ui.input
                    type="search"
                    name="q"
                    :placeholder="__($placeholder)"
                    class="min-w-0 flex-1 border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
                    aria-label="{{ __('Search') }}"
                />

                {{-- Search button --}}
                <x-ui.button type="submit" variant="default" class="shrink-0 rounded-lg">
                    {{ __('Search') }}
                </x-ui.button>
            </div>
        </form>

        {{-- Popular chips --}}
        <div class="mt-6 flex flex-wrap items-center justify-center gap-2">
            <span class="text-sm text-muted-foreground">{{ __('Popular:') }}</span>
            @foreach ($suggestions as $suggestion)
                <x-ui.button
                    variant="outline"
                    size="sm"
                    href="#"
                    class="rounded-full"
                >
                    {{ __($suggestion) }}
                </x-ui.button>
            @endforeach
        </div>

        {{-- Trust line --}}
        <p class="mt-8 text-sm text-muted-foreground">
            {{ __('Trusted by 2M+ explorers worldwide') }}
        </p>

    </div>
</section>

Installation

terminal

php artisan ui:add blocks/hero-search

Installs these dependencies automatically:

badge button input

Registry contract

Install confidence

php artisan ui:add blocks/hero-search writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.0.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/hero-search.blade.php

Registry dependencies

badge button input

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

hero-search.md

# Brok UI block: Hero Search (`hero-search`)

Search-led discovery hero with an eyebrow badge, large headline, a prominent card-style search bar with inline input and button, and popular-destination chips.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/hero-search
```

## Render it

```blade
<x-blocks.hero-search />
```

## Props

- `eyebrow` (string, default `New`) — Small label shown above the heading inside a badge.
- `heading` (string, default `Find your next favourite destination`) — Primary headline.
- `subheading` (string, default `Search thousands of listings, experiences, and local guides — all in one place.`) — Supporting copy under the heading.
- `placeholder` (string, default `Where do you want to go?`) — Placeholder text shown inside the search input.
- `suggestions` (array, default `[]`) — Popular search terms rendered as chip buttons below the search bar; an empty array falls back to a default 5-item sample.

## Use when

- Opening a travel, marketplace, or directory landing page where visitors expect to search first rather than read marketing copy.
- Wanting a centered card-style search bar with an inline query field and submit button directly under the headline, with a row of tappable popular-suggestion chips underneath.

## Avoid when

- Skip it when the primary action is a signup or app download rather than a search query; use hero-form for an email-capture form or hero-mobile-app for an app download.

## Rules

- Render the installed block with `<x-blocks.hero-search />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/hero-search
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/hero-search.json

Ask about Hero Search in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Opening a travel, marketplace, or directory landing page where visitors expect to search first rather than read marketing copy.
Wanting a centered card-style search bar with an inline query field and submit button directly under the headline, with a row of tappable popular-suggestion chips underneath.

Avoid when

Skip it when the primary action is a signup or app download rather than a search query; use hero-form for an email-capture form or hero-mobile-app for an app download.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: eyebrow badge heading subheading search form query input submit button popular suggestion chips trust line

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.hero-search />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.