DryUI — Svelte 5 Component Library

Backdrop aware

Static demonstration

Frosted glass effect

Blur, tint, and saturation only read clearly when the surface sits over layered color and detail.

Accessibility

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Glass } from '@dryui/ui';
</script>

<Glass>Content</Glass>

Import options

Root package

import { Glass } from '@dryui/ui'

Per-component subpath

import { Glass } from '@dryui/ui/glass'

API

Props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Description	Default	Required	Bindable
blur	number	—	12	—	—
tint	string	—	'rgba(255	—	—
saturation	number	—	120	—	—
children	Snippet	Content rendered inside the component.	—	✓	—