Noph UI

Material 3 Expressive components for Svelte

Pick one source color and all 54 Material 3 color roles follow, in light and dark. Components use the springy motion of the Expressive spec.

Get started
  • Full Material 3 Expressive coverage
  • Built for remote functions
  • Zero dependencies

Real components, right here

Now playing
Expressive Motion Tonal Palette ยท 0:48 / 3:34

Button group Icon button Progress Slider Search Tooltip
Inbox
3

3 unread. Open one to read it.

Badge Menu Button Switch
Toolbar

Every press lands on real state.

Button group Icon button Tabs
Reserve a table

Date and time picker Select Split button Snackbar
Search the docs

Filters

Autocomplete Chip Text field Sheet
Always loading

Progress Loading indicator

Noph UI is a UI library for Svelte that follows the Material 3 Expressive guidelines. It has the buttons, fields, navigation and feedback components an app needs, with theming, dark mode and accessibility built in.

Why Noph UI

The whole spec, covered Every component family in Material 3 Expressive is here: buttons, FABs and split buttons, text fields and pickers, navigation bars, rails and drawers, sheets, snackbars and more.
Remote functions ready Text fields, selects, checkboxes, autocompletes and date pickers take an issues prop in the same shape as the validation errors of a SvelteKit remote form, so you can pass them in without an adapter.
Dynamic theming Material 3 color roles are plain CSS variables. Pick a source color and every component follows. This also works at runtime.
Zero dependencies One package with no other dependencies. Your users download only the components.
Expressive motion Springy shape morphs, ripples and wavy progress from the Material 3 Expressive spec. All of it respects a visitor's reduced motion setting.
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 has both color schemes. It follows the system setting, or a setting you control.

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. This page changes to match. Then copy the generated theme 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 use it in 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 build a Material 3 interface that renders on the server.

Get started
View on GitHub