For developers.

// packages/your-app/tailwind.config.ts
import type { Config } from 'tailwindcss';
import { tailwindPreset } from '@dashfi/svelte/design-system/tailwind/config';

const config: Config = {
	presets: [tailwindPreset],
	content: [
		'./src/**/*.{html,js,svelte,ts}',
		// Scan the lib source so Tailwind generates classes used by its components
		'../../libs/svelte-components/lib/src/lib/**/*.{html,js,svelte,ts}',
	]
};

export default config;

// packages/your-app/vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
	plugins: [tailwindcss(), sveltekit()],
	// Required — bundle lib code in SSR so Svelte 5 components compile correctly
	ssr: {
		noExternal: ['@dashfi/svelte']
	}
});

/* packages/your-app/src/app.css */
@import 'tailwindcss';
@import '@dashfi/svelte/styles/global.css';     /* HSL token layer + base resets */

/* Optional — scoped overrides for your app surface */
@theme {
	--color-brand: #2b605c;
	--color-brand-foreground: #ffffff;
}

<script lang="ts">
	import { Button } from '@dashfi/svelte/ui/button';
	import { Card, CardHeader, CardTitle, CardContent } from '@dashfi/svelte/ui/card';
</script>

<Card>
	<CardHeader>
		<CardTitle>First card</CardTitle>
	</CardHeader>
	<CardContent>
		<Button variant="brand">Hello, Dash</Button>
	</CardContent>
</Card>

# Add a new component to @dashfi/svelte
cd libs/svelte-components/lib

# Generate the directory: src/lib/ui/your-component/
#   your-component.svelte
#   your-component.stories.svelte
#   index.ts

# Re-export
echo "export { default as YourComponent } from './your-component.svelte';" \
	>> src/lib/ui/your-component/index.ts

# Build the lib (dashbook hot-reloads because of link: protocol)
pnpm build

# Open a stories file alongside — Storybook picks it up automatically