Get started

Ship a Material 3 app
before your coffee cools.

One Nuxt module gives you the whole system: a color scheme generated from a single seed, zero-runtime tokens compiled at build time, and 70+ components that already know about states, density and RTL.

Install the kit Browse components

Nuxt 4: Layer + module
MD3: Spec-aligned tokens
0 kB: Runtime theming cost

terminal

Rendered with the kit you just installed

Three steps

From empty folder to themed app

Nothing to wire by hand: the module registers components, generates the color schemes and exposes the SCSS aliases the tokens live in.

1
Install the module
One package brings the component layer, the token pipeline and the theme generator.
Terminal
```
npm i @pr0s1k/primetime-kit
```

Register it and pick a seed

Every color role is derived from the seed at build time — light, dark and both contrast levels included.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@pr0s1k/primetime-kit'],
  materialKit: {
    theme: {
      themes: [{ key: 'forest', name: 'Forest', color: '#2F6F4E' }],
      default: { palette: 'forest' },
    },
  },
})

Use the components

Everything under the `m` prefix is auto-imported — no imports, no registration, no wrapper components.

app.vue

<template>
  <m-layout>
    <m-layout-main>
      <m-container>
        <m-text-field
          v-model="email"
          label="Email"
          variant="outlined"
        />

        <m-button variant="filled">
          Continue
        </m-button>
      </m-container>
    </m-layout-main>
  </m-layout>
</template>

<script setup lang="ts">
const email = ref('')
</script>

Why it stays fast