Settings — Vue

---
import Settings from '../components/astro/Settings.astro';
---

<Settings triggerLabel="Settings" client:load />

<!-- Rizzo CSS + js/main.js. Full panel: scaffold/vanilla or /docs/vanilla/components/settings -->
<div class="settings" data-settings>...</div>

<script>
  import { Settings } from '$lib/rizzo';
</script>

<Settings triggerLabel="Settings" />

<script setup>
import { ref } from 'vue';
import Settings from '@/components/rizzo/Settings.vue';
import Button from '@/components/rizzo/Button.vue';
</script>

<template>
  <Button @click="open = true">Settings</Button>
  <Settings v-model:open="open" title="Settings">
    <p>Theme, font, options.</p>
  </Settings>
</template>

import { useState } from 'react';
import { Settings, Button } from './components/react';

const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Settings</Button>
<Settings open={open} onOpenChange={setOpen} title="Settings">
  <p>Theme, font, options.</p>
</Settings>