Noph UI - The Ultimate Material 3 Expressive UI Library for Svelte

Noph UI is a UI library for Svelte that follows the Material 3 Expressive guidelines. It gives you the buttons, fields, navigation and feedback components a real app needs, with theming, dark mode and accessibility already handled.

Why Noph UI

Server side rendering Components render to HTML on the server, so the first paint does not wait for JavaScript. Good for load times, good for search engines.

Remote functions ready Text fields, selects, checkboxes, autocompletes and date pickers take an issues prop shaped exactly like a SvelteKit remote form's validation errors, so they wire straight in without an adapter.

Dynamic theming Material 3 color roles are plain CSS variables. Pick a source color and every component follows, at runtime if you want.

Zero dependencies One package, nothing else pulled in behind your back. Your users download components, not a framework on top of a framework.

Expressive motion Springy shape morphs, ripples and wavy progress from the Material 3 Expressive spec. All of it steps aside when a visitor prefers reduced motion.

Accessible by default Components build on native elements, so roles, labels, keyboard navigation and focus rings come with them.

Light and dark The default theme ships both color schemes and follows the system setting, or whatever setting you put in charge.

One color, a whole theme

The default theme is a set of Material 3 color roles written as CSS variables. Use the palette button in the header to pick a source color and watch this page recolor, then copy the generated theme straight into your project.

Primary --np-color-primary

Primary container --np-color-primary-container

Secondary container --np-color-secondary-container

Tertiary --np-color-tertiary

Tertiary container --np-color-tertiary-container

Surface variant --np-color-surface-variant

Error --np-color-error

Surface --np-color-surface-container-highest

Start in two minutes

npm install noph-ui

Import the default theme once, in your root layout.

import 'noph-ui/defaultTheme'

Then import a component and drop it into your markup.

<script>
	import { Button } from 'noph-ui'
</script>

<Button variant="filled">Get started</Button>

The quick start covers theming, dark mode and typography in a few more lines.

Build something expressive

Install the package, import the theme and ship a Material 3 interface that renders on the server and feels alive in the browser.

Get started

View on GitHub