From shadcn-svelte and Bits UI

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { svelteLean } from '@svelte-lean/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [svelteLean(), sveltekit()] });

// src/routes/+layout.svelte (script): tokens and base once, then one file per primitive used
import '@svelte-lean/styles/tokens.css';
import '@svelte-lean/styles/base.css';
import '@svelte-lean/styles/button.css';
import '@svelte-lean/styles/dialog.css';

<script lang="ts">
	import * as Dialog from '$lib/components/ui/dialog/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
</script>

<Dialog.Root>
	<Dialog.Trigger>Settings</Dialog.Trigger>
	<Dialog.Content>
		<Dialog.Header>
			<Dialog.Title>Settings</Dialog.Title>
			<Dialog.Description>Changes apply to this device.</Dialog.Description>
		</Dialog.Header>
		<Dialog.Footer>
			<Dialog.Close>Cancel</Dialog.Close>
			<Button onclick={save}>Save</Button>
		</Dialog.Footer>
	</Dialog.Content>
</Dialog.Root>

<button type="button" data-slean="button" commandfor="settings" command="show-modal">
	Settings
</button>
<dialog id="settings" data-slean="dialog" closedby="any" aria-labelledby="settings-title">
	<header>
		<h2 id="settings-title">Settings</h2>
		<p>Changes apply to this device.</p>
	</header>
	<footer>
		<button type="button" data-slean="button" data-variant="text" commandfor="settings" command="close">
			Cancel
		</button>
		<button type="button" data-slean="button" commandfor="settings" command="close" onclick={save}>
			Save
		</button>
	</footer>
	<button type="button" data-slean-part="close" commandfor="settings" command="close" aria-label="Close"></button>
</dialog>

<script lang="ts">
	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
</script>

<DropdownMenu.Root>
	<DropdownMenu.Trigger>Actions</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Item onSelect={() => run('edit')}>Edit</DropdownMenu.Item>
		<DropdownMenu.Item onSelect={() => run('archive')}>Archive</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item onSelect={() => run('delete')}>Delete</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>

<script lang="ts">
	import type { MenuSelectDetail } from '@svelte-lean/primitives/menu';
	import { on } from 'svelte/events';

	function onAction(event: Event) {
		run((event as CustomEvent<MenuSelectDetail>).detail.value ?? '');
	}
</script>

<button type="button" data-slean="button" popovertarget="actions-menu" aria-haspopup="menu">
	Actions
</button>
<div id="actions-menu" popover data-slean="menu" {@attach (node) => on(node, 'slean:select', onAction)}>
	<button type="button" data-slean-value="edit">Edit</button>
	<button type="button" data-slean-value="archive">Archive</button>
	<hr />
	<button type="button" data-slean-value="delete" data-color="error">Delete</button>
</div>

<script lang="ts">
	import * as Tabs from '$lib/components/ui/tabs/index.js';
</script>

<Tabs.Root value="account">
	<Tabs.List>
		<Tabs.Trigger value="account">Account</Tabs.Trigger>
		<Tabs.Trigger value="security">Security</Tabs.Trigger>
	</Tabs.List>
	<Tabs.Content value="account">Name, email and avatar.</Tabs.Content>
	<Tabs.Content value="security">Password and sessions.</Tabs.Content>
</Tabs.Root>

<script lang="ts">
	import { tabsParts } from '@svelte-lean/primitives/tabs';

	const tabs = [
		{ value: 'account', label: 'Account', text: 'Name, email and avatar.' },
		{ value: 'security', label: 'Security', text: 'Password and sessions.' }
	];
	const t = tabsParts('settings');
</script>

<div id="settings" data-slean="tabs" data-slean-value="account">
	<div {...t.list} aria-label="Settings">
		{#each tabs as tab (tab.value)}<button {...t.tab(tab.value, 'account')}>{tab.label}</button>{/each}
	</div>
	{#each tabs as tab (tab.value)}
		<div {...t.panel(tab.value, 'account')} tabindex="0">{tab.text}</div>
	{/each}
</div>

<script lang="ts">
	import * as Select from '$lib/components/ui/select/index.js';

	const fruits = [
		{ value: 'apple', label: 'Apple' },
		{ value: 'mango', label: 'Mango' }
	];
	let fruit = $state('');
	const label = $derived(fruits.find((f) => f.value === fruit)?.label ?? 'Select a fruit');
</script>

<Select.Root type="single" name="fruit" bind:value={fruit}>
	<Select.Trigger>{label}</Select.Trigger>
	<Select.Content>
		{#each fruits as f (f.value)}
			<Select.Item value={f.value} label={f.label}>{f.label}</Select.Item>
		{/each}
	</Select.Content>
</Select.Root>

<script lang="ts">
	import { selectParts } from '@svelte-lean/primitives/select';

	const fruits = [
		{ value: 'apple', label: 'Apple' },
		{ value: 'mango', label: 'Mango' }
	];
	const p = selectParts('fruit');
	let fruit = $state('');
	const label = $derived(fruits.find((f) => f.value === fruit)?.label);
</script>

<label {...p.label}>Fruit</label>
<div id="fruit" data-slean="select">
	<select {...p.native} name="fruit" bind:value={fruit}>
		<option value="" hidden>Select a fruit</option>
		{#each fruits as f (f.value)}<option value={f.value}>{f.label}</option>{/each}
	</select>
	<button {...p.trigger}>{label ?? 'Select a fruit'}</button>
	<button {...p.clear}></button>
</div>

<script lang="ts">
	import * as Tooltip from '$lib/components/ui/tooltip/index.js';
</script>

<Tooltip.Provider>
	<Tooltip.Root>
		<Tooltip.Trigger>Save</Tooltip.Trigger>
		<Tooltip.Content>Saves the draft (Ctrl+S)</Tooltip.Content>
	</Tooltip.Root>
</Tooltip.Provider>

<button type="button" data-slean="button" data-slean-hint="Saves the draft (Ctrl+S)">
	Save
</button>

<script lang="ts">
	import * as Accordion from '$lib/components/ui/accordion/index.js';
</script>

<Accordion.Root type="single">
	<Accordion.Item value="shipping">
		<Accordion.Trigger>Shipping</Accordion.Trigger>
		<Accordion.Content>Orders ship within two working days.</Accordion.Content>
	</Accordion.Item>
	<Accordion.Item value="returns">
		<Accordion.Trigger>Returns</Accordion.Trigger>
		<Accordion.Content>Thirty days, with the original packaging.</Accordion.Content>
	</Accordion.Item>
</Accordion.Root>

<details data-slean="accordion" name="faq">
	<summary>Shipping</summary>
	Orders ship within two working days.
</details>
<details data-slean="accordion" name="faq">
	<summary>Returns</summary>
	Thirty days, with the original packaging.
</details>