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
Build with Tailark
Production-ready marketing blocks, pages, and illustrations for Shadcn UI.