Installation
Project Setup
Initialize a new SvelteKit project
$ npm create svelte@latest my-project $ cd my-project Setup TailwindCSS
$ npx svelte-add@latest tailwindcss Configure TailwindCSS with our recommended settings.
1
2
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
30
+
31
32
33
Install geist-ui-svelte
$ npm i geist-ui-svelte Import our CSS into `/routes/+layout.svelte`
1
2
3
+
4
5
6
Setup Dark Mode (Optional)
$ npm i mode-watcher Add ModeWatcher component to `/routes/+layout.svelte`
1
2
3
+
4
5
6
+
7
See additional docs for `mode-watcher` here . If you
want to see an example of how to implement dark mode switching see
here .
Now you're ready to start using our components!
Last Core Principals