Getting Started

This guide spins up a fresh SvelteKit project, adds a couple of performative-ui-svelte components, and wires up a tiny demo page. Components are installed as owned source via the shadcn-svelte registry, so your app keeps the Tailwind build, theme tokens, and the component files themselves.

Requirements: Node 18+, Svelte 5, and Tailwind CSS v4. Pick your package manager in any command block below — they all stay in sync.

1 · Create a SvelteKit project

Use the official sv CLI. When prompted, choose the SvelteKit minimal template, TypeScript, and add the Tailwind CSS plugin — that wires up Tailwind v4 for you.

# Scaffold a fresh SvelteKit app (Svelte 5)
npx sv create my-app

# Pick: SvelteKit minimal · TypeScript · Tailwind CSS
cd my-app
npm install

2 · Initialize shadcn-svelte

Create a components.json so the registry knows where to drop files. When prompted for your global stylesheet, point it at src/app.css (the Tailwind entry imported from src/routes/+layout.svelte) — the next step overwrites that file with the performative theme tokens and the shared animation keyframes.

# Create components.json (point the global CSS prompt at src/app.css)
npx shadcn-svelte@latest init

3 · Add a few components

Pull just what the demo needs. Each command drops an owned-code component into src/lib/components/ and brings its theme + utils along on first run. Swap the slug for any entry in the registry.

# Pull owned-code components from the registry
npx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/button.json
npx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/gradient-text.json
npx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/sparkle.json

4 · Build a demo page

Keep it deliberately small — three components is plenty to look like you raised a Series B. Drop this into src/routes/+page.svelte:

<script lang="ts">
	import Button from "$lib/components/Button.svelte";
	import GradientText from "$lib/components/GradientText.svelte";
	import Sparkle from "$lib/components/Sparkle.svelte";
</script>

<main style="display:grid;place-items:center;min-height:100vh;gap:1.5rem;text-align:center">
	<h1 style="font-size:2.5rem;font-weight:700">
		Ship <GradientText>agentic workflows</GradientText> <Sparkle />
	</h1>

	<Button variant="glow" sparkle>Generate</Button>
</main>

5 · Run it

Start the dev server and open the demo:

npm run dev -- --open

That's the whole loop. Browse the sidebar for the other components and copy them in the same way.