Toggle Setting List

blocklayout

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

Installation

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

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

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

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

Manifest:https://uipkge.dev/r/svelte/toggle-setting-list.jsonInstalls to:src/lib/components/blocks/toggle-setting-list/

Variants

Loading interactive previews…

Includes

section-card

Files installed (2)

src/lib/components/blocks/toggle-setting-list/ToggleSettingList.svelte0.7 kB

<script lang="ts">
  import type { Component, Snippet } from 'svelte'
  import { SectionCard } from '$lib/components/ui/section-card'

  interface Props {
    title?: string
    description?: string
    headerIcon?: Component
    class?: string
    children?: Snippet
  }

  let { title = 'Notifications', description, headerIcon: HeaderIcon, class: className, children }: Props = $props()
</script>

<SectionCard data-slot="toggle-setting-list" {title} {description} class={className}>
  {#snippet headerAction()}
    {#if HeaderIcon}
      <HeaderIcon class="text-muted-foreground size-5" />
    {/if}
  {/snippet}
  <ul class="-my-4 divide-y">
    {@render children?.()}
  </ul>
</SectionCard>

src/lib/components/blocks/toggle-setting-list/ToggleSettingRow.svelte1.1 kB

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

Change language