Getting Started

A quick guide on how to setup Mono for use in your app.

Setup SvelteKit

If you already have a Svelte app ready, you can skip this step. We recommend using SvelteKit:

yarn create svelte my-app
cd my-app


Mono is available on npm. Run:

yarn add --dev mono-svelte

Setup TailwindCSS

Mono uses TailwindCSS for its components. We recommend using TailwindCSS in your project if you’re going to use this library.


yarn add --dev tailwindcss postcss autoprefixer

Config file

To create the default config file, run:

npx tailwindcss init -p

Mono needs a little more configuration to get it working. Use this config:

/** @type {import('tailwindcss').Config} */
export default {
	content: [
	theme: {
		extend: {
			colors: {
				primary: {
					100: '#f1f5f9',
					900: '#0f172a'
	plugins: []