Proper UI

Header sections

Powerful and customizable React header section components built for modern and responsive websites. These header sections are built using React Aria and styled with Tailwind CSS.

Header section example

BoltStackBlitzv0
Proper
We're hiring!Join our remote team

People who care about your growth

Powerful, self-serve product and growth analytics to help you convert, engage, and retain more.

We care about your data in our privacy policy.
Placeholder landscape 1

Installation

npx properui@latest add header-sections

Header section examples

Hero Split Image 01
Hero Split Image 01 · Marketing section
Hero Split Image 04
Hero Split Image 04 · Marketing section
Hero Split Form 01
Hero Split Form 01 · Marketing section
Hero Abstract Angles 02
Hero Abstract Angles 02 · Marketing section
Hero Screen Mockup 01
Hero Screen Mockup 01 · Marketing section
Hero Screen Mockup 04
Hero Screen Mockup 04 · Marketing section
Hero Screen Mockup 07
Hero Screen Mockup 07 · Marketing section
Hero Iphone Mockup 02
Hero Iphone Mockup 02 · Marketing section
Hero Color Card 01
Hero Color Card 01 · Marketing section
Hero Color Card 04
Hero Color Card 04 · Marketing section
Hero Card Mockup 03
Hero Card Mockup 03 · Marketing section
Hero Card Mockup 06
Hero Card Mockup 06 · Marketing section
Hero Card Mockup 09
Hero Card Mockup 09 · Marketing section
Hero Simple Text 01
Hero Simple Text 01 · Marketing section
Hero Geometric Shapes 03
Hero Geometric Shapes 03 · Marketing section
Header Centered Buttons
Header Centered Buttons · Marketing section
Header Centered Search
Header Centered Search · Marketing section
Header Left Tabs
Header Left Tabs · Marketing section
Header Space Between
Header Space Between · Marketing section
Header Space Between Email
Header Space Between Email · Marketing section
Header Centered Buttons Brand
Header Centered Buttons Brand · Marketing section
Header Centered Search Brand
Header Centered Search Brand · Marketing section
Header Left Tabs Brand
Header Left Tabs Brand · Marketing section
Header Space Between Brand
Header Space Between Brand · Marketing section
Header Space Between Email Brand
Header Space Between Email Brand · Marketing section
Hero Split Image 02
Hero Split Image 02 · Marketing section
Hero Split Image 05
Hero Split Image 05 · Marketing section
Hero Split Form 02
Hero Split Form 02 · Marketing section
Hero Abstract Angles 03
Hero Abstract Angles 03 · Marketing section
Hero Screen Mockup 02
Hero Screen Mockup 02 · Marketing section
Hero Screen Mockup 05
Hero Screen Mockup 05 · Marketing section
Hero Screen Mockup 08
Hero Screen Mockup 08 · Marketing section
Hero Iphone Mockup 03
Hero Iphone Mockup 03 · Marketing section
Hero Color Card 02
Hero Color Card 02 · Marketing section
Hero Card Mockup 01
Hero Card Mockup 01 · Marketing section
Hero Card Mockup 04
Hero Card Mockup 04 · Marketing section
Hero Card Mockup 07
Hero Card Mockup 07 · Marketing section
Hero Card Mockup 10
Hero Card Mockup 10 · Marketing section
Hero Simple Text 02
Hero Simple Text 02 · Marketing section
Hero Geometric Shapes 04
Hero Geometric Shapes 04 · Marketing section
Header Centered Tabs
Header Centered Tabs · Marketing section
Header Left
Header Left · Marketing section
Header Left Email
Header Left Email · Marketing section
Header Space Between Buttons
Header Space Between Buttons · Marketing section
Header Space Between Search
Header Space Between Search · Marketing section
Header Centered Tabs Brand
Header Centered Tabs Brand · Marketing section
Header Left Brand
Header Left Brand · Marketing section
Header Left Email Brand
Header Left Email Brand · Marketing section
Header Space Between Buttons Brand
Header Space Between Buttons Brand · Marketing section
Header Space Between Search Brand
Header Space Between Search Brand · Marketing section
Hero Split Image 03
Hero Split Image 03 · Marketing section
Hero Split Image 06
Hero Split Image 06 · Marketing section
Hero Abstract Angles 01
Hero Abstract Angles 01 · Marketing section
Hero Abstract Angles 04
Hero Abstract Angles 04 · Marketing section
Hero Screen Mockup 03
Hero Screen Mockup 03 · Marketing section
Hero Screen Mockup 06
Hero Screen Mockup 06 · Marketing section
Hero Iphone Mockup 01
Hero Iphone Mockup 01 · Marketing section
Hero Iphone Mockup 04
Hero Iphone Mockup 04 · Marketing section
Hero Color Card 03
Hero Color Card 03 · Marketing section
Hero Card Mockup 02
Hero Card Mockup 02 · Marketing section
Hero Card Mockup 05
Hero Card Mockup 05 · Marketing section
Hero Card Mockup 08
Hero Card Mockup 08 · Marketing section
Hero Card Mockup 11
Hero Card Mockup 11 · Marketing section
Hero Geometric Shapes 01
Hero Geometric Shapes 01 · Marketing section
Header Centered
Header Centered · Marketing section
Header Centered Email
Header Centered Email · Marketing section
Header Left Buttons
Header Left Buttons · Marketing section
Header Left Search
Header Left Search · Marketing section
Header Space Between Tabs
Header Space Between Tabs · Marketing section
Header Centered Brand
Header Centered Brand · Marketing section
Header Centered Email Brand
Header Centered Email Brand · Marketing section
Header Left Buttons Brand
Header Left Buttons Brand · Marketing section
Header Left Search Brand
Header Left Search Brand · Marketing section
Header Space Between Tabs Brand
Header Space Between Tabs Brand · Marketing section