Hero
Hero is a neobrutalist React component from Cruise UI. The big --primary opening section: headline, two actions, an illustration (danfo bus, Micra taxi or cruise ship) and a ghost word. Install it with npx shadcn@latest add @cruiseui/hero.
Install
Terminal
npx shadcn@latest add @cruiseui/heroFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Book your next ride.
Every route in Lagos, one fare, no queues.
import { CruiseButton } from "@/components/cruise/button";
import { CruiseDanfoBus, CruiseHero } from "@/components/cruise/hero";
export default function HeroExample() {
return (
<CruiseHero
headline="Book your next ride."
lede="Every route in Lagos, one fare, no queues."
actions={
<>
<CruiseButton variant="inverted">Book a ride</CruiseButton>
<CruiseButton variant="secondary">See routes</CruiseButton>
</>
}
illustration={<CruiseDanfoBus />}
ghostWord="RIDE"
/>
);
}
<section class="hero on-primary">
<span class="ghost-word" aria-hidden="true">DANFO</span>
<div class="hero-inner">
<span class="badge">New route</span>
<h1 class="hero-title">Your app, but make it Lagos.</h1>
<p class="hero-sub">One short supporting sentence about what the product does.</p>
<div class="hero-actions">
<a class="brutal btn btn-invert" href="#start">Get started</a>
<a class="brutal btn btn-secondary" href="#examples">See examples</a>
</div>
</div>
<div class="danfo-stripe" aria-hidden="true"></div>
</section>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
When to use
The top of a landing page.
When not to
Inner pages (use a plain heading).
Props
CruiseHero
| Prop | Type | Default | Description |
|---|---|---|---|
headline | ReactNode | — | — |
lede? | ReactNode | — | — |
footnote? | ReactNode | — | A small line under the buttons (e.g. a support link). |
actions? | ReactNode | — | One primary + one secondary Button. On this yellow background the primary must use the "inverted" variant. Stacks full-width on mobile. |
illustration? | ReactNode | — | Optional illustration, shown in a .brutal frame rotated 2deg. |
ghostWord? | string | — | Optional ghost word (A6): one oversized decorative word behind the copy, cropped by the section edge. Max one per page. From 1280px it is anchored to the content container, so on wide screens it stays behind the content instead of drifting to the screen edge. |
ghostFit? | boolean | — | Scale the ghost word to fit entirely inside the hero (no cropping) instead of the oversized, edge-cropped default. |
className? | string | — | — |
CruiseDanfoBus
| Prop | Type | Default | Description |
|---|---|---|---|
className? | string | — | — |
palette? | CruiseBusPalette | cssPalette | — |
width? | number | — | Fixed pixel width; otherwise the bus fills its container. |
driveIn? | boolean | — | Drive the bus in from the left once on mount (CSS .bus-drive-in). |
CruiseMicraTaxi
| Prop | Type | Default | Description |
|---|---|---|---|
className? | string | — | — |
width? | number | — | — |
CruiseHeroShip
| Prop | Type | Default | Description |
|---|---|---|---|
className? | string | — | — |
Accessibility
- The headline is the page's <h1>.
- The ghost word and illustration are decorative (aria-hidden).