Geist

This is a Svelte implementation of the Geist Design System by Vercel.

Notes

• Work in progress.
• Not affiliated with Vercel.
• Not a component library.
• Will try and keep the API's as close to the original as possible.
• Built with shadcn-svelte

Setup

1. Initialize SvelteKit:

pnpm dlx sv create
# add tailwind, prettier, eslint

2. Copy Config Files:

Copy app.css to src/app.css

Copy tailwind.config.ts to tailwind.config.ts

Install tailwind plugins:

pnpm add -D @pyncz/tailwind-mask-image @tailwindcss/typography tailwindcss-animate

3. Setup SVG plugin:

Install plugin:

pnpm add -D @poppanator/sveltekit-svg

Add plugin in vite.config.ts:

+import svg from '@poppanator/sveltekit-svg';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		sveltekit(),
+		svg()
	]
});

💡 Tip

For Typescript support of file.svg?component, add this import to any .d.ts file in your project path:

+ import '@poppanator/sveltekit-svg/dist/svg';

4. Install fonts

pnpm add -D @fontsource/geist-sans @fontsource/geist-mono

5. Setup Theming

pnpm add -D mode-watcher

Add <ModeWatcher/> to src/routes/+layout.svelte

<script lang="ts">
+	import { ModeWatcher } from 'mode-watcher';
	import '../app.css';
	let { children } = $props();
</script>

+<ModeWatcher/>
{@render children()}

Add components with jsrepo

We have set up jsrepo so that you can install our components just like shadcn/ui.

Setup jsrepo:

pnpm dlx jsrepo init --project --repos github/shyakadavis/geist

Configure paths in jsrepo.json:

{
	"$schema": "https://unpkg.com/[email protected]/schemas/project-config.json",
	"repos": ["github/shyakadavis/geist"],
	"includeTests": false,
	"watermark": true,
	"formatter": "prettier",
	"paths": {
		"*": "./src/lib/ts/blocks",
+       "ui": "$lib/components/ui",
+       "icons": "$lib/assets/icons",
+       "lib": "$lib/"
	}
}

Add components:

# list components
pnpm dlx jsrepo add

# add specific component
pnpm dlx jsrepo add ui/avatar

Contributing

If you would like to contribute, please read the CONTRIBUTING.md file to get started.