Heroes

Centred hero

The classic: eyebrow, headline, one paragraph and two buttons, centred with a capped measure so the lead stays readable.

3 components19 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

BadgeButtonHero

Imports

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

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

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

export default function HeroCentered() {
  return (
    <Hero
      eyebrow={<Badge variant="soft">Now in public beta</Badge>}
      title="Ship the interface, not the infrastructure"
      description="One hundred and nine components with no runtime dependencies, no CSS-in-JS and no build plugin. Install one package and import a stylesheet."
      actions={
        <>
          <Button size="lg">Start building</Button>
          <Button size="lg" variant="outline">
            Read the docs
          </Button>
        </>
      }
    />
  )
}
← All 62 blocks