• 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

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()}

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

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