Hero Section

A responsive hero section block for landing pages.

Installation

pnpm dlx shadcn@latest add https://ui-registry.com/r/hero-section.json

Usage

import { HeroSection } from '@/components/blocks/hero-section';

<HeroSection
  title="Build faster with UI Registry"
  description="A collection of beautifully designed components ready to use in your Next.js projects."
>
  <Button>Get Started</Button>
  <Button variant="outline">Learn More</Button>
</HeroSection>

Examples

Basic

<HeroSection title="Welcome to our platform" />

With description

<HeroSection
  title="Welcome to our platform"
  description="The best way to build modern web applications."
/>

With actions

<HeroSection
  title="Start building today"
  description="Get up and running in minutes."
>
  <Button size="lg">Get Started</Button>
  <Button size="lg" variant="outline">
    View Documentation
  </Button>
</HeroSection>

API Reference

Props

Prop	Type	Default	Description
title	string	-	The main heading text (required)
description	string	-	Optional description below the title
children	React.ReactNode	-	Action buttons or other content
className	string	-	Additional CSS classes