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.

v0.3.1

One package. No dependencies.

83 components, 6 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">v0.3.1</Badge>}
  title="One package. No dependencies."
  description="83 components, 6 charts and a token system your CSS can always override."
  actions={<Button>Get started</Button>}
  media={<img src="/screenshot.png" alt="" />}
/>

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.
`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.