Getting Started
Install DryUI and render your first component in under a minute.
bun install -g @dryui/cli@latest && dryuiInstall the DryUI integration
Once dryui is installed, wire DryUI into your editor or agent of choice.
Depending on the tool, that means a plugin, an extension, or a native skill + MCP setup.
Each path exposes the DryUI skill plus the dryui and dryui-feedback MCP servers.
Start with the DryUI CLI, then add the DryUI plugin so Claude can use the same discovery and validation loop in-editor.
Add the DryUI marketplace
Registers the repo so Claude Code can discover the DryUI plugin.
claude plugin marketplace add rob-balfre/dryuiInstall the plugin
Installs the DryUI skill and the dryui + dryui-feedback MCP servers.
claude plugin install dryui@dryuiUse the CLI as the default surface. The plugin adds conventions plus ask/check inside Claude.
Install
bun add @dryui/uiHeadless primitives only (no styles, no dependencies):
bun add @dryui/primitivesTheme setup
Import the theme CSS and set class="theme-auto" on <html> for
automatic light/dark switching.
<!-- In your root layout (+layout.svelte) -->
<script>
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
</script><html lang="en" class="theme-auto">
<body>
%sveltekit.body%
</body>
</html>theme-auto follows the user's OS preference via prefers-color-scheme. Override with data-theme="light" or data-theme="dark" when the user explicitly picks a mode.
First component
Button
<script>
import { Button } from '@dryui/ui';
let saved = false;
</script>
<Button variant="solid" onclick={() => saved = true}>
{saved ? 'Saved' : 'Save changes'}
</Button>Card
Most components use compound syntax — Card.Root, Card.Header, Card.Content.
<script>
import { Card, Text } from '@dryui/ui';
</script>
<Card.Root>
<Card.Header>
<h3>My Card</h3>
</Card.Header>
<Card.Content>
<Text>Card content goes here.</Text>
</Card.Content>
</Card.Root>Agent workflow
Start with dryui. Outside the DryUI monorepo it asks which editor or agent
you want to wire, whether to install the Claude hook, and whether to open feedback. After
that, use dryui init for new apps, dryui install / dryui detect for existing ones, and dryui info / dryui compose before writing
component code. After implementation, use DryUI MCP check if it is available, then
run the app's normal build and test commands.
Use the Tools page for CLI setup
and command details. If your editor supports MCP, ask and check mirror the same lookup and validation loop in-editor. Use the Migration Guide for the
route-level workflow and state-heavy planner pattern.
Full editor setup
Use the full matrix below if you want the complete per-editor setup, including native skill paths and manual MCP config where a marketplace plugin is not available. The snippets are the same shared setup data that backs the CLI and docs.
dryuiStart with the DryUI CLI, then add the DryUI plugin so Claude can use the same discovery and validation loop in-editor.
1. Install the CLI
bun install -g @dryui/cli@latest
dryui
# npm alternative
npm install -g @dryui/cli@latest
dryui2. Install the plugin
The plugin is the canonical Claude install path for the DryUI skill and MCP servers.
claude plugin marketplace add rob-balfre/dryui
claude plugin install dryui@dryuiManual MCP config
3. Optional MCP-only fallback: add the servers manually if you cannot use plugins. This does not install the bundled DryUI skill.
# MCP server
claude mcp add dryui -- npx -y @dryui/mcp
claude mcp add dryui-feedback -- npx -y -p @dryui/feedback-server dryui-feedback-mcpSvelte companion (recommended)
Prefer the official Claude Svelte plugin. If you cannot use plugins, the MCP-only fallback below still adds list-sections, get-documentation, svelte-autofixer, and playground-link so the agent can ground Svelte 5 and SvelteKit answers in the official docs.
claude plugin marketplace add sveltejs/ai-tools
claude plugin install svelte@svelte
# MCP-only fallback
claude mcp add -t stdio -s user svelte -- npx -y @sveltejs/mcpUse the CLI as the default surface. The plugin adds conventions plus ask/check inside Claude.
Use dryui when you want the interactive flow. Use the Tools page for CLI commands and
terminal workflows. Use dryui setup if you want the explicit subcommand, or the
tabs above if you want to wire everything yourself.
Theming
Every visual property is a CSS variable. Override globally or per-component.
:root {
--dry-color-fill-brand: #8b5cf6;
--dry-color-fill-brand-hover: #7c3aed;
--dry-radius-md: 12px;
}<!-- Force dark mode -->
<html data-theme="dark">
<!-- Force light mode -->
<html data-theme="light">Use the Theme Wizard to generate a full theme from a single brand colour.
Architecture
Three independent layers — adopt at any level.
Headless, unstyled components. Zero dependencies.
Styled components with CSS-variable theming. Built on primitives.
CLI-first tooling for setup, lookup, and validation. MCP mirrors ask / check inside supported editors.