Allow Background Customization in Sheet Overlay Component

[mieaw]

Prerequisites

• This feature already exists in shadcn/ui - if not, it won't be considered here so don't continue with your issue.

Describe the feature

Current Behavior

Currently, the Sheet Overlay component has a hardcoded background style (bg-black/80) that cannot be effectively overridden using the class prop due to CSS specificity.

Proposed Solution

Remove the default background style from the base component, allowing users to:

1. Either specify their own background color through the class prop
2. Or use a new optional background prop to toggle the default background

Example Usage

svelte

<Sheet.Overlay class="bg-blue-500/50" />

<Sheet.Overlay class="bg-transparent" />

Alternative Solution

Alternatively, add a new boolean prop:
svelte

<Sheet.Overlay background={true} />

<Sheet.Overlay background={false} />

Benefits

• More flexible component that can be used in different contexts
• Better customization options for users
• Maintains backward compatibility if implemented as a new prop

Additional Context

This change would be particularly useful for cases where the overlay needs to be transparent or have a different styling than the default black semi-transparent background.

sheet-overlay.svelte

<script lang="ts">
	let {
		ref = $bindable(null),
		class: className,
		background = true, // Add new prop
		...restProps
	}: SheetPrimitive.OverlayProps = $props();
</script>

<SheetPrimitive.Overlay
	bind:ref
	class={cn(
		'fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
		background && 'bg-black/80', // Conditionally apply background
		className
	)}
	{...restProps}
/>

or remove the bg-black/80 by default from component

[huntabyte]

Where does this feature exist in the original?

You can feel free to update the component code yourself to expose whatever props make your life easier, that's the whole point of the project 😃

[mieaw]

Where does this feature exist in the original?

You can feel free to update the component code yourself to expose whatever props make your life easier, that's the whole point of the project 😃

Thanks for the thoughtful response! It's truly inspiring to see how approachable and flexible your work is, encouraging developers to tailor components to their unique needs. This mindset really showcases your commitment to creating tools that empower the community.

By the way, I just wanted to take a moment to express my admiration for everything you’ve built so far—it’s clear you have a gift for breaking down complex concepts into accessible and impactful solutions. That said, I (and I'm sure many others) really miss your YouTube videos. It’s been about four months since your last upload, and your content was such a great resource for learning and inspiration. Your way of teaching and sharing ideas had a way of making development feel exciting and accessible, which is something not everyone can achieve.

If there’s any chance you’ve considered returning to YouTube, I’d love to see you dive back in—whether it’s sharing updates on your projects, teaching new techniques, or just discussing your approach to development. Your work has had a big impact on the community, and I know there’s still so much we could learn from you. Whatever you choose to do, thank you for everything you've already contributed. It’s clear you’re making a difference in the dev world, and we appreciate you!

[huntabyte]

Thanks for the kind words @mieaw ❤️

I'd like to create some more videos/livestreams in the coming year! I've just been much more interested in writing code/maintaining these projects than creating content recently, but perhaps that will change! 😃

Going to close this issue now!

[mieaw]

Okay am happy now in both statements you do the right *