Bloom

SvelteKit

The native path. Scaffold a SvelteKit app, drop in Bloom's tokens, and start composing with bloom-nx primitives — familiar API shapes on bloom-nx tokens.

1. Scaffold the app

Start with the official sv CLI. Pick the skeleton template, TypeScript, and your preferred extras (ESLint, Prettier).

Terminal 
pnpm dlx sv create my-prototype
cd my-prototype
pnpm install

2. Install dependencies

Runtime: bits-ui, Remix Icon, tailwind-variants. Dev: Geist fonts, Tailwind v4, tw-animate-css for the stock animation keyframes.

Terminal 
pnpm add bits-ui remixicon tailwind-variants tailwind-merge clsx
pnpm add -D @fontsource-variable/geist @fontsource-variable/geist-mono tailwindcss @tailwindcss/vite tw-animate-css

3. Wire tokens and fonts

Copy src/lib/tokens/theme.css and src/lib/tokens/motion.css from Bloom into your project, then import them from your global stylesheet. In SvelteKit the convention is a single layout.css imported from the root +layout.svelte.

src/routes/layout.css 
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'remixicon/fonts/remixicon.css';

@import '@fontsource-variable/geist';
@import '@fontsource-variable/geist-mono';

@import '$lib/tokens/theme.css';
@import '$lib/tokens/motion.css';

@custom-variant dark ([data-theme='dark'] &);

The @custom-variant dark declaration is Tailwind v4’s way of binding dark mode to data-theme="dark" on <html>. Bloom’s theme.svelte.ts writes that attribute.

4. Add primitives

Run bloom-nx init once to point the project at the bloom-nx registry, then bloom-nx add each primitive you need. init writes the components.json for you — baseColor: "neutral" and the bloom-nx registry — so every add lands components matching what Bloom ships.

Terminal 
pnpm dlx bloom-nx init
pnpm dlx bloom-nx add button card badge input switch

5. Sanity check

Drop a button into the root page. If it renders in Bloom purple with the right radius, the pipeline is clean.

src/routes/+page.svelte 
<script lang="ts">
	import { Button } from '$lib/components/ui/button';
</script>

<main class="grid min-h-dvh place-items-center">
	<Button>It works.</Button>
</main>

What next

  • Browse Components for the primitive inventory.
  • Read Theming to rebrand the palette to your own hue.
  • Flip Dark Mode and verify both themes before shipping.