How to add Open Props to a SvelteKit application

Things you’ll need:

  • a SvelteKit project
  • open-props package
  • postcss-jit-props package


Set up your SvelteKit project:

  • Create a new SvelteKit project.
pnpm create svelte sveltekitchen
  • Follow the prompts.

  • Navigate to the project directory.

cd sveltekitchen
  • Install project dependencies.
pnpm i

Install Open Props:

  • Install the Open Props package
pnpm i -D open-props

Install PostCss JIT Props:

  • Install the PostCSS JIT Props package to ensure unused CSS variables are removed.
pnpm i -D postcss-jit-props

Configure PostCSS

  • Create a configuration file to use open-props and postcss-jit-props
const postcssJitProps = require('postcss-jit-props');
const openProps = require('open-props');
const config = {
	plugins: [

module.exports = config;

Serve and enjoy:

  • Utilize Open Props’ CSS variables in your components, ensuring that only the variables you actually use will be included.


Svelte Kitchen @ 2024