Getting Started

Moth UI is a modern design system for building consistent, high-quality interfaces fast. It gives you reusable components, design tokens, and utilities so your UI stays cohesive without slowing you down.

Built on Svelte — chosen for its simplicity, tiny bundles, near-zero runtime, and code that feels like plain HTML/CSS/JS. Our mission: make beautiful interfaces quick and enjoyable to build.

Requirements

Moth UI needs svelte 5 or later. It works in SvelteKit and in any Vite + Svelte project.

Installation

Install with npm:

npm install moth-ui-svelte

Importing styles

Add this to your main Svelte file to enable Moth styling:

What the stylesheet does

Importing it once sets up everything the components need, so it's worth knowing what it changes:

  • Loads the fonts from Google Fonts. Outfit and Geist Mono are imported from fonts.googleapis.com. If your site has a Content Security Policy, allow fonts.googleapis.com (styles) and fonts.gstatic.com (font files). Offline, text falls back to the system font.

  • Styles the page globally. It sets the background, text color and font on html and body, removes their margin and padding, styles text selection, applies box-sizing: border-box to every element, and sets color-scheme: dark so scrollbars and native controls match.

  • Is dark only. Moth is designed for dark interfaces and has no light theme.

Importing components

Use this in any svelte file to import components:

Design Tokens

The foundation of Moth UI: reusable values for colors, spacing, typography, etc. Use them via CSS variables like var(--m-color-text). See the full list in the design tokens docs.

Components

Ready to use components — buttons, forms, navigation and more. Start with the Layout component to get your structure and spacing right from the beginning. See the full collection in the components documentation.