List of toggle-able settings in a SectionCard. Spell rows out inline with ToggleSettingRow — each row binds `checked` + `update:checked` (v-model:checked).
Also available for React ->$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.jsonnpx shadcn-vue@latest add @uipkge/toggle-setting-listInstalls to:app/components/blocks/| Name | Type / Values | Default | Required |
|---|---|---|---|
title | string | — | optional |
description | string | — | optional |
headerIcon | Component | — | optional |
class | string | — | optional |
<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>
<script setup lang="ts">
defineProps<{
label: string
desc?: string
checked?: boolean
}>()
const emit = defineEmits<{ 'update:checked': [boolean] }>()
</script>
<!-- One controlled switch row. Hold state in the parent and wire `checked` + `update:checked` (v-model:checked) per row. -->
<template>
<li class="flex items-center justify-between gap-4 py-4 first:pt-0">
<div>
<p class="text-sm font-medium">{{ label }}</p>
<p v-if="desc" class="text-muted-foreground text-xs">{{ desc }}</p>
</div>
<button
type="button"
role="switch"
:aria-label="label"
:aria-checked="checked"
class="focus-visible:ring-ring relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full transition-colors focus:outline-none focus-visible:ring-2"
:class="checked ? 'bg-primary' : 'bg-muted-foreground/30'"
@click="emit('update:checked', !checked)"
>
<span
class="bg-background inline-block size-4 translate-y-0.5 rounded-full shadow transition-transform"
:class="checked ? 'translate-x-[18px]' : 'translate-x-0.5'"
/>
</button>
</li>
</template>
Raw manifest:https://uipkge.dev/r/vue/toggle-setting-list.json
