Guide

Neo-Retro

An oxymoronic design system: not modern, yet not old-school.

A UI component registry for Svelte, based on shadcn-svelte.

1. Initialization

Create a components.json file in your project root with the following configuration.

{
	"$schema": "https://shadcn-svelte.com/schema.json",
	"tailwind": {
		"css": "src/routes/layout.css",
		"baseColor": "neutral"
	},
	"aliases": {
		"components": "$lib/components",
		"utils": "$lib/utils",
		"ui": "$lib/components/ui",
		"hooks": "$lib/hooks",
		"lib": "$lib"
	},
	"typescript": true,
	"registry": "https://neo-retro.zurat.dev/r"
}

Once saved, run the initialization command:

bun x shadcn-svelte init

2. Add Components

Run the add command to choose which components to install. You can press a to select all of them at once.

bun x shadcn-svelte add

3. Setup Layout & Styles

Import and wrap your application in the ThemeInit component in your main layout file, e.g., src/routes/+layout.svelte.

<script lang="ts">
  import { ThemeInit, ThemePicker } from '$lib/components/ui/style';

  let { children } = $props();
</script>

<ThemeInit>
  <div class="fixed right-4 top-4 z-50">
    <ThemePicker />
  </div>
  {@render children?.()}
</ThemeInit>