How to render/display the overlay?

[MattHeslington]

Hello,
As the title says, how do I give my <Command.Dialog> an overlay? I don't understand the docs. I've checked the bits-ui docs, the shadcn-svelte docs, asked AI and gave it your docs here. I just want to render and style an overlay.
Any help much appreciated.
Cheers,
Matt

[shyakadavis]

Hey, @MattHeslington

[I'm responding with the assumption that you're working with shadcn-svelte]

Since the Command comp itself is wrapped within the Dialog comp, please refer to the Dialog.Overlay component.

<Dialog.Portal>
	<Dialog.Overlay />
	<DialogPrimitive.Content>
		<slot></slot>
	</DialogPrimitive.Content>
</Dialog.Portal>

Where Dialog.Overlay just looks as simple as:

<script lang="ts">
	import { Dialog as DialogPrimitive } from 'bits-ui';
	import { fade } from 'svelte/transition';
	import { cn } from '$lib/utils.js';

	type $$Props = DialogPrimitive.OverlayProps;

	let className: $$Props['class'] = undefined;
	export let transition: $$Props['transition'] = fade;
	export let transitionConfig: $$Props['transitionConfig'] = {
		duration: 150
	};
	export { className as class };
</script>

<DialogPrimitive.Overlay
	{transition}
	{transitionConfig}
	class={cn('fixed inset-0 z-50 bg-background/80 backdrop-blur-sm ', className)}
	{...$$restProps}
/>

[MattHeslington]

Hello @shyakadavis,
Thanks for the reply, much appreciated. I'm actually not using shadcn-svelte, just this package, and bits-ui. According to the readme for this package:

 [cmdk-overlay] - Props are forwarded to Command. Composes Bits UI's Dialog component. The overlay is always rendered

I just can't work out how to target the overlay for styling (if it's always rendered).I'm already using a bits-ui dialog with an overlay elsewhere in my app, but I don't understand how to access it in the 'Command' tags:

<Command.Root bind:value>
   <Command.Input />
   <Command.List>
   	<Command.Item>Orange</Command.Item>
   	<Command.Item>Apple</Command.Item>
   </Command.List>
</Command.Root>

Thanks again,
Matt