Hero
The first section of a landing page: eyebrow, large light heading, text, actions and an optional visual. Pure layout, no client code of its own.
Pixels, crafted with care.Pixels, crafted with care.
A calm React UI kit whose pixel effects appear only when you interact.
import { Hero } from "pixelbits/blocks/hero";
import { Button } from "pixelbits/button";
import { SpotlightCard } from "pixelbits/spotlight-card";
export default function Demo() {
return (
<Hero
className="py-4 sm:py-4"
eyebrow="Now in 1.0"
title="Pixels, crafted with care."
scramble
description="A calm React UI kit whose pixel effects appear only when you interact."
actions={
<>
<Button variant="primary" size="lg" roll>
Get started
</Button>
<Button size="lg" roll>
Read the docs
</Button>
</>
}
media={<SpotlightCard className="aspect-4/3" />}
/>
);
}Installation
import { Hero } from "pixelbits/hero";npx shadcn add https://pixelbits.ali-moradi-develop.com/r/block-hero.jsonAPI
<Hero>
The first section of a landing page: eyebrow, large light heading, text, actions and an optional visual. Pure layout, no client code of its own.
<Hero
eyebrow="v1.0"
title="Pixels, crafted with care."
scramble
description="A calm React UI kit."
actions={<><Button variant="primary" size="lg">Get started</Button><Button size="lg">Docs</Button></>}
media={<SpotlightCard className="aspect-square" />}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | ReactNode | — | Small label above the title, shown as an accent badge. |
| title* | ReactNode | — | The main heading (an |
| description | ReactNode | — | Supporting paragraph under the title. |
| actions | ReactNode | — | Calls to action, usually one primary and one secondary |
| media | ReactNode | — | Visual on the end side (an image, a |
| scramble | boolean | false | Decrypt the title with |
| layout | "split" | "center" | "split" |
|
Also accepts every prop of Omit<HTMLAttributes<HTMLElement>, "title">.