{#snippet child({ props })} {/snippet}

Filters

{#snippet child({ props })} {/snippet}

Share code

{#snippet child()} {/snippet} Copy to clipboard

{#snippet child({ props })} {/snippet}

Send us feedback

<div class="flex flex-col sm:flex-row sm:justify-end">
					<Button size="sm">Send feedback</Button>
				</div>
			</form>
		</PopoverContent>
	</Popover>
</div>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/popovers/popover-08.svelte)

## popover-09

> A type-safe, accessible popover-09 component for building modern UIs. This component is part of the popovers collection.

### Core Information

- **Component ID**: `popover-09`
- **Location**: `/src/lib/components/popovers/popover-09.svelte`
- **Type**: UI Component

### Usage

```svelte
### Dependencies

Required packages and components:

- [`lucide-svelte`](https://github.com/lucide-icons/lucide)

Full component implementation:

```svelte
<script lang="ts">
	import Button from '../ui/button.svelte';

import Club from 'lucide-svelte/icons/club';
	import Diamond from 'lucide-svelte/icons/diamond';
	import Heart from 'lucide-svelte/icons/heart';
	import Spade from 'lucide-svelte/icons/spade';

import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';

interface TourStep {
		description: string;
		icon: typeof Heart;
		title: string;
	}

const tourSteps: TourStep[] = [
		{
			description:
				"This is your new workspace. Here you'll find all your projects, recent activities, settings, and more.",
			icon: Heart,
			title: 'Heart'
		},
		{
			description:
				'Use the toolbar above to create new projects, invite team members, or access settings.',
			icon: Diamond,
			title: 'Diamond'
		},
		{
			description:
				'Click the support icon in the top right corner to access our help center and documentation.',
			icon: Club,
			title: 'Club'
		},
		{
			description:
				'Press ⌘K to open the command palette. Use arrow keys to navigate and Enter to select an action.',
			icon: Spade,
			title: 'Spade'
		}
	];

let currentStep = $state(0);
	let anchors = $state<HTMLDivElement[]>([]);

function handleNavigation() {
		if (currentStep === tourSteps.length - 1) {
			currentStep = 0;
		} else {
			currentStep++;
		}
	}
</script>

<div class="flex flex-col gap-4">
	<Popover
		onOpenChange={(open) => {
			if (open) currentStep = 0;
		}}
	>
		<div class="grid grid-cols-2 place-items-center gap-4">
			{#each tourSteps as _, index (index)}
				<div
					class="flex size-10 items-center justify-center rounded-lg bg-secondary text-sm font-medium text-muted-foreground"
					bind:this={anchors[index]}
				>
					{index + 1}
				</div>
			{/each}
		</div>

<PopoverTrigger>
			{#snippet child({ props })}
				<Button variant="outline" {...props}>Start tour</Button>
			{/snippet}
		</PopoverTrigger>

<PopoverContent
			class="max-w-[280px] py-3 shadow-none"
			side={currentStep % 2 === 0 ? 'left' : 'right'}
			customAnchor={anchors[currentStep]}
			showArrow={true}
		>
			<div class="space-y-3">
				<div class="space-y-1">
					<p class="text-[13px] font-medium">{tourSteps[currentStep].title}</p>
					<p class="text-xs text-muted-foreground">{tourSteps[currentStep].description}</p>
				</div>
				<div class="flex items-center justify-between gap-2">
					<span class="text-xs text-muted-foreground">
						{currentStep + 1}/{tourSteps.length}
					</span>
					<button class="text-xs font-medium hover:underline" onclick={handleNavigation}>
						{currentStep === tourSteps.length - 1 ? 'Start over' : 'Next'}
					</button>
				</div>
			</div>
		</PopoverContent>
	</Popover>
</div>

```

### Links

- [View Source](https://github.com/max-got/originui-svelte/tree/main/src/lib/components/popovers/popover-09.svelte)