{"id":48748315,"url":"https://github.com/rob-balfre/dryui","last_synced_at":"2026-05-16T00:24:28.623Z","repository":{"id":349636279,"uuid":"1203265886","full_name":"rob-balfre/dryui","owner":"rob-balfre","description":"160+ components and theme controls, plus a CLI, MCP, and feedback engine to keep AI on track.","archived":false,"fork":false,"pushed_at":"2026-05-13T00:34:14.000Z","size":192615,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-13T01:39:45.920Z","etag":null,"topics":["claude","claude-code","codex","svelte","sveltekit","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://dryui.dev","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rob-balfre.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE.md","maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-04-06T22:11:21.000Z","updated_at":"2026-05-13T00:34:18.000Z","dependencies_parsed_at":"2026-04-19T07:03:21.010Z","dependency_job_id":null,"html_url":"https://github.com/rob-balfre/dryui","commit_stats":null,"previous_names":["rob-balfre/dryui"],"tags_count":272,"template":false,"template_full_name":null,"purl":"pkg:github/rob-balfre/dryui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-balfre%2Fdryui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-balfre%2Fdryui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-balfre%2Fdryui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-balfre%2Fdryui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rob-balfre","download_url":"https://codeload.github.com/rob-balfre/dryui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rob-balfre%2Fdryui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33085577,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T20:25:35.270Z","status":"ssl_error","status_checked_at":"2026-05-15T20:25:34.732Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["claude","claude-code","codex","svelte","sveltekit","ui","ui-components"],"created_at":"2026-04-12T14:00:46.151Z","updated_at":"2026-05-16T00:24:28.609Z","avatar_url":"https://github.com/rob-balfre.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DRYui\n\nZero-dependency Svelte 5 core. Headless primitives. Styled defaults. AI-ready. Optional add-ons for theme generation and feedback.\n\n## Packages\n\n| Package               | Runtime deps                 | Description                                                                                         |\n| --------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------- |\n| `@dryui/primitives`   | none (svelte peer only)      | Headless, unstyled components built on native browser APIs                                          |\n| `@dryui/ui`           | `@dryui/primitives` + svelte | Styled production-ready components with CSS variables theming                                       |\n| `@dryui/mcp`          | —                            | MCP server for lookup, source retrieval, planning, validation, theme diagnosis, and workspace audit |\n| `@dryui/cli`          | —                            | CLI tool for setup snippets, planning, lookup, validation, and workspace audit                      |\n| `@dryui/lint`         | —                            | Svelte preprocessor enforcing CSS grid-only layout, container queries, no flexbox/inline styles     |\n| `@dryui/theme-wizard` | `lucide-svelte` (peer)       | Optional add-on: guided theme generation from a brand color (uses `lucide-svelte` for wizard icons) |\n| `@dryui/feedback`     | `lucide-svelte` (peer)       | Optional add-on: feedback annotation UI (uses `lucide-svelte` for toolbar icons)                    |\n\nThe core runtime (`@dryui/primitives` + `@dryui/ui`) has no runtime dependencies beyond Svelte. Add-on packages may declare peer deps — those are listed above.\n\n## Quick Start\n\n### Start with the CLI\n\n```bash\nbun install -g @dryui/cli@latest\ndryui\n```\n\nNo global install? Prefix commands with `bunx @dryui/cli` or `npx -y @dryui/cli`.\n\n### Install the UI package\n\n```bash\nnpm install @dryui/ui\n```\n\n### Use the UI package\n\n```svelte\n\u003cscript\u003e\n\timport { Button, Dialog, Card } from '@dryui/ui';\n\timport '@dryui/ui/themes/default.css';\n\timport '@dryui/ui/themes/dark.css'; /* add for dark mode + system theme support */\n\u003c/script\u003e\n\n\u003cdiv class=\"cards\"\u003e\n\t\u003cCard.Root\u003e\n\t\t\u003cCard.Header\u003e\n\t\t\t\u003ch3\u003eHello\u003c/h3\u003e\n\t\t\u003c/Card.Header\u003e\n\t\t\u003cCard.Content\u003e\n\t\t\t\u003cp\u003eZero runtime deps. Native browser APIs.\u003c/p\u003e\n\t\t\u003c/Card.Content\u003e\n\t\u003c/Card.Root\u003e\n\u003c/div\u003e\n\n\u003cstyle\u003e\n\t.cards {\n\t\tdisplay: grid;\n\t\tgap: var(--dry-space-4);\n\t}\n\u003c/style\u003e\n```\n\nRecommended theme behavior:\n\n- Default to `\u003chtml class=\"theme-auto\"\u003e` so the UI follows the browser or OS color scheme.\n- Use `\u003chtml data-theme=\"light\"\u003e` or `\u003chtml data-theme=\"dark\"\u003e` only for explicit overrides.\n- If you add a theme switcher, persist the user's explicit light/dark choice and keep system mode as the fallback.\n\n### Headless Only\n\nIf you only need behaviour without styles:\n\n```bash\nnpm install @dryui/primitives\n```\n\n```svelte\n\u003cscript\u003e\n\timport { Dialog, Popover, Tabs } from '@dryui/primitives';\n\u003c/script\u003e\n```\n\nAdvanced primitives are available via subpath exports:\n\n```js\nimport { VirtualList } from '@dryui/primitives/virtual-list';\nimport { InfiniteScroll } from '@dryui/primitives/infinite-scroll';\nimport { RichTextEditor } from '@dryui/primitives/rich-text-editor';\nimport { Tour } from '@dryui/primitives/tour';\nimport { Marquee } from '@dryui/primitives/marquee';\nimport { QrCode } from '@dryui/primitives/qr-code';\nimport { CodeBlock } from '@dryui/primitives/code-block';\nimport { MarkdownRenderer } from '@dryui/primitives/markdown-renderer';\n```\n\n## Components\n\nAccordion, 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\n\n## AI Integration\n\nThe 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.\n\n```bash\nbun install -g @dryui/cli@latest\ndryui                # default onboarding entry point\ndryui init my-app    # scaffold a new SvelteKit + DryUI app\ndryui install .      # print an install plan for an existing project\ndryui detect .\n```\n\nNo global install? Prefix commands with `bunx @dryui/cli` or `npx -y @dryui/cli`.\n\nThe 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`.\n\nPer-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.\n\n### From Source\n\nIf you've cloned the repo and want to use a local build instead of the npm package:\n\n```bash\nbun install\nbun run --filter '@dryui/cli' build\nbun run --filter '@dryui/mcp' build\n```\n\nRun the CLI locally with `node packages/cli/dist/index.js \u003ccommand\u003e`.\n\nFor MCP clients, replace `\"command\": \"npx\", \"args\": [\"-y\", \"@dryui/mcp\"]` with `\"command\": \"node\", \"args\": [\"packages/mcp/dist/index.js\"]`.\n\n## Development\n\nThis is a Bun monorepo.\n\n```bash\nbun install\n```\n\n### Scripts\n\n```bash\n# Build packages + docs production output\nbun run build\n\n# Run the docs site\nbun run docs\n\n# Build docs deps + docs site (same path CI deploy uses)\nbun run build:docs\n\n# Type-check everything\nbun run check\n\n# Run tests\nbun run test\n\n# Lint CSS rules (lint unit tests)\nbun run check:lint:unit\n\n# Full validation (check + test + build)\nbun run validate\n\n# Release validation gate (validate without browser tests)\nbun run release:gate\n\n# Local version + publish flow\nbun run release\n\n# CI-only direct-on-main release flow\nbun run release:ci\n\n# Generate component screenshots to tmp/ (requires Playwright)\nbun run screenshots:components\n```\n\n### Project Structure\n\n```\npackages/\n  primitives/       # @dryui/primitives — headless components\n  ui/               # @dryui/ui — styled components\n  mcp/              # @dryui/mcp — MCP server + spec generator\n  cli/              # @dryui/cli — CLI tool\n  lint/             # @dryui/lint — CSS lint preprocessor\n  feedback/         # @dryui/feedback — feedback annotation UI\n  feedback-server/  # @dryui/feedback-server — feedback MCP backend\n  theme-wizard/     # @dryui/theme-wizard — theme generation library\n  plugin/           # @dryui/plugin — Claude Code + Codex + Gemini CLI plugin\n\napps/\n  docs/             # Documentation site (SvelteKit)\n\ntests/\n  unit/             # Bun test + happy-dom\n  browser/          # Vitest + Playwright\n```\n\n### Generating llms.txt\n\nThe MCP package can generate an `llms.txt` file containing the full component spec in a format optimised for AI context:\n\n```bash\nbun run --filter '@dryui/mcp' generate-llms\n```\n\n## Design Principles\n\n- **Zero-dependency core** — `@dryui/primitives` and `@dryui/ui` ship with no runtime dependencies beyond Svelte; every component uses native browser APIs (`\u003cdialog\u003e`, 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\n- **Two-tier architecture** — headless primitives for full control, styled components for quick builds\n- **Svelte 5 runes** — built entirely with `$state`, `$derived`, `$effect`, and `$props`\n- **CSS variables** — all styling customisable via `--dry-*` custom properties\n- **AI-ready** — MCP server and `llms.txt` give AI agents full spec access\n\n## Acknowledgements\n\n\u003ca href=\"https://www.practical-ui.com/\"\u003e\n  \u003cimg src=\"https://www.practical-ui.com/wp-content/uploads/2022/04/practical-ui-logo.svg\" alt=\"Practical UI\" height=\"48\" /\u003e\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\nDRYui'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.\n\n## Releasing\n\nDryUI 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.\n\nSee [RELEASING.md](./RELEASING.md) for the canonical release flow, manual release command, and npm token rotation guidance.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frob-balfre%2Fdryui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frob-balfre%2Fdryui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frob-balfre%2Fdryui/lists"}