Airplane Mode

Installation

npx shadcn-vue@latest add switch

Usage

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
  <Switch />
</template>

Add icon inside switch thumb

<template>
  <Switch :model-value="isDark" @update:model-value="toggleTheme">
    <template #thumb>
      <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
      <Icon v-else icon="lucide:sun" class="size-3" />
    </template>
  </Switch>
</template>

Examples

Form

Email Notifications

Marketing emails

Receive emails about new products, features, and more.

Security emails

Receive emails about your account security.