> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/android/ja/navigation/ux/llms.txt)

# Destination preview card customization

You can override the destination preview card by providing your own UI written in Jetpack Compose.

![Destination preview card](https://docs.mapbox.com/android/ja/assets/ideal-img/dash-sdk-destination-preview.ae0719c.480.png)

To construct the card content, the following class is used:

```kotlin
class DestinationPreviewUiState {
    val place: DataState<PlaceDetails>
    val primaryButton: ActionButton.Primary?
    val secondaryButton: ActionButton.Secondary?
    val backCloseButtonState: BackCloseButtonState?
}
```

### Customization Process

The `DashNavigationFragment` provides the `setDestinationPreview` function, which allows you to define custom content for the destination preview card. This function accepts a lambda with two parameters: `modifier` and `state`. The `modifier` is an instance of [`Modifier`](https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier), used by the default implementations. The `state` is an instance of `DestinationPreviewUiState`, containing all the necessary information to render the destination preview card.

### Example Usage

For real-world implementations of custom destination previews, visit our [GitHub repository](https://github.com/mapbox/dash-android-examples).

You can restore the default destination preview card implementations at any point during runtime:

```kotlin
fragment.setDestinationPreview { modifier, _ ->
    DefaultDestinationPreview(modifier)
}
```