Installation

npx shadcn@latest add button badge

Its the most important section of your brand / startup / website, YES people are going to judge you based on your hero section first impression,

We've made it keeping in mind

• Conversions
• UI UX
• Modern and Responsive Design

1. Minimalist Hero Section

This is built with famous UI layout on hero section, it is responsive and supports both dark and light mode and uses minimalist approach to copy of your heading.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section1.json

Note this uses the Navbar1 component. You can replace it with your own Navbar > component or use the default one

2. Minimalist Hero Section with different CTA's

Another minimalist Hero Section built for clear conveying the message and professional looking way to high light keywords. It contains basic description and 2 CTA (call to action) buttons.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section3.json

3. Hero Section for highlighting image.

A hero section where highlighting the image is a priority, can be used in places to first show some image and then a heading, description and a final CTA button.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section4.json

4. Hero Section with Product

A hero section for highlighting a product and building some credibility with the user, designed keeping Conversions in mind. Good for a single product landing page.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section2.json

Credits: This component is taken from Josh Tried Coding educational project repo.

5. Clean Hero Section

A minimalist hero section that focuses on simplicity and clarity, perfect for emphasizing key messaging. Ideal for brands that value a sleek, no-distraction design.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section5.json

6. Simple Hero Section

A straightforward hero section with a clear heading, concise description, two actionable buttons, and a Featured In section for added credibility. Perfect for driving user engagement with minimal clutter.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section6.json

Credits: This was taken from Flowbite herosection

7. Premium Hero Section

A premium hero section featuring bold text, a concise description, a prominent CTA button with some cool text/review. Ideal for capturing attention and delivering a high-impact first impression.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section7.json

Credits: Design reference from Typeshare

8. Simple Hero Section

Build for a simple and clean look, with a heading and a subheading and a CTA including prior customers profile picture to build more trust and credibility. Bonus - Responsive in nature.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section8.json

9. Hero Section with Listed Features

This is very usefull when you have a lot of features to show and you want to show them in a very clean,simple and easy to understand.Bonus - you can also display some of your testimonials.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section9.json

10. App Hero Section

A single product hero section with a heading and a CTA to drive actions and most importantly an image to demonstrate an application.

npx shadcn@latest add https://unicornspace-ui.vercel.app/r/hero-section10.json