DryUI — Human-led, agent-assisted UI

svelte

1<script lang="ts">
2	import { Button } from '@dryui/ui';
3	let count = $state(0);
4</script>
5
6<Button onclick={() => count++}>Clicked {count}</Button>

bash

curl -X POST https://api.dryui.dev/v1/themes \
  -H "Authorization: Bearer $DRYUI_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"name":"aurora","preset":"dark"}'

ini

# .env.local
DRYUI_TOKEN=dry_live_7a3f...
DRYUI_WORKSPACE=acme-prod
DRYUI_TELEMETRY=off

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

<CodeBlock>Content</CodeBlock>

Import options

Root package

import { CodeBlock } from '@dryui/ui'

Per-component subpath

import { CodeBlock } from '@dryui/ui/code-block'

API

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

Prop	Type	Description	Default	Required	Bindable
showLineNumbers	boolean	—	false	—	—
showCopyButton	boolean	—	true	—	—
linkResolver	(text: string, type: string) => string	—	—	—	—
code	string	—	''	✓	—
language	string	—	—	—	—
shell	Snippet<[CodeBlockShellContext]>	—	—	—	—
children	Snippet	Content rendered inside the component.	—	—	—