# Location Card

Place card with an illustrated street map, route, ETA and pin, with no maps SDK needed. Switching travel mode redraws the route, and arriving glides your dot to the pin.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/location-card
```

## Import

```tsx
import { StaticMap, LocationCard } from "@/components/ui/location-card/location-card";
```

## Variants

- `pickup` — Pickup: `npx @lumioui/cli add pro/location-card-pickup`
- `place` — Place: `npx @lumioui/cli add pro/location-card-place`
- `saved` — Saved places: `npx @lumioui/cli add pro/location-card-saved`
- `stay` — Stay: `npx @lumioui/cli add pro/location-card-stay`

## Props

### StaticMap

| Prop | Type | Notes |
| --- | --- | --- |
| `seed?` | `number` | Seed for the street plan. Default 7. |
| `height?` | `number` | Height in pt. Width fills the parent. Default 140. |
| `route?` | `boolean` | Draw a route from the "you" dot to the centre. |
| `approximate?` | `boolean` | Show an area circle instead of the exact pin. |
| `pinIcon?` | `IconName` | Pin glyph. Default "map-pin". |
| `pinColor?` | `string` | Pin / route colour (hex). Default: the current primary. |
| `hidePin?` | `boolean` | Hide the pin entirely (thumbnail use). |
| `routeMode?` | `RouteMode` | How the route is travelled. Changing it redraws the line: drive is  solid, walk is dotted, transit marks its stop. Default "drive". |
| `lit?` | `boolean` | The pin lands on a pool of its own light that brightens at contact,  then settles low. Default false (a plain contact shadow). |
| `arrived?` | `boolean` | You reached the place: the you-dot glides along the route to the pin,  the pin ignites and holds. Default false. |
| `onArrived?` | `() => void` | Called after the arrival has been held (~700ms after the pin ignites). |
| `className?` | `string` | — |

### LocationCard

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | — |
| `address?` | `string` | — |
| `category?` | `string` | "Bakery", "Pickup point". |
| `distance?` | `string` | "0.8 mi". |
| `eta?` | `string` | Travel time shown in the Directions button — "6 min". |
| `status?` | `LocationStatus` | — |
| `rating?` | `number` | — |
| `reviews?` | `number` | — |
| `image?` | `ImageSourcePropType` | Photo instead of the drawn map. |
| `mapSeed?` | `number` | Street-plan seed for the drawn map. |
| `mapHeight?` | `number` | Map height (card layout). Default 150. |
| `route?` | `boolean` | Draw a route from you to the place. |
| `approximate?` | `boolean` | Area circle instead of an exact pin (listings before booking). |
| `pinIcon?` | `IconName` | Pin glyph. Default "map-pin". |
| `pinColor?` | `string` | Pin colour (hex). Default primary. |
| `onDirections?` | `() => void` | Primary action. Omit to hide the Directions button. |
| `directionsLabel?` | `string` | Directions button text. Default "Directions". |
| `directionsIcon?` | `IconName` | Icon in the Directions button. Default "car". |
| `actions?` | `React.ReactNode` | Extra actions beside Directions (Call, Website, Share). |
| `children?` | `React.ReactNode` | Content between the meta lines and the actions. |
| `layout?` | `"card" | "row"` | "card" (default) or "row" — list row with a map thumbnail. |
| `routeMode?` | `RouteMode` | How the route is travelled; changing it redraws the line. Default "drive". |
| `lit?` | `boolean` | The pin lands on a pool of its own light. Default true on the card layout. |
| `arrived?` | `boolean` | You reached the place: the you-dot glides to the pin, which ignites and holds. |
| `onArrived?` | `() => void` | Called once the arrival has been held (~700ms). |
| `onPress?` | `() => void` | — |
| `className?` | `string` | — |

## Icons rendered

- `star` — /icons.html?i=star

Source: https://lumioui.com/components/location-card