SettingsRow

One line in a settings card.

Import it from rei-kit: import { SettingsRow } from 'rei-kit'

Open SettingsRow 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 { Languages } from 'lucide-vue-next'
import { SettingsGroup, SettingsRow } from 'rei-kit'

function openLanguages() {
  // …
}
</script>

<template>
  <SettingsGroup title="Account">
    <SettingsRow
      label="Language"
      description="English"
      :icon="Languages"
      interactive
      @click="openLanguages"
    />
  </SettingsGroup>
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes
`description`	`string`	''
`icon`	`Component`	undefined
`interactive`	`boolean`	false	Renders the row as a button with a chevron.
`stacked`	`boolean`	false	Puts the control on its own line below the label, for wide controls.

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