Noph UI

Material 3 Expressive components for Svelte

Themed from a single color, shipped without a single runtime dependency, and built for SvelteKit's remote functions.

Get started
Browse components
27
components
0
dependencies

Real components, right here

Slider

Drag it. The progress tile follows along at 65%.

Chips

2 of 3 selected

Text fields

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