Toggle Setting List

blocklayout

List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row binds `checked` + `update:checked` (v-model:checked).

Installation

$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/toggle-setting-list.json

$npx shadcn-vue@latest add https://uipkge.dev/r/vue/toggle-setting-list.json

$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/toggle-setting-list.json

$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/toggle-setting-list.json

Named registry:npx shadcn-vue@latest add @uipkge/toggle-setting-listInstalls to:app/components/blocks/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`title`	`string`	—	optional
`description`	`string`	—	optional
`headerIcon`	`Component`	—	optional
`class`	`string`	—	optional

Includes

section-card

Files installed (2)

app/components/blocks/ToggleSettingList.vue0.6 kB

<script setup lang="ts">
import type { Component } from 'vue'
import { SectionCard } from '@/components/ui/section-card'

defineProps<{
  title?: string
  description?: string
  headerIcon?: Component
  class?: string
}>()
</script>

<template>
  <SectionCard
    data-slot="toggle-setting-list"
    :title="title ?? 'Notifications'"
    :description="description"
    :class="$props.class"
  >
    <template v-if="headerIcon" #header-action>
      <component :is="headerIcon" class="text-muted-foreground size-5" />
    </template>
    <ul class="-my-4 divide-y">
      <slot />
    </ul>
  </SectionCard>
</template>

app/components/blocks/ToggleSettingRow.vue1.1 kB

Raw manifest:https://uipkge.dev/r/vue/toggle-setting-list.json

Change language