DryUI — Human-led, agent-assisted UI

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

<Toast.Root>
  <Toast.Provider>...</Toast.Provider>
  <Toast.Title>...</Toast.Title>
  <Toast.Description>...</Toast.Description>
  <Toast.Close>...</Toast.Close>
  <Toast.Action>...</Toast.Action>
</Toast.Root>

Import options

Root package

import { Toast } from '@dryui/ui'

Per-component subpath

import { Toast } from '@dryui/ui/toast'

API

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

Prop	Type	Description	Default	Required	Bindable
Toast.Provider
position	top-righttop-leftbottom-rightbottom-lefttop-centerbottom-center	—	'bottom-right'	—	—
children	Snippet	Content rendered inside the component.	—	—	—
Toast.Root
id	string	Unique HTML id used for labels, aria relationships, or targeted styling.	—	✓	—
variant	infosuccesswarningerror	Visual style preset for the component.	'info'	—	—
persistent	boolean	—	—	—	—
progress	number	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Toast.Title
children	Snippet	Content rendered inside the component.	—	✓	—
Toast.Description
children	Snippet	Content rendered inside the component.	—	✓	—
Toast.Close
children	Snippet	Content rendered inside the component.	—	✓	—
Toast.Action
children	Snippet	Content rendered inside the component.	—	✓	—
onclick	() => void	—	—	—	—