Sections

Hero

The top-of-page pitch. Renders from props alone; pass `children` to take the inner layout over completely.

Server safeSource

Import

import { Hero } from '@the_viveksingh/vivek-ui'

A centred hero

eyebrow, title, description and actions are the four slots every hero has. Each one takes a node, so a Badge in the eyebrow or two buttons in actions needs no extra prop.

Free and MIT licensed

Build the whole interface with one install

Components, charts and design tokens with zero runtime dependencies, server-safe by default.

<Hero
  eyebrow="Free and MIT licensed"
  title="Build the whole interface with one install"
  description="Components, charts and design tokens with zero runtime dependencies."
  actions={
    <Stack direction="horizontal" gap={3} wrap justify="center">
      <Button>Get started</Button>
      <Button variant="outline">View on npm</Button>
    </Stack>
  }
/>

Split, with media

layout="split" puts media beside the copy. It stacks below the text on narrow screens without you writing a breakpoint.

v1.0.1

One package. No dependencies.

109 components, 10 charts and a token system that your CSS can always override.

Any node: a screenshot, a video, a live chart

<Hero
  layout="split"
  eyebrow={<Badge tone="primary">v1.0.1</Badge>}
  title="One package. No dependencies."
  description="109 components, 10 charts and a token system your CSS can always override."
  actions={<Button>Get started</Button>}
  media={<img src="/screenshot.png" alt="" />}
/>

Over a photo, full height

backdrop is a full-bleed layer behind the copy - an img, a video, a gradient div - marked decorative. overlay puts a scrim over it; dark and gradient also switch the copy to light. minHeight="screen" gives the hero the viewport with the copy centred.

Free and MIT licensed

Build the whole interface with one install

Components, charts and design tokens with zero runtime dependencies, server-safe by default.

<Hero
  minHeight="screen"
  overlay="gradient"
  backdrop={<img src="/photos/summit.jpg" alt="" />}
  eyebrow="Season 2026"
  title="Higher, lighter, further"
  description="The pack that disappears on your back and reappears in the photos."
  actions={<Button size="lg">Shop the range</Button>}
/>

Media first

mediaPosition="start" puts split-layout media before the copy on wide screens. It still stacks under the text on narrow ones.

Free and MIT licensed

Build the whole interface with one install

Components, charts and design tokens with zero runtime dependencies, server-safe by default.

<Hero
  layout="split"
  mediaPosition="start"
  title="See it before you read about it"
  description="A product shot, a chart, a screenshot - whatever earns the first glance."
  media={<Image src="/dashboard.png" alt="The analytics dashboard" ratio={4 / 3} rounded="lg" />}
  actions={<Button>Start free</Button>}
/>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Hero
Prop	Type	Default	Description
`eyebrow`	`ReactNode`	—	A plain string becomes a pill `Badge`; a node is rendered as given.
`title`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`actions`	`ReactNode`	—	Usually one or two `Button`s. Laid out in a row that wraps.
`media`	`ReactNode`	—	Screenshot or illustration. Sits beside the copy in the `split` layout.
`mediaPosition`	`'start' \| 'end'`	—	In the split layout, which side the media sits on. Default `end`.
`backdrop`	`ReactNode`	—	A full-bleed layer behind the copy — an `<img>`, a `<video>`, a gradient `<div>`. It is decorative (`aria-hidden`) and covers the whole section.
`overlay`	`'none' \| 'light' \| 'dark' \| 'gradient'`	—	A scrim over the backdrop so the copy stays legible. `dark` and `gradient` also switch the text to light. Default `none`.
`minHeight`	`'auto' \| 'half' \| 'screen'`	—	`half` and `screen` give the hero at least half or all of the viewport, copy centred.
`align`	`'start' \| 'center'`	—	—
`layout`	`'centered' \| 'split'`	—	`centered` stacks and centres; `split` puts `media` beside the copy when there is room.
`headingLevel`	`HeadingLevel`	—	Level of `title`. Defaults to `1` — a hero is normally the page's only h1.

Rendering

Server safe

Hero carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.