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

Don't Repeat Yourself

160+ components and theme controls, plus a CLI, MCP, and feedback engine to keep AI on track.

100% free & open-source.

bun install -g @dryui/cli@latest && dryui

Supported in

Claude Code Codex Gemini CLI OpenCode Copilot Cursor Windsurf Zed

or configure manually.

What's inside

Components, tokens, and a live feedback loop to your agent.

160 Components
0 Runtime deps
300+ Theme tokens
ContainerAppFrameSeparatorScrollAreaSplitterSpacerLinkBreadcrumbTabsPaginationSidebarNavigationMenuMegaMenuMenubarAccordionCollapsibleTreeStepperTableOfContentsToolbarCardTextHeadingListDescriptionListTimelineMarkdownRendererCodeBlockChatThreadKbdMarqueeTypographyTableDataGridChartSparklineGaugeDiagramMapQRCodeFormatNumberFormatBytesFormatDateRelativeTimeInfiniteScrollVirtualListNumericImageAvatarIconIconSwapAspectRatioVideoEmbedCarouselImageComparisonFlipCardLogoMarkInputTextareaNumberInputPhoneInputCheckboxRadioGroupSelectComboboxMultiSelectComboboxListboxSliderAlphaSliderColorPickerDateFieldDatePickerDateRangePickerDateTimeInputTimeInputCalendarRangeCalendarFileSelectFileUploadDropZonePromptInputRichTextEditorPinInputTagsInputInputGroupFieldFieldsetLabelButtonButtonGroupToggleToggleGroupThemeToggleChipChipGroupSegmentedControlOptionPickerRatingStarRatingTransferClipboardDragAndDropFloatButtonScrollToTopDialogAlertDialogDrawerPopoverHoverCardTooltipDropdownMenuContextMenuCommandPaletteNotificationCenterLinkPreviewTourBackdropAlertToastBadgeTagProgressProgressRingSkeletonSpinnerTypingIndicatorAuroraGlowShimmerRevealSpotlightBeamBorderBeamGlassNoiseGradientMeshAdjustChromaticAberrationChromaticShiftDisplacementGodRaysHalftoneMaskRevealShaderCanvasEnterExitStaggerHotkeyFocusTrapPortalSvgVisuallyHidden
  • MCP server

    ask before writing, check after

  • CLI

    dryui for setup, lookup, tokens, and feedback

  • Lint preprocessor

    CSS grid and container queries, enforced at build time

  • Theme Wizard

    One brand colour, a full --dry-* token palette

  • Live Feedback

    Annotate the running app, your agent reads it via MCP

  • Diagram engine

    Node-and-edge renderer, same one powering this page

Yes, we have light and dark modes.

How DryUI compares

A zero-dependency library, free and open source, wired to your agent via MCP.

Figma Make

Figma's AI-to-code, inside the editor.

  • Prompt → UI screens in Figma
  • AI-credit metered plans
  • Generated code, not a library
Pricing Est. $15–$90 / mo

A component library, not a generator.

  • Production components, not mockups
  • Zero runtime dependencies
  • Maintained library, no lock-in
Pricing Free

You just need an AI agent (free local ones work fine).

How DryUI works

Prompt in. UI out. Feedback loops straight back to your agent.

AI Agent
Live Feedback Mark up the running app. Your agent reads it instantly via MCP.
You Write a prompt
DryUI MCP Look up components
DryUI Linter Lint component output
Your App Render the UI

This is the <Diagram /> component. Drop it into your app.

Under the hood

Why we built DryUI on Svelte 5 and SvelteKit, not React.

Opinionated

One framework, one way to do things. Runes for state, scoped styles for CSS, file-based routing. No "pick your stack" meeting.

Compiler-first

Svelte compiles to plain DOM updates. No virtual DOM, no runtime tax. DryUI hooks into that compile step to lint your code before it ships.

Batteries included

SvelteKit ships routing, SSR, endpoints, forms, and transitions. The React equivalent is half a dozen libraries you wire together yourself.

One path for agents

React's ecosystem sprawls across Redux, Zustand, Tailwind, CSS-in-JS, Next, Remix, and TanStack. Too much choice and disparate deps confuse LLMs. Svelte gives them one obvious path.

Learning a new framework is a problem of the past. Your agent already speaks Svelte.

Still here?

Install the plugin, wire it to your agent, and start building.

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