Hero Section Components
A set of responsive hero section designed to capture attention on landing pages. It includes a prominent headline, optional sub-text, and a primary call-to-action button — ideal for showcasing your product value right away.
Inportant
Make sure to configure the @rasengan-ui registry into your components.json file.
Hero 01
bashnpx shadcn@latest add @rasengan-ui/hero-01
Hero with centered text
Hero 02
bashnpx shadcn@latest add @rasengan-ui/hero-02
Hero with centered text and floating navbar
Hero 03
bashnpx shadcn@latest add @rasengan-ui/hero-03
Hero with left text 1
Hero 04
bashnpx shadcn@latest add @rasengan-ui/hero-04
Hero with left text 2
Hero 05
bashnpx shadcn@latest add @rasengan-ui/hero-05
Hero with left text 3
Hero 06
bashnpx shadcn@latest add @rasengan-ui/hero-06
Hero with centered text and image 1
Hero 07
bashnpx shadcn@latest add @rasengan-ui/hero-07
Hero with centered text and image 2
Hero 08
bashnpx shadcn@latest add @rasengan-ui/hero-08
Hero with centered text and image 3
Hero 09
bashnpx shadcn@latest add @rasengan-ui/hero-09
Hero with centered bottom text and background image
Hero 10
bashnpx shadcn@latest add @rasengan-ui/hero-10
Hero with left bottom text and background image
Hero 11
bashnpx shadcn@latest add @rasengan-ui/hero-11
Hero with centered text and image 4
Hero 12
bashnpx shadcn@latest add @rasengan-ui/hero-12
Hero with centered text and image 5
Hero 13
bashnpx shadcn@latest add @rasengan-ui/hero-13
Hero with centered text and image 6
Hero 14
bashnpx shadcn@latest add @rasengan-ui/hero-14
Hero with centered text and image 7
Hero 15
bashnpx shadcn@latest add @rasengan-ui/hero-15
Hero with centered text and image 8
Hero 16
bashnpx shadcn@latest add @rasengan-ui/hero-16
Hero with centered text and image 9
Hero 17
bashnpx shadcn@latest add @rasengan-ui/hero-17
Hero with centered text and image 10
