For PrimeVue 4 · free and open source

Theme PrimeVue around your brand

Give it one color. See every component in every state, light and dark, and export a preset with only what you changed.

50
100
200
300
400
500
600
700
800
900
950

Checkbox

Radio

Switch

NewSuccessWarningDanger3

Changes saved.

Your brand color

Hex

Source on GitHub

See it, don’t guess

The Preset Studio editor on Button: its colors, shape and spacing on the left; every button variant in its default, hover, pressed and focus states on the right, in light and dark side by side.

Every state, no hovering
Default, hover, pressed and focus side by side, for every variant.
Light and dark together
Every color is set for both modes. Change it once, see both.
Click to edit
Click a button, a tag or a field in the preview to open its settings.

What you can count on

Correct by construction

Every token is checked against PrimeVue’s own engine. The export holds only what you changed:

Primary colorCustom #0f766e

Readable in light and dark

Checked in both modes, with a one-click fix. Try a pale yellow at the top.

Pair	Light	Dark
Primary button text	5.5:1	5.0:1
Body text	10.4:1	17.7:1
Muted text	4.8:1	6.9:1
Selected item	8.2:1	11.2:1
Primary on surface	5.5:1	5.0:1

Yours, and private

Open source under the MIT license
Your themes stay in your browser
Themes travel as a link or a file
A plain definePreset file, nothing extra to install

One color, all the way down

Your color replaces the palette and every reference stays, so it lands where Aura wants it.

Paletteprimary.500
Semanticprimary.color
Componentbutton.primary.background
On screen
Paletteprimary.500
Semanticprimary.color
Componenttoggleswitch.checkedBackground
On screen
Paletteprimary.100
SemanticUses the shade directly
Componenttag.primary.background
On screenNew
Paletteprimary.500
Semanticprimary.colorformField.focusBorderColor
Componentinputtext.focusBorderColor
On screen

Four themes to start from

Open one to keep going from there.

Checkbox
Radio
Switch
Harbor
Aura, deep blue, cool grays, rounded corners.
Ledger
Lara, green, warm grays, square corners, compact.
Kiln
Nora, burnt orange, neutral grays, default corners.
Tidal
Material, teal, soft corners, roomy.

What you take home

One definePreset file with only what you changed, and the setup for Nuxt or Vue. Or send the theme to a teammate as a link.

import { definePreset } from '@primeuix/themes'
import Aura from '@primeuix/themes/aura'

const MyPreset = definePreset(Aura, {
  semantic: {
    primary: {
      50: '#f0f9f8',
      100: '#d8ece9',
      200: '#b4d8d3',
      300: '#83bcb5',
      400: '#48958d',
      500: '#0f766e',
      600: '#00655e',
      700: '#00544e',
      800: '#00443f',
      900: '#043632',
      950: '#04221f'
    }
  }
})

export default MyPreset

// themes/theme.ts
import MyPreset from './my-preset'

// @primevue/nuxt-module expects { preset, options }, not a bare preset.
export default {
  preset: MyPreset,
  options: {
    darkModeSelector: 'system', // or a class, e.g. '.app-dark'
  },
}

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@primevue/nuxt-module'],
  primevue: {
    importTheme: { as: 'AppTheme', from: '~/themes/theme.ts' },
  },
})

// main.ts
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import App from './App.vue'
import MyPreset from './themes/my-preset'

createApp(App)
  .use(PrimeVue, {
    theme: {
      preset: MyPreset,
      options: {
        darkModeSelector: 'system', // or a class, e.g. '.app-dark'
      },
    },
  })
  .mount('#app')

The export for the choices at the top of this page.

Questions

Which versions does it work with?

Why not just ask an AI to write the preset?

Is it made by PrimeTek?

Theme PrimeVue around your brand

See it, don’t guess

Every state, no hovering

Light and dark together

Click to edit

What you can count on

Correct by construction

Readable in light and dark

Yours, and private

One color, all the way down

Four themes to start from

Harbor

Ledger

Kiln

Tidal

What you take home

Questions