A framed detail card with a kicker, a large title, a short description, a meta grid and a row of bracket buttons.
Particles bend around a magnetic field.
npx shadcn@latest add https://hyperblur.dev/r/hud-detail-panel.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-detail-panel.tsx.
import { HudDetailPanel } from "@/components/hyperblur/hud-detail-panel"
<HudDetailPanel title="Night Grid" onAction={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| kicker | string | "Experiment / Shader" | Accent micro label above the title. |
| index | string | "014" | Number at the top right. Hidden when empty. |
| title | string | "Ion Drift" | Main title. |
| description | string | Short text under the title, clamped to two lines. | |
| meta | { label: string; value: string }[] | Stack, Licence, Status, Added | Meta grid. Two columns, four on wide panels. |
| actions | { id: string; label: string; primary?: boolean }[] | Open, Source, Share | Buttons. A primary one is filled with the accent. |
| onAction | (id: string) => void | Called with the id of the clicked button. | |
| accent | string | "#ff4d4d" | Kicker, corner and primary button color. |