Get started

Explains how to integrate Davidnet's Design System.
In your sveltekit project.

Prerequisites

Sveltekit ^5.0.0 project
NodeJS ^20.18.0
NPM ^9.2.0

Installation

Notice
Do the following in an sveltekit 5 project.
Create one using: npx sv create.

Step 1

Add the NPM package.

npm install @davidnet/svelte-ui

Step 2

Include the root styling in your app.html.

<link rel="stylesheet" href="https://design.davidnet.net/global.css" />

Step 3

Include core components in your +layout.svelte.

<script lang="ts">
	import { ThemeProvider, Toaster, ConnectivityCheck } from "@davidnet/svelte-ui";
</script>

<ThemeProvider />
<Toaster />
<ConnectivityCheck />
<slot />

Step 4

Add @davidnet/svelte-ui to Vite Optimize Exclude.

optimizeDeps: {
	exclude: ["@davidnet/svelte-ui"]
}

An full example how that snippet would fit inside vite.config.ts.

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
	plugins: [sveltekit()],
	optimizeDeps: {
		exclude: ["@davidnet/svelte-ui"]
	}
});

You are now ready to start using Davidnet Design System.

Extra Tools

The design system also features code quality guidelines.
These guidelines are represented trough ESLint and Prettier configs.
View the following pages:
DDS - ESLint
DDS - Prettier