The Window component is designed to display content in a floating or modal container with optional styling and animations.

Example Usage

Preview

contained

outlined

animated border

Code

<script lang="ts">
  import { Window } from "@fefade-ui/svelte"

  const windowVariants = ["contained", "outlined"] as const
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  {#each windowVariants as variant (variant)}
    <Window {variant}>
      <h2>{variant}</h2>
    </Window>
  {/each}

  <Window animatedBorder>
    <h2>animated border</h2>
  </Window>
</div>

Props

Prop	Type	Default	Description
variant	"contained" | "outlined"	"contained"	Determines the visual style of the window. contained gives a filled background, outlined shows a border only.
animatedBorder	boolean	false	If true, animates the window border for visual emphasis.