Installation

Pick the tab that matches your stack. Every setup bundles its fonts locally and reads the same flavor attributes. Commands use pnpm; npm, Yarn and Bun work the same way.

Install the CSS package.
Terminal window
```
pnpm add @static-bloom/css
```

Import the full bundle: tokens, fonts, base styles, components and utilities.

@import '@static-bloom/css';

To take only some layers, declare the layer order first, then import the entry points you need:

@layer theme, base, components, utilities;
@import '@static-bloom/css/tokens.css';
@import '@static-bloom/css/fonts.css';
@import '@static-bloom/css/components.css';

Set a flavor on the document and use the sb-* classes.

<html data-flavor="midnight" data-theme="dark">
  <body>
    <button class="sb-btn">Connect</button>
  </body>
</html>

Without data-flavor, Midnight applies, and a system that prefers light gets Daybreak. To persist a visitor’s choice, use the Astro FlavorScript or Vue’s useFlavor.

Install Tailwind 4 with its Vite plugin (or CLI) and the theme.

pnpm add -D tailwindcss @tailwindcss/vite
pnpm add @static-bloom/tailwind

Import the theme after Tailwind in your stylesheet.

@import 'tailwindcss';
@import '@static-bloom/tailwind';

Use semantic utilities. They reference CSS variables, so flavors switch at runtime.

<html data-flavor="midnight" data-theme="dark">
  <body class="bg-canvas text-fg font-sans">
    <button class="bg-primary text-on-primary rounded-md glow-sm">Connect</button>
  </body>
</html>

See Tailwind setup for the theme-only entry and for opting out of Tailwind’s default colors.

Install the components, the theme they are styled with, and Tailwind.

pnpm add @static-bloom/vue @static-bloom/tailwind vue
pnpm add -D tailwindcss @tailwindcss/vite @vitejs/plugin-vue

Add the three-line stylesheet. The last line points Tailwind at the component sources.

@import 'tailwindcss';
@import '@static-bloom/tailwind';
@import '@static-bloom/vue/tailwind.css';

import { createApp } from 'vue'
import { StaticBloomPlugin } from '@static-bloom/vue'
import App from './App.vue'
import './style.css'

createApp(App).use(StaticBloomPlugin).mount('#app')

<template>
  <SbProvider>
    <SbFlavorSelect />
  </SbProvider>
</template>

More in Astro integration.

Install the plugin next to Starlight (peers: astro 7, @astrojs/starlight 0.42).
Terminal window
```
pnpm add @static-bloom/starlight
```

Add it to Starlight’s plugins.

import { defineConfig } from 'astro/config'
import starlight from '@astrojs/starlight'
import staticBloomStarlight from '@static-bloom/starlight'

export default defineConfig({
  integrations: [
    starlight({
      title: 'My docs',
      plugins: [staticBloomStarlight()],
    }),
  ],
})

The plugin themes the whole site, swaps the theme picker for a flavor picker and generates code themes. More in Starlight setup.

Build the interface as a Vite app (the Vue setup above) with relative asset URLs.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({ base: './', plugins: [vue(), tailwindcss()] })

Start in Blackout, the highest-contrast flavor over game imagery.
index.html
```
<html lang="en" data-flavor="blackout" data-theme="dark"></html>
```
Tell the client the page is ready once it has mounted. The bridge only exists in the game, so type it as optional.
src/open77.d.ts
```
interface Window {
  Open77?: { ready(): void }
}
```
src/main.ts
```
createApp(App).use(StaticBloomPlugin).mount('#app')
window.Open77?.ready()
```

Ship dist/ in a resource whose manifest declares the page and its files.

resource "my_hud"
version "1.0.0"
web_ui_page "dist/index.html"
web_files { "dist/**" }
client_script "client.lua"