Luna Hero
Pixel storefront hero with a floating mega menu.
npx shadcn@latest add "https://www.pinui.xyz/r/blocx/luna-hero.json"When to use
- A storefront or catalogue home where the navigation itself is part of the pitch
- Products with categories worth browsing straight from the hero, through the mega menu
When not to use
- Single-product pages — the category menu and catalog search have nothing to hold
- Projects that cannot take Base UI and Phosphor as dependencies
Installation
Add Luna Hero with the shadcn CLI — it writes the files into components/blocx/ and installs what they import — or copy it in by hand.
Requires React 19 · Next.js (it loads its fonts with next/font) · @base-ui/react · @phosphor-icons/react · motion.
pnpm dlx shadcn@latest add "https://www.pinui.xyz/r/blocx/luna-hero.json"Usage
import LunaHero from "@/components/blocx/LunaHero";
export default function Page() {
return (
<LunaHero
theme="system"
links={{ store: "/shop", signIn: "/login" }}
/>
);
}
page.tsx · 11 lines
API reference
LunaHero
| Prop | Type | Default | Description |
|---|---|---|---|
theme | "light" | "dark" | "system" | "system" | System follows prefers-color-scheme; the explicit themes cover the popups too |
links | Partial<LUNA_LINKS> | — | Where the nav, the calls to action and the menu's footer point |
categories | LunaCategory[] | sample catalog | The two-column category menu |
navLinks | LunaLink[] | sample links | The floating navbar's links |
products | LunaProduct[] | sample products | What the catalog search looks through |
className | string | — | Extra class on the hero's root |
Accessibility
- The menu, search and mobile navigation are Base UI popovers and dialogs: focus is trapped, restored and labelled
- ⌘K / Ctrl+K opens the search, announced through aria-keyshortcuts
- The pixel backdrop is aria-hidden; the hero is labelled by its own headline
Motion
- The backdrop arrives as one layer, then the headline, copy and actions rise in reading order
- Reduced motion skips the entrance and shows everything in place
Responsive behavior
- The navbar collapses into a full menu dialog on small screens
- The stepped pixel backdrop re-steps to the width instead of scaling
Blocx · 8 blocks · 4 sections · part of Pin UI