v2.0.0
Home Landing page for DryUI.
Getting Started Install DryUI, import the theme, and bootstrap your app.
Theme Wizard Build and export DryUI semantic token themes.
Tools Install and use the DryUI CLI for setup, lookup, tokens, and feedback tooling.
How it works Architecture and mental model for DryUI-backed apps.
How we work Per-module architecture diagrams and internal workflow.
Grid rules The DryUI layout discipline: grid-first, container queries, token-based spacing.
Migration guide Move from Tailwind, shadcn, or ad-hoc component libraries onto DryUI.
Container Layout component
AppFrame Layout component
Separator Layout component
ScrollArea Layout component
Splitter Layout component
Spacer Layout component
Link Nav component
Breadcrumb Nav component
Tabs Nav component
Pagination Nav component
Sidebar Nav component
NavigationMenu Nav component
MegaMenu Nav component
Menubar Nav component
Accordion Nav component
Collapsible Nav component
Tree Nav component
Stepper Nav component
TableOfContents Nav component
Toolbar Nav component
Card Content component
Text Content component
Heading Content component
List Content component
DescriptionList Content component
Timeline Content component
MarkdownRenderer Content component
CodeBlock Content component
ChatThread Content component
Kbd Content component
Marquee Content component
Typography Content component
Table Data component
DataGrid Data component
Chart Data component
Sparkline Data component
Gauge Data component
Diagram Data component
Map Data component
QRCode Data component
FormatNumber Data component
FormatBytes Data component
FormatDate Data component
RelativeTime Data component
InfiniteScroll Data component
VirtualList Data component
Numeric Data component
Image Media component
Avatar Media component
Icon Media component
IconSwap Media component
AspectRatio Media component
VideoEmbed Media component
Carousel Media component
ImageComparison Media component
FlipCard Media component
LogoMark Media component
Input Forms component
Textarea Forms component
NumberInput Forms component
PhoneInput Forms component
Checkbox Forms component
RadioGroup Forms component
Select Forms component
Combobox Forms component
MultiSelectCombobox Forms component
Listbox Forms component
Slider Forms component
AlphaSlider Forms component
ColorPicker Forms component
DateField Forms component
DatePicker Forms component
DateRangePicker Forms component
DateTimeInput Forms component
TimeInput Forms component
Calendar Forms component
RangeCalendar Forms component
FileSelect Forms component
FileUpload Forms component
DropZone Forms component
PromptInput Forms component
RichTextEditor Forms component
PinInput Forms component
TagsInput Forms component
InputGroup Forms component
Field Forms component
Fieldset Forms component
Label Forms component
Button Controls component
ButtonGroup Controls component
Toggle Controls component
ToggleGroup Controls component
ThemeToggle Controls component
Chip Controls component
ChipGroup Controls component
SegmentedControl Controls component
OptionPicker Controls component
Rating Controls component
StarRating Controls component
Transfer Controls component
Clipboard Controls component
DragAndDrop Controls component
FloatButton Controls component
ScrollToTop Controls component
Dialog Overlay component
AlertDialog Overlay component
Drawer Overlay component
Popover Overlay component
HoverCard Overlay component
Tooltip Overlay component
DropdownMenu Overlay component
ContextMenu Overlay component
CommandPalette Overlay component
NotificationCenter Overlay component
LinkPreview Overlay component
Tour Overlay component
Backdrop Overlay component
Alert Status component
Toast Status component
Badge Status component
Tag Status component
Progress Status component
ProgressRing Status component
Skeleton Status component
Spinner Status component
TypingIndicator Status component
Aurora Effects component
Glow Effects component
Shimmer Effects component
Reveal Effects component
Spotlight Effects component
Beam Effects component
BorderBeam Effects component
Glass Effects component
Noise Effects component
GradientMesh Effects component
Adjust Effects component
ChromaticAberration Effects component
ChromaticShift Effects component
Displacement Effects component
GodRays Effects component
Halftone Effects component
MaskReveal Effects component
ShaderCanvas Effects component
Enter Effects component
Exit Effects component
Stagger Effects component
Hotkey Utils component
FocusTrap Utils component
Portal Utils component
Svg Utils component
VisuallyHidden Utils component

How We Work

One diagram per DryUI package and app. Each flow is grounded in the real source so you can see exactly how every module plugs into the agent-driven UI loop.

@dryui/primitives

Zero-dependency headless Svelte 5 primitives built on native browser APIs. Focus traps, popovers, dismiss handlers, color, and date utilities feed the rest of the stack.

Native browser APIs Popover, focus, keyboard events, Intl, date math, and color parsing.
Primitive utility createFocusTrap, createPositionedPopover, createDismiss, color and date helpers.
Svelte 5 runes wire state $state, $derived, and context connect primitive state to DOM refs.
Headless behaviour Unstyled interaction skeleton ready for any styling layer.
Consumer imports primitive UI compounds and user code layer styles and markup on top.

@dryui/ui

Styled compound components that layer primitives and theme tokens into Root, Trigger, and Content pairs the app can drop in.

Theme tokens --dry-color-*, --dry-space-*, --dry-font-* from the active theme CSS.
@dryui/primitives Focus traps, popovers, dismiss handlers, and context utilities.
Compound component Select.Root wires context, value, and keyboard state across subcomponents.
Scoped Svelte styles Each subcomponent reads var(--dry-*) tokens through scoped CSS only.
App imports Root, Trigger, Content Dialog, Select, Tabs, Sidebar, and friends plug into the consumer app.

@dryui/theme-wizard

An interactive theme studio. User input derives the full --dry-* token map, injects it live, and exports a theme.css for the project.

User input Brand HSB picker, personality, typography, shape, and density controls.
Wizard state wizardState runes persist brandHsb, typeScale, and shape presets.
generateTheme to ThemeTokens Engine derives the full --dry-* light and dark token map.
getStyleString emits :root CSS var block injected into the preview document live.
Live preview updates Every component on the page re-skins as CSS variables change.
Export theme.css Share a URL recipe or download a theme.css with brand overrides.

@dryui/lint

A Svelte preprocessor that enforces DryUI layout, markup, and CSS rules. Strict mode blocks the build on any violation.

.svelte source file Authored component in an app using svelte.config.js preprocess.
dryuiLint preprocessor Runs inside SvelteKit preprocess before AST compilation.
Rule checkers checkScript, checkMarkup, checkStyle against the RULE_CATALOG.
Collect violations Each issue carries rule id, line, and a human-readable message.
Report outcome strict mode throws and blocks the build; dev mode warns inline.

@dryui/feedback

The in-app annotation widget. A keyboard shortcut opens a canvas over the running app, captures a screenshot and drawings, and posts the submission.

User hits shortcut $mod+m opens the annotation canvas over the running app.
Draw strokes, arrows, text Pointer events feed transient geometry into drawings[].
Autosave PUT /drawings Debounced sync so the session resumes across reloads.
Capture screenshot getDisplayMedia renders both WebP and PNG with element hints.
POST /submissions Image, drawings, hints, and viewport are sent to the feedback server.
Dashboard opens Agent picks the submission up via MCP and replies in-thread.

@dryui/feedback-server

The bridge between the widget and the agent. HTTP receives submissions, an MCP server exposes them to Claude, and SSE delivers replies back to the dashboard.

POST /submissions Widget uploads image, drawings, hints, and viewport metadata.
FeedbackStore persists SQLite rows plus WebP and PNG files written to screenshotsDir.
EventBus broadcast submission.created fires on the /events SSE stream.
MCP tool fetch feedback_get_submissions polls pending items with full metadata.
Agent reads and replies Analysis posted back via feedback_reply to /annotations/:id/thread.
UI sees reply via SSE thread.message events re-render the annotation with the response.

@dryui/mcp

The MCP surface for agents. ask returns component, recipe, list, and setup guidance; check validates a file, theme, or workspace against DryUI rules.

Agent calls tool ask(scope, query) for guidance or check(path) for validation.
McpServer handler Tool name routes the request into runAsk or runCheck.
ask scope routing component, recipe, list, and setup each pick a dedicated resolver.
check path dispatch .svelte → checkComponent, .css → diagnoseTheme, dir → scanWorkspace.
spec.json, catalog, rules Static component catalog, anti-patterns, and workspace data.
TOON response Token-optimised text flows back through MCP to the agent.

@dryui/cli

The command-line entry to DryUI. Parses a command, detects the project, plans the install, and prints a TOON-rendered plan.

bunx @dryui/cli ... init, add, setup, install-hook, list, tokens, feedback, and more.
main() parses argv Splits command, flags, and positionals for the dispatcher.
Command dispatcher runAdd, runInit, runSetup, and friends each own one command.
Detect project and spec parseProjectInput locates cwd, package.json, and spec.json.
planAdd to install steps Resolves component, dependencies, imports, and file writes.
TOON-rendered plan renderCommandResultByMode prints the plan and exits cleanly.

@dryui/plugin

The AI tooling bundle for Claude Code, Codex, Copilot CLI, and Gemini. Ships skills, hooks, and the dryui plus dryui-feedback MCP servers ready to load.

User installs plugin Claude Code, Codex, Copilot CLI, or Gemini CLI picks up the bundle.
Tool reads plugin.json skills, .mcp.json, and hooks.json are registered with the agent host.
SessionStart hook dryui ambient seeds the conversation with project context.
Spawn MCP servers @dryui/mcp and @dryui/feedback-server start on stdio.
Skills and rules ready dryui, init, and live-feedback skills load for slash commands.
Agent gains DryUI tools ask, check, and feedback_* tools are ready for the session.

apps/docs

The SvelteKit docs site. The component catalog powers slug routes that render live demos, props tables, CSS var references, and examples.

/components/button User loads a component route from the docs site.
SvelteKit [slug] route +page.ts resolves the slug and hydrates page data.
Component catalog lookup nav.ts reads docsNavCategories from @dryui/mcp.
getComponentDemo() Returns the live Svelte 5 demo for the current component.
Page renders DocsPageHeader, live demo, props, CSS vars, and examples.
Feedback widget watches In dev, annotations go to the local feedback server loop.

Made by Robert Balfré in Sydney 🐨 Last published April 23, 2026 (22s ago)