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

<Transfer.Root>
  <Transfer.List>...</Transfer.List>
  <Transfer.Item>...</Transfer.Item>
  <Transfer.Actions>...</Transfer.Actions>
</Transfer.Root>

Import options

Root package

import { Transfer } from '@dryui/ui'

Per-component subpath

import { Transfer } from '@dryui/ui/transfer'

API

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

Prop	Type	Description	Default	Required	Bindable
Transfer.Root
sourceItems	import('./context.svelte.js').TransferItem[]	—	[]	✓	✓
targetItems	import('./context.svelte.js').TransferItem[]	—	[]	—	✓
onChange	( source: import('./context.svelte.js').TransferItem[], target: import('./context.svelte.js').TransferItem[] ) => void	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Transfer.List
filterable	boolean	—	—	—	—
content	Snippet<[{ items: TransferItemType[] }]>	—	—	—	—
type	sourcetarget	HTML type attribute or component-specific type selector.	—	✓	—
title	string	Primary heading or label text.	—	—	—
children	Snippet<[{ items: import('./context.svelte.js').TransferItem[] }]>	Content rendered inside the component.	—	—	—
Transfer.Item
key	string	—	—	✓	—
type	sourcetarget	HTML type attribute or component-specific type selector.	—	✓	—
disabled	boolean	Prevents interaction and applies disabled styling.	false	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Transfer.Actions
children	Snippet< [ { moveToTarget: () => void; moveToSource: () => void; moveAllToTarget: () => void; moveAllToSource: () => void; canMoveToTarget: boolean; canMoveToSource: boolean; } ] >	Content rendered inside the component.	—	—	—