Shadcn Secondary Hero Block Nine

Block Nine is a support-page hero, and the source keeps it intentionally sparse. The section renders a Support badge, the headline How can we help?, a short line of copy, and a large rounded search input with a lucide Search icon placed inside the field.

That makes it better for a help center than for a sales landing page. There is no CTA button, no image, and no feature grid. The user action is search, so the surrounding copy should be written to reduce anxiety and help people find an answer fast.

Implementation Notes

The search shell uses a relative wrapper, an absolutely positioned icon, and a h-14 input with focus:ring-primary. If you use this in a Next.js support route, connect the input to real search behavior and make sure the label strategy is accessible; the visual placeholder alone is not enough for every implementation.

When To Choose It

Pick this secondary hero for documentation, FAQ, knowledge base, and customer support pages. It can also work on an internal SaaS page where the main task is finding help rather than starting a signup flow.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block Nine