InstallSettings

The way back to installing after the card has been dismissed.

Import it from rei-kit/pwa: import { InstallSettings } from 'rei-kit/pwa'

Open InstallSettings in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { InstallSettings } from 'rei-kit/pwa'
</script>

<template>
  <InstallSettings
    title="App"
    label="Install on this device"
    installed-label="Installed"
    body="Opens from your home screen, works offline."
    ios-body="Tap Share, then Add to Home Screen."
    action="Install"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`title`	`string`	yes	The group's heading.
`label`	`string`	yes	The row's label while installing is still possible.
`installedLabel`	`string`	yes	The row's label once it is installed.
`body`	`string`	yes
`iosBody`	`string`	yes	Shown instead of `body` on iOS, where the user must use the Share menu.
`action`	`string`	yes	The install button. Absent on iOS, which has no API to call.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub