Components / Foundations

Transparent Background

Component

A component that renders a dynamic grid-based transparent background, with alternating colors for squares, behind the provided content.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component, then make it your own.

ComponentTransparentBackground

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { TransparentBackground } from "sveltekit-ui"
</script>

<TransparentBackground>
  {#snippet content()}
    <div style="width: 24rem; height: 14rem; border-radius: 1rem; background: #0ea5e980; display: grid; place-items: center;">
      50% transparent blue
    </div>
  {/snippet}
</TransparentBackground>

API reference

Props accepted by the component.

4 entries in properties

Property	Type	Default	Description
`min_square_width`	`number`	`10`	The minimum width of each square in pixels.
`max_square_width`	`number`	`25`	The maximum width of each square in pixels.
`min_squares_per_row`	`number`	`2`	The minimum number of squares per row.
`content`	`snippet`	`—`	The content to be displayed in the foreground while the background grid renders behind it.