Geist

• 正在开发中。
• 与 Vercel 无关联。
• 不属于组件库。
• 会尽力让 API 与原版保持尽可能一致。
• 使用 shadcn-svelte 构建。

1. 初始化 SvelteKit：

pnpm dlx sv create
# add tailwind, prettier, eslint

2. 复制配置文件：

将 app.css 复制到 src/app.css

将 tailwind.config.ts 复制到 tailwind.config.ts

安装 tailwind 插件：

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

3. 设置 SVG 插件：

安装插件：

pnpm add -D @poppanator/sveltekit-svg

在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()
	]
});

💡 提示

若要在 file.svg?component 中支持 TypeScript，请在项目路径下的任意 .d.ts 文件中添加此导入语句：

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

4. 安装字体

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

5. 设置主题

pnpm add -D mode-watcher

将 <ModeWatcher/> 加到 src/routes/+layout.svelte 上

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

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

我们已经搭建了 jsrepo，这样您就可以像使用shadcn/ui那样安装我们的组件。

设置 jsrepo：

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

在jsrepo.json中配置路径：

{
	"$schema": "https://unpkg.com/jsrepo@1.36.0/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/"
	}
}

添加组件：

# list components
pnpm dlx jsrepo add

# add specific component
pnpm dlx jsrepo add ui/avatar

如果您希望做出贡献，请先阅读 CONTRIBUTING.md] 文件以了解入门方法。