Styling and layout

Style Solid components with CSS. You can use global stylesheets, CSS modules, custom properties, transitions, and animations.

Root stylesheet

The sample UI imports a single global stylesheet from index.tsx:

import './styles.css';

Put resets, shared colors and spacing, and fullscreen container styles here.

Fullscreen screens

For a screen that fills the game viewport:

.screen-fullscreen {
  min-height: 100vh;
  width: 100vw;
}

Use grid or flexbox to position menus, HUD elements, and panels.

Transparency

A transparent page background lets the game show through:

html,
body,
#root {
  margin: 0;
  min-height: 100%;
  background: transparent;
}

Give menus their own backgrounds so HUD screens can remain transparent.

Fonts

Ship fonts with your UI app and load them with @font-face:

@font-face {
  font-family: Inter;
  src: url('/fonts/Inter.woff2') format('woff2');
  font-display: swap;
}

Place this font at UI/public/fonts/Inter.woff2. Vite copies it into the production build.

CSS frameworks

Install the framework in UI/ and follow its Vite or PostCSS setup instructions. Restart the dev server after changing that configuration.

For dependency setup, see Adding npm packages.