Hero sections are the first thing your visitors see. TypeScript UI ships six polished, fully responsive hero variants covering the most common landing page patterns, from a simple centered layout to a dark gradient hero and a waitlist capture form.

Component Variants

Hero Centered

Introducing v2.0 — now with 200+ components

TypeScript UI

Build beautiful interfaces, faster

TypeScript UI is a collection of production-ready React components, fully typed and styled with Tailwind CSS, so you can ship polished products without reinventing the basics.

Get startedView components

VercelLinearStripeNotion

Hero Split (Image Right)

New release

Design systems that scale with your team

Every component in TypeScript UI is accessible, responsive, and built with real-world product teams in mind. Copy, paste, and customize to match your brand.

Browse componentsRead the docs

Hero Split (Image Left)

Now available for Next.js 16

From idea to production in an afternoon

Stop rebuilding the same buttons, forms, and layouts. TypeScript UI gives your team a shared library of components that just work.

Start building

Hero With Screenshot

TypeScript UI

Everything you need to build your next product

A complete component library with headers, heroes, pricing tables, and more, all documented and ready to drop into your Next.js app.

Get startedView on GitHub

Hero Gradient

TypeScript UI 2.0 is here

Launch week

A component library that feels premium

Dark, gradient-driven hero sections for products that want to make a bold first impression, built with pure CSS and safe for reduced-motion users.

Get startedWatch the demo

Hero With Stats

Trusted by teams everywhere

The component library developers actually enjoy using

Thousands of teams rely on TypeScript UI to ship faster without sacrificing quality, accessibility, or design consistency.

Get startedSee case studies

Active developers

12k+

Components shipped

200+

Uptime on docs site

99.9%

Hero With Form (Waitlist)

Coming soon

TypeScript UI Pro is launching soon

Get early access to advanced components, Figma files, and priority support before we open registration to everyone else.

Learn more

Get early access

Be the first to know when we launch. No spam, ever.

Join the waitlist

We respect your privacy. Unsubscribe at any time.

Usage

import {
  HeroCentered,
  HeroSplit,
  HeroWithScreenshot,
  HeroGradient,
  HeroWithStats,
  HeroWithForm,
} from '@/components/ui/heroes';

// Hero Centered
<HeroCentered
  eyebrow="TypeScript UI"
  announcement={{ text: 'Introducing v2.0', href: '/changelog' }}
  title="Build beautiful interfaces, faster"
  description="A collection of production-ready React components, fully typed and styled with Tailwind CSS."
  primaryButton={{ text: 'Get started', href: '/docs' }}
  secondaryButton={{ text: 'View components', href: '/components' }}
  logos={<YourLogos />}
/>

// Hero Split
<HeroSplit
  title="Design systems that scale with your team"
  description="Every component is accessible, responsive, and built for real product teams."
  primaryButton={{ text: 'Browse components', href: '/components' }}
  secondaryButton={{ text: 'Read the docs', href: '/docs' }}
  imageSrc="/hero-image.jpg"
  imageAlt="Description"
  imagePosition="right" // or 'left'
/>

// Hero With Screenshot
<HeroWithScreenshot
  title="Everything you need to build your next product"
  description="A complete component library, documented and ready to drop into your Next.js app."
  primaryButton={{ text: 'Get started', href: '/docs' }}
  imageSrc="/screenshot.png"
  imageAlt="Product dashboard screenshot"
/>

// Hero Gradient
<HeroGradient
  title="A component library that feels premium"
  description="Dark, gradient-driven hero sections for a bold first impression."
  primaryButton={{ text: 'Get started', href: '/docs' }}
  secondaryButton={{ text: 'Watch the demo', href: '/demo' }}
/>

// Hero With Stats
<HeroWithStats
  title="The component library developers actually enjoy using"
  description="Thousands of teams rely on TypeScript UI to ship faster."
  primaryButton={{ text: 'Get started', href: '/docs' }}
  stats={[
    { value: '12k+', label: 'Active developers' },
    { value: '200+', label: 'Components shipped' },
    { value: '99.9%', label: 'Uptime on docs site' },
  ]}
/>

// Hero With Form
<HeroWithForm
  title="TypeScript UI Pro is launching soon"
  description="Get early access before we open registration to everyone else."
  primaryButton={{ text: 'Learn more', href: '/pro' }}
  buttonText="Join the waitlist"
  onSubmit={(email) => console.log(email)}
/>

Props Reference

HeroCentered

HeroSplit

HeroWithScreenshot

HeroGradient

HeroWithStats

HeroWithForm