Getting Started

To quickly start using Craft in a SvelteKit project, you can copy the templates/craft-sveltekit-app template from the victualler repo. Otherwise, you can install each dependency below and configure your project manually.

Craft Installation

Craft is separated into multiple packages that handle different areas of the design system. For Svelte component usage, you will want to install the styles, svelte components, and svelte icons packages. Run the following in your project. Substitute yarn add for your package manager of choice.

pnpm i -D @getprovi/craft-styles @getprovi/craft-svelte @getprovi/craft-svelte-icons @getprovi/craft-svelte-graphics

The @getprovi/craft-svelte-graphics is not available on NPM and is only available through the monorepo workspace.

All packages should point to workspace* version in the package.json if it is in the victualler monorepo.

Tailwind

Add the following to your package.json file and run the install for your package manager to install the necessary dependencies for TailwindCSS.

• “autoprefixer”: “^10.4.20”
• “tailwindcss”: “^3.4.13”
• “postcss”: “^8.4.47”

Config

If you are using TypeScript in your project, you can rename the tailwind.config.cjs to tailwind.config.ts and copy the following into it. Otherwise, you can use the JavaScript syntax and only update the content and presets properties.

import type { Config } from 'tailwindcss';
import { craftPreset } from '@getprovi/craft-styles';
export default {
	content: [
		'./src/**/*.{html,js,svelte,ts},',
		'./node_modules/@getprovi/craft-svelte/**/*.{html,js,svelte,ts}'
	],
	presets: [craftPreset]
} satisfies Config;

Otherwise, it can be a JavaScript file with the following content.

import { craftPreset } from '@getprovi/craft-styles';

export default {
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		'./node_modules/@getprovi/craft-svelte/dist/**/*.{html,js,svelte,ts}'
	],
	presets: [craftPreset]
};

PostCSS

Add the following to your postcss.config.js file.

import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default {
	plugins: [
		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
		tailwindcss(),
		//But others, like autoprefixer, need to run after,
		autoprefixer
	]
};

CSS & Fonts

Create the app.css file in the root of the src folder and add the following.

@tailwind utilities;

If you do not pull in the Craft stylesheet below into the app, you will need to load the fonts Craft uses. Add the font import to the top of a global CSS file.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Kanit&display=swap');

@tailwind utilities;

Stylesheet

In your topmost layout component or app.html file, you will want to import the Craft stylesheet. This will give you access to the global styles and typography. You will want to import the Craft stylesheet before the Tailwind stylesheet import.

<script>
	import '@getprovi/craft-styles/craft.css';
	import '../app.css';
</script>

Usage

Once you have all the configuration taken care of, ensure that you have a class=“craft” somewhere around your components and you are ready to jump to the Components documentation to start using the Svelte components.