A compact top bar that unfolds downward into a card with three link cards and a call to action. The panel floats over the page, so nothing below it moves.
Ship the interface
your product deserves.
Open components for React and Tailwind.
npx shadcn@latest add https://hyperblur.dev/r/nav-card-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/nav-card-expand.tsx.
import { NavCardExpand } from "@/components/hyperblur/nav-card-expand"
<NavCardExpand brand="Northlight" cta={{ label: "Get started", href: "/signup" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| links | { title: string; description?: string; href?: string; icon?: ReactNode }[] | Components, Guides, Templates | Link cards in the panel. Three fit best on one row. |
| brand | ReactNode | "Northlight" | Content on the left of the bar, after a small logo mark. |
| cta | { label: string; href?: string; onClick?: () => void } | { label: "Get started" } | Primary button at the bottom of the panel. |
| note | string | "New: dark mode tokens" | Short text next to the call to action. |
| open | boolean | Controlled open state. Pair with onOpenChange. | |
| defaultOpen | boolean | false | Initial state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the panel opens or closes. | |
| accent | string | "#2f7bff" | Color of icon tiles, hover borders and focus rings. |
| menuLabel | string | "Primary" | Accessible name of the navigation. |