A location card with a locally drawn street map, a dropping pin and an animated route, the address, an hours line, a distance chip, and Open in Maps and Open in Waze links built from the address or coordinates.
npx shadcn@latest add https://hyperblur.dev/r/map-directions-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/map-directions-card.tsx.
import { MapDirectionsCard } from "@/components/hyperblur/map-directions-card"
<MapDirectionsCard name="Corner Kitchen" address="418 Maple Avenue, Brooklyn, NY 11215" lat={40.6712} lng={-73.9772} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Corner Kitchen" | Business name. |
| address | string | "418 Maple Avenue, Brooklyn, NY 11215" | Address shown on the card and used as the search query of both links. |
| lat | number | Latitude. When given with lng, the links use the coordinates instead of the address. | |
| lng | number | Longitude. Used together with lat. | |
| hours | string | "Open today · 11 am to 10 pm" | Hours line under the address. Empty hides it. |
| status | "open" | "closing" | "closed" | "open" | Color of the dot before the hours line. |
| distance | string | "1.2 mi · 6 min" | Chip over the map. Empty hides it. |
| streets | string[] | ["Maple Ave", "Union Blvd", "8th St"] | Up to three street names printed on the map. |
| showRoute | boolean | true | Draws the route from the visitor dot to the pin. |
| appearance | "dark" | "light" | "dark" | Color scheme of the card and the map. |
| accent | string | "#2f7bff" | Pin, route and primary button color. |
| labels | Partial<{ openMaps; openWaze; mapLabel; you }> | { openMaps: "Open in Maps", openWaze: "Open in Waze", mapLabel: "Map showing {name}", you: "You" } | Every visible and accessible string. |
| onDirections | (app: "maps" | "waze", href: string) => void | Called when one of the two links is clicked. | |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |