Pick one colour. Get a whole Material 3 app.

Vuance UI is a Nuxt module: components, a theme generated from a single seed colour, and a layout that holds up from phone to desktop. It is still pre-alpha — minor versions can break the API, and every changelog says exactly how.

Get started Browse components

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@pr0s1k/primetime-kit'],
  materialKit: {
    theme: {
      themes: [{ key: 'brand', name: 'Brand', color: '#386A20' }],
      default: { palette: 'brand' },
    },
  },
})

Pick one colour

The whole scheme follows, light and dark

Motion

Springs, not durations

Components

Notify me

One layout

Bar → rail → drawer, phone to desktop

What it does today

Three things the kit already handles for you, each with the line of code that proves it.

A full scheme from one colour

Light, dark and three contrast levels are generated from your seed. The palette is rendered on the server and remembered in a cookie, so the first paint is already in the right theme.

themes: [{ key: 'brand', name: 'Brand', color: '#386A20' }]

States compiled, not computed

Hover, pressed, focus and disabled come from each component's token map and are compiled into static CSS. There are no runtime colour variables to keep in sync.

hover 8% · pressed 12% · resolved at build time

One layout for every window

Rails, headers and drawers register with the layout and negotiate space, so the same page works from a 320px phone to a wide desktop without a second shell.

<m-layout> · <m-layout-aside> · useBreakpoint()

What's new

Vuance ships in small releases, and every one is written up — what changed, what broke, how to migrate.

Latest release · Sep 30, 2026v0.5.0Spring motion, one selection family and fields that notch without a patchShape morphs move on springs, MDropdown becomes the base of the selection family with MAutocomplete built on it, and outlined fields cut a real gap in their border instead of painting a patch behind the label — while every field state becomes a BEM modifier.

73components documented

6releases shipped

Next up

Skeleton loaders for every component
The alpha release
The XR / 3D renderer

Full changelog

Tokens live next to the component

Every component owns a Sass token map. The button states shown here come straight from it and are resolved when the kit builds.

Five states per variant: enabled, hover, focus, pressed, disabled
State layers mixed at 8% and 12%, as the Material 3 spec says
Zero runtime colour variables for component states

Button tokens

Layout that negotiates space

The rail, header and content share one registry instead of fighting over fixed offsets. Resize the window and nothing overlaps.

Rails, headers and drawers claim space instead of hard-coding offsets
Six named breakpoints out of the box, plus any you add in nuxt.config
useBreakpoint() gives is / more / less maps for every breakpoint

All components

Overlays that hand focus back

Menus, sheets and confirm-edit share one lifecycle: focus stays inside, Escape closes, focus returns to the trigger, and the markup renders on the server.

Focus trapped inside and returned to the trigger on close
Dismissal and stacking follow one set of rules across menus, sheets and dialogs
Rendered on the server, so nothing jumps on hydration

Confirm edit

Try it in a Nuxt app

Install the module, add it to nuxt.config and pick a seed colour. It is pre-alpha, so pin the version you test against.

npm i @pr0s1k/primetime-kit

Get started