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 { Alert } from '@dryui/ui';
</script>

<Alert variant="info">
  {#snippet description()}Your changes have been saved.{/snippet}
</Alert>

Import options

Root package

ts
import { Alert } from '@dryui/ui'

Per-component subpath

ts
import { Alert } from '@dryui/ui/alert'

API

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

Prop Type Description Default Required Bindable
variant
infosuccesswarningerror
Visual style preset for the component. 'info' — —
dismissible
boolean
— false — —
onDismiss
() => void
— — — —
icon
Snippet
— — — —
title
Snippet
Primary heading or label text. — — —
description
Snippet
Supporting copy that explains the current control or section. — — —
children
Snippet
Content rendered inside the component. — — —