Hero Blocks
Browse all available hero section blocks
Hero Blocks
Hero blocks are eye-catching landing sections designed to grab attention and communicate your value proposition effectively.
Hero Grid
A modern hero section with an interactive animated grid background and smooth text animations.
Installation
pnpm dlx shadcn add @smoothui/header-1npx shadcn@latest add @smoothui/header-1yarn dlx shadcn add @smoothui/header-1bunx shadcn add @smoothui/header-1Hero Product
A premium product hero section with badge, animated headings, and product image showcase.
Installation
pnpm dlx shadcn add @smoothui/header-2npx shadcn@latest add @smoothui/header-2yarn dlx shadcn add @smoothui/header-2bunx shadcn add @smoothui/header-2Hero Block 3
Coming soon - another beautiful hero block variation.
Installation
pnpm dlx shadcn add @smoothui/header-3npx shadcn@latest add @smoothui/header-3yarn dlx shadcn add @smoothui/header-3bunx shadcn add @smoothui/header-3Hero Grid 3D
An interactive 3D grid hero section inspired by rauno.me 2024. Features a perspective-transformed grid with customizable hover colors that respond to user interaction.
Installation
pnpm dlx shadcn add @smoothui/header-4npx shadcn@latest add @smoothui/header-4yarn dlx shadcn add @smoothui/header-4bunx shadcn add @smoothui/header-4