Marketing

Hero

A composable hero section component for landing pages and marketing content.View source →

Compose flexible hero sections with consistent spacing and layout patterns. Perfect for landing pages, product launches, and marketing content where first impressions matter.

Built with compound components for maximum flexibility—mix and match Meta, Title, Description, Actions, and Media to create any hero layout.

Installation

shell

npm install @kushagradhawan/kookie-blocks

Usage

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Avatar, Button } from '@kushagradhawan/kookie-ui';
 
export function MyHero() {
  return (
    <Hero.Root>
      <Hero.Meta>
        <Avatar fallback="K" size="2" />
      </Hero.Meta>
      <Hero.Title>Welcome to My App</Hero.Title>
      <Hero.Description>
        Start building amazing products today.
      </Hero.Description>
      <Hero.Actions>
        <Button>Get Started</Button>
      </Hero.Actions>
    </Hero.Root>
  );
}

Anatomy

Hero is a compound component with these parts:

tsx

<Hero.Root layout="stacked" align="center" gap="6">
  <Hero.Meta>{/* Logo, badge, or meta info */}</Hero.Meta>
  <Hero.Title>{/* Main heading */}</Hero.Title>
  <Hero.Description>{/* Supporting text */}</Hero.Description>
  <Hero.Actions>{/* Buttons and CTAs */}</Hero.Actions>
  <Hero.Media position="below">{/* Images or media */}</Hero.Media>
</Hero.Root>

Props

Hero.Root

Layout container for hero content. Extends Kookie UI's Flex component.

Prop	Type	Default	Description
`layout`	`'stacked' \| 'split' \| ResponsiveLayout`	`'stacked'`	Layout mode: vertical stacking or horizontal split. Supports responsive values for adaptive layouts.
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Content alignment
`gap`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9'`	`'6'`	Spacing between children

Responsive Layout Type:

tsx

type ResponsiveLayout = {
  initial?: 'stacked' | 'split';
  xs?: 'stacked' | 'split';
  sm?: 'stacked' | 'split';
  md?: 'stacked' | 'split';
  lg?: 'stacked' | 'split';
  xl?: 'stacked' | 'split';
}

All other Flex props from Kookie UI are supported.

Hero.Meta

Container for logos, badges, and metadata above the title.

Prop	Type	Default	Description
`gap`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9'`	`'2'`	Spacing between children
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment of children

All other Flex props from Kookie UI are supported.

Hero.Title

Main heading. Extends Kookie UI's Heading component.

Prop	Type	Default	Description
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9'`	`'9'`	Heading size
`weight`	`'light' \| 'regular' \| 'medium' \| 'bold'`	`'medium'`	Font weight
`align`	`'left' \| 'center' \| 'right'`	`'center'`	Text alignment

All other Heading props from Kookie UI are supported.

Hero.Description

Supporting text. Extends Kookie UI's Text component.

Prop	Type	Default	Description
`size`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9'`	`'4'`	Text size
`align`	`'left' \| 'center' \| 'right'`	`'center'`	Text alignment

All other Text props from Kookie UI are supported.

Hero.Actions

Container for buttons and CTAs.

Prop	Type	Default	Description
`gap`	`'1' \| '2' \| '3' \| '4' \| '5' \| '6' \| '7' \| '8' \| '9'`	`'2'`	Spacing between buttons
`direction`	`'row' \| 'column'`	`'row'`	Layout direction
`align`	`'start' \| 'center' \| 'end'`	`'center'`	Alignment of children

All other Flex props from Kookie UI are supported.

Hero.Media

Container for images and media content.

Prop	Type	Default	Description
`position`	`'left' \| 'right' \| 'below' \| 'background'`	`'below'`	Media position relative to content

All other Flex props from Kookie UI are supported.

Examples

Basic Hero

Simple centered hero with title and description:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
 
export function BasicHero() {
  return (
    <Hero.Root>
      <Hero.Title>Build Something Amazing</Hero.Title>
      <Hero.Description>
        The fastest way to ship your next project.
      </Hero.Description>
    </Hero.Root>
  );
}

Marketing Hero

Full marketing hero with all components:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Avatar, Button, Link } from '@kushagradhawan/kookie-ui';
 
export function MarketingHero() {
  return (
    <Hero.Root>
      <Hero.Meta>
        <Avatar fallback="K" size="2" color="gray" src="/logo.png" />
      </Hero.Meta>
 
      <Hero.Title>
        Pre-built blocks for rapid development.
      </Hero.Title>
 
      <Hero.Description>
        An open-source collection of reusable blocks built on{" "}
        <Link href="https://hellokookie.com">Kookie UI</Link>.
        Ship faster with composable, accessible components.
      </Hero.Description>
 
      <Hero.Actions>
        <Button variant="solid" size="2" highContrast>
          Get Started
        </Button>
        <Button variant="soft" size="2">
          Learn More
        </Button>
      </Hero.Actions>
    </Hero.Root>
  );
}

Left-Aligned Hero

Align content to the start for editorial layouts:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Button } from '@kushagradhawan/kookie-ui';
 
export function LeftAlignedHero() {
  return (
    <Hero.Root align="start">
      <Hero.Title align="left">
        Transform Your Workflow
      </Hero.Title>
      <Hero.Description align="left">
        Tools designed for modern teams.
      </Hero.Description>
      <Hero.Actions>
        <Button size="3">Start Free Trial</Button>
      </Hero.Actions>
    </Hero.Root>
  );
}

Split Layout Hero

Horizontal layout with content and media side-by-side:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Button, Image } from '@kushagradhawan/kookie-ui';
 
export function SplitHero() {
  return (
    <Hero.Root layout="split">
      <Hero.Title>Ship Faster</Hero.Title>
      <Hero.Description>
        Pre-built components that save hours of development time.
      </Hero.Description>
      <Hero.Actions>
        <Button>Get Started</Button>
      </Hero.Actions>
 
      <Hero.Media position="right">
        <Image src="/hero.png" alt="Product screenshot" />
      </Hero.Media>
    </Hero.Root>
  );
}

With Custom Spacing

Fine-tune spacing for your design:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Button } from '@kushagradhawan/kookie-ui';
 
export function CustomSpacingHero() {
  return (
    <Hero.Root gap="8">
      <Hero.Title size="9">
        Premium Experience
      </Hero.Title>
      <Hero.Description size="5">
        Enterprise-grade solutions.
      </Hero.Description>
      <Hero.Actions gap="3">
        <Button size="3">Contact Sales</Button>
        <Button size="3" variant="soft">View Demo</Button>
      </Hero.Actions>
    </Hero.Root>
  );
}

With Badge Metadata

Add badges or status indicators above the title:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Badge, Button } from '@kushagradhawan/kookie-ui';
 
export function BadgeHero() {
  return (
    <Hero.Root>
      <Hero.Meta>
        <Badge size="2" color="blue">New Release</Badge>
      </Hero.Meta>
      <Hero.Title>Version 2.0 is Here</Hero.Title>
      <Hero.Description>
        Faster, more powerful, and easier to use.
      </Hero.Description>
      <Hero.Actions>
        <Button>Upgrade Now</Button>
      </Hero.Actions>
    </Hero.Root>
  );
}

In Section and Container

Combine with Kookie UI layout components:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Section, Container, Button } from '@kushagradhawan/kookie-ui';
 
export function LayoutHero() {
  return (
    <Section size="4">
      <Container size="2">
        <Hero.Root>
          <Hero.Title>Welcome</Hero.Title>
          <Hero.Description>
            Your journey starts here.
          </Hero.Description>
          <Hero.Actions>
            <Button>Get Started</Button>
          </Hero.Actions>
        </Hero.Root>
      </Container>
    </Section>
  );
}

Responsive Layout

Adapt layout based on screen size—stacked on mobile, split on desktop:

tsx

import { Hero } from '@kushagradhawan/kookie-blocks';
import { Button, Image } from '@kushagradhawan/kookie-ui';
 
export function ResponsiveLayoutHero() {
  return (
    <Hero.Root layout={{ initial: "stacked", md: "split" }}>
      <Hero.Title align={{ initial: "center", md: "left" }}>
        Adaptive Design
      </Hero.Title>
      <Hero.Description align={{ initial: "center", md: "left" }}>
        Stacked on mobile, split on larger screens.
      </Hero.Description>
      <Hero.Actions>
        <Button>Get Started</Button>
      </Hero.Actions>
 
      <Hero.Media position="right">
        <Image src="/hero.png" alt="Product" />
      </Hero.Media>
    </Hero.Root>
  );
}

Layout Patterns

Hero supports two primary layout modes:

Stacked (Default)

Vertical layout where all content flows top-to-bottom:

Meta
Title
Description
Actions
Media (if position="below")

Best for: Landing pages, centered marketing content, mobile-first designs

Split

Horizontal layout with content and media side-by-side:

Left: Title, Description, Actions
Right: Media (if position="right")

Best for: Product pages, feature showcases, desktop-optimized layouts

Accessibility

Hero provides semantic HTML structure for screen readers and SEO:

Semantic HTML

Hero.Title uses <h1> by default (customizable with as prop)
Proper heading hierarchy preserved
Semantic Flex container structure

Keyboard Navigation

All interactive children (buttons, links) are keyboard accessible
Standard tab navigation applies

Screen Readers

Title announces as heading with appropriate level
Logical reading order maintained by flex layout
Description provides context for main heading

Changelog

Changed

Complete rewrite with compound component architecture
Added Hero.Meta, Hero.Description, Hero.Actions, Hero.Media components
Added layout prop with stacked and split modes
Updated default styles for all sub-components
Removed variant aliases (Variant1, One) in favor of clear compound API

Added

Flexible composition patterns for any hero layout
Built-in sensible defaults while maintaining full customization
Support for left, center, right alignment
Media positioning system

Hero

Installation

Usage

Anatomy

Props

Hero.Root

Hero.Meta

Hero.Title

Hero.Description

Hero.Actions

Hero.Media

Examples

Basic Hero

Marketing Hero

Left-Aligned Hero

Split Layout Hero

With Custom Spacing

With Badge Metadata

In Section and Container

Responsive Layout

Layout Patterns

Stacked (Default)

Split

Accessibility

Semantic HTML

Keyboard Navigation

Screen Readers

Changelog

Changed

Added

Theme

Accent color

Gray color

Appearance

Radius

Scaling

Panel background