https://github.com/rob-balfre/dryui
160+ components and theme controls, plus a CLI, MCP, and feedback engine to keep AI on track.
https://github.com/rob-balfre/dryui
claude claude-code codex svelte sveltekit ui ui-components
Last synced: about 1 month ago
JSON representation
160+ components and theme controls, plus a CLI, MCP, and feedback engine to keep AI on track.
- Host: GitHub
- URL: https://github.com/rob-balfre/dryui
- Owner: rob-balfre
- License: mit
- Created: 2026-04-06T22:11:21.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-05-13T00:34:14.000Z (about 1 month ago)
- Last Synced: 2026-05-13T01:39:45.920Z (about 1 month ago)
- Topics: claude, claude-code, codex, svelte, sveltekit, ui, ui-components
- Language: HTML
- Homepage: https://dryui.dev
- Size: 184 MB
- Stars: 8
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Notice: NOTICE.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# DRYui
Zero-dependency Svelte 5 core. Headless primitives. Styled defaults. AI-ready. Optional add-ons for theme generation and feedback.
## Packages
| Package | Runtime deps | Description |
| --------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------- |
| `@dryui/primitives` | none (svelte peer only) | Headless, unstyled components built on native browser APIs |
| `@dryui/ui` | `@dryui/primitives` + svelte | Styled production-ready components with CSS variables theming |
| `@dryui/mcp` | — | MCP server for lookup, source retrieval, planning, validation, theme diagnosis, and workspace audit |
| `@dryui/cli` | — | CLI tool for setup snippets, planning, lookup, validation, and workspace audit |
| `@dryui/lint` | — | Svelte preprocessor enforcing CSS grid-only layout, container queries, no flexbox/inline styles |
| `@dryui/theme-wizard` | `lucide-svelte` (peer) | Optional add-on: guided theme generation from a brand color (uses `lucide-svelte` for wizard icons) |
| `@dryui/feedback` | `lucide-svelte` (peer) | Optional add-on: feedback annotation UI (uses `lucide-svelte` for toolbar icons) |
The core runtime (`@dryui/primitives` + `@dryui/ui`) has no runtime dependencies beyond Svelte. Add-on packages may declare peer deps — those are listed above.
## Quick Start
### Start with the CLI
```bash
bun install -g @dryui/cli@latest
dryui
```
No global install? Prefix commands with `bunx @dryui/cli` or `npx -y @dryui/cli`.
### Install the UI package
```bash
npm install @dryui/ui
```
### Use the UI package
```svelte
import { Button, Dialog, Card } from '@dryui/ui';
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css'; /* add for dark mode + system theme support */
Hello
Zero runtime deps. Native browser APIs.
.cards {
display: grid;
gap: var(--dry-space-4);
}
```
Recommended theme behavior:
- Default to `` so the UI follows the browser or OS color scheme.
- Use `` or `` only for explicit overrides.
- If you add a theme switcher, persist the user's explicit light/dark choice and keep system mode as the fallback.
### Headless Only
If you only need behaviour without styles:
```bash
npm install @dryui/primitives
```
```svelte
import { Dialog, Popover, Tabs } from '@dryui/primitives';
```
Advanced primitives are available via subpath exports:
```js
import { VirtualList } from '@dryui/primitives/virtual-list';
import { InfiniteScroll } from '@dryui/primitives/infinite-scroll';
import { RichTextEditor } from '@dryui/primitives/rich-text-editor';
import { Tour } from '@dryui/primitives/tour';
import { Marquee } from '@dryui/primitives/marquee';
import { QrCode } from '@dryui/primitives/qr-code';
import { CodeBlock } from '@dryui/primitives/code-block';
import { MarkdownRenderer } from '@dryui/primitives/markdown-renderer';
```
## Components
Accordion, Adjust, Alert, Alert Dialog, Alpha Slider, Aspect Ratio, Aurora, Avatar, Backdrop, Badge, Beam, Breadcrumb, Button, Button Group, Calendar, Card, Carousel, Chart, Chat Thread, Checkbox, Chip, Chip Group, Chromatic Aberration, Chromatic Shift, Clipboard, Code Block, Collapsible, Color Picker, Combobox, Command Palette, Container, Context Menu, Country Select, Data Grid, Date Field, Date Picker, Date Range Picker, Date Time Input, Description List, Diagram, Dialog, Displacement, Drag and Drop, Drawer, Drop Zone, Dropdown Menu, Field, Fieldset, File Select, File Upload, Flip Card, Float Button, Focus Trap, Format Bytes, Format Date, Format Number, Gauge, Glass, Glow, God Rays, Gradient Mesh, Halftone, Heading, Hotkey, Hover Card, Icon, Image, Image Comparison, Infinite Scroll, Input, Input Group, Kbd, Label, Link, Link Preview, List, Listbox, Logo Mark, Map, Markdown Renderer, Marquee, Mask Reveal, Mega Menu, Menubar, Multi Select Combobox, Navigation Menu, Noise, Notification Center, Number Input, Option Swatch Group, Pagination, Phone Input, Pin Input, Popover, Portal, Progress, Progress Ring, Prompt Input, QR Code, Radio Group, Range Calendar, Rating, Relative Time, Reveal, Rich Text Editor, Scroll Area, Scroll To Top, Segmented Control, Select, Separator, Shader Canvas, Sidebar, Skeleton, Slider, Spacer, Sparkline, Spinner, Splitter, Spotlight, Star Rating, Stepper, Svg, Table, Table Of Contents, Tabs, Tag, Tags Input, Text, Textarea, Time Input, Timeline, Toast, Toggle, Toggle Group, Toolbar, Tooltip, Tour, Transfer, Tree, Typing Indicator, Typography, Video Embed, Virtual List, Visually Hidden
## AI Integration
The entry point for working with DryUI is the CLI. Install `@dryui/cli`, start with bare `dryui` so it can walk you through editor integration and feedback, then use `dryui init` for new apps or `dryui install` / `dryui detect` for existing ones. Keep `dryui info`, `compose`, `review`, `diagnose`, and `doctor` in the loop while you work.
```bash
bun install -g @dryui/cli@latest
dryui # default onboarding entry point
dryui init my-app # scaffold a new SvelteKit + DryUI app
dryui install . # print an install plan for an existing project
dryui detect .
```
No global install? Prefix commands with `bunx @dryui/cli` or `npx -y @dryui/cli`.
The DryUI skill and MCP server are the editor integration layer on top of that CLI workflow. The skill teaches conventions (compound components, theming, CSS rules, accessibility), and MCP exposes the same discovery/validation loop inside supported editors with `ask` / `check`.
Per-tool editor setup (Claude Code, Codex, Gemini CLI, OpenCode, Cursor, Windsurf, Copilot, Zed) lives at https://dryui.dev/getting-started — do not copy install commands from this README; the web page is always up-to-date. The canonical source is [`apps/docs/src/lib/ai-setup.ts`](apps/docs/src/lib/ai-setup.ts); update it there instead of duplicating client setup here.
### From Source
If you've cloned the repo and want to use a local build instead of the npm package:
```bash
bun install
bun run --filter '@dryui/cli' build
bun run --filter '@dryui/mcp' build
```
Run the CLI locally with `node packages/cli/dist/index.js `.
For MCP clients, replace `"command": "npx", "args": ["-y", "@dryui/mcp"]` with `"command": "node", "args": ["packages/mcp/dist/index.js"]`.
## Development
This is a Bun monorepo.
```bash
bun install
```
### Scripts
```bash
# Build packages + docs production output
bun run build
# Run the docs site
bun run docs
# Build docs deps + docs site (same path CI deploy uses)
bun run build:docs
# Type-check everything
bun run check
# Run tests
bun run test
# Lint CSS rules (lint unit tests)
bun run check:lint:unit
# Full validation (check + test + build)
bun run validate
# Release validation gate (validate without browser tests)
bun run release:gate
# Local version + publish flow
bun run release
# CI-only direct-on-main release flow
bun run release:ci
# Generate component screenshots to tmp/ (requires Playwright)
bun run screenshots:components
```
### Project Structure
```
packages/
primitives/ # @dryui/primitives — headless components
ui/ # @dryui/ui — styled components
mcp/ # @dryui/mcp — MCP server + spec generator
cli/ # @dryui/cli — CLI tool
lint/ # @dryui/lint — CSS lint preprocessor
feedback/ # @dryui/feedback — feedback annotation UI
feedback-server/ # @dryui/feedback-server — feedback MCP backend
theme-wizard/ # @dryui/theme-wizard — theme generation library
plugin/ # @dryui/plugin — Claude Code + Codex + Gemini CLI plugin
apps/
docs/ # Documentation site (SvelteKit)
tests/
unit/ # Bun test + happy-dom
browser/ # Vitest + Playwright
```
### Generating llms.txt
The MCP package can generate an `llms.txt` file containing the full component spec in a format optimised for AI context:
```bash
bun run --filter '@dryui/mcp' generate-llms
```
## Design Principles
- **Zero-dependency core** — `@dryui/primitives` and `@dryui/ui` ship with no runtime dependencies beyond Svelte; every component uses native browser APIs (``, Popover API, CSS Anchor Positioning, `Intl`, Intersection Observer, Resize Observer, Web Animations API, etc.). Optional add-ons (`@dryui/theme-wizard`, `@dryui/feedback`) declare `lucide-svelte` as a peer for icons
- **Two-tier architecture** — headless primitives for full control, styled components for quick builds
- **Svelte 5 runes** — built entirely with `$state`, `$derived`, `$effect`, and `$props`
- **CSS variables** — all styling customisable via `--dry-*` custom properties
- **AI-ready** — MCP server and `llms.txt` give AI agents full spec access
## Acknowledgements
DRYui's design language is heavily influenced by [Practical UI](https://www.practical-ui.com/) by [Adham Dannaway](https://x.com/AdhamDannaway). The book's principles around spacing, colour, typography, hierarchy, and accessibility have shaped how every component looks and behaves out of the box. If you care about building interfaces that just _work_, it's well worth a read.
## Releasing
DryUI still uses Changesets for version intent and changelog generation, but release automation now runs directly on pushes to `main`: CI validates, versions packages, commits the release changes back to `main`, publishes to npm, pushes tags, and creates GitHub Releases.
See [RELEASING.md](./RELEASING.md) for the canonical release flow, manual release command, and npm token rotation guidance.
## License
MIT