The Quaff class

Quaff.init({ expressive: true });

A plain object works for fixed settings. For runtime changes, pass a $state object or getters. This applies to expressive, rtl, language, locale, and translations.

import { Quaff } from "@quaffui/quaff";
import frFR from "@quaffui/quaff/locales/fr-FR";

Quaff.init({ language: frFR });

Each pack is a separate import, so unused languages stay out of your bundle. Available BCP 47 locales are ar-SA, bn-BD, cs-CZ, da-DK, de-DE, el-GR, en-US, es-ES, fa-IR, fi-FI, fil-PH, fr-FR, he-IL, hi-IN, hu-HU, id-ID, it-IT, ja-JP, ko-KR, mr-IN, ms-MY, nb-NO, nl-NL, pl-PL, pt-BR, pt-PT, ro-RO, ru-RU, sv-SE, sw-KE, ta-IN, te-IN, th-TH, tr-TR, uk-UA, ur-PK, vi-VN, zh-CN, and zh-TW.

Use locale to override regional formatting, or translations for optional wording changes; omitted entries keep the selected pack's text. Existing component props such as locale, labels, cancelLabel, and noOptionText take precedence. Custom packs use the exported QuaffLanguage type.

For language switching, pass a $state configuration object to Quaff.init() once, then update its language property. When configuration comes from props, use getters so it stays current. Keep the same initial configuration for server rendering and hydration, and set your page's lang and dir attributes to match your application.

Quaff.init({ rtl: true });

See Right-to-left layouts for setup, local overrides, and live examples.

Quaff.screen.width;      // Viewport width in CSS pixels
Quaff.screen.height;     // Viewport height in CSS pixels
Quaff.screen.name;       // "xs" | "sm" | "md" | "lg" | "xl"
Quaff.screen.sizes;      // { sm: 600, md: 840, lg: 1200, xl: 1600 }
Quaff.screen.md;         // Only md: 840px up to, but excluding, 1200px
Quaff.screen.lt.md;      // Below md: less than 840px
Quaff.screen.gt.md;      // Above md: at least 1200px
Quaff.screen.ready;      // Whether viewport measurements are available
Quaff.screen.navigation; // "navbar" below 600px, otherwise "railbar"
Quaff.screen.twoPane;    // true from 840px

const expanded = $derived(!Quaff.screen.lt.md); // md or wider: at least 840px

The xs, sm, md, lg, and xl flags each match exactly one size class. lt supports sm/md/lg/xl; gt supports xs/sm/md/lg. gt.md means above the entire md class; !lt.md includes md from 840px.

Until the root layout mounts, width and height are 0, name is "xs", and ready is false. Live viewport updates begin on mount. This keeps the initial server render and hydration consistent.

Quaff.getScreen(width, height?) returns a ScreenState with the same properties for a container; height defaults to 0. It is pure and needs no Quaff.init(). Derive it from a measured width with $derived. A valid width, including 0, makes ready true; undefined or invalid widths leave it false. See adaptive layouts for container sizing, navigation, and list/detail examples.

const screen = $derived(Quaff.screen);

screen.width;                         // Was breakpoints.currentWidth
screen.name;                          // Was breakpoints.current
screen.sizes.md;                      // Was breakpoints.md (now 840px)

// Comparisons using the new thresholds, once screen.ready is true:
!screen.lt.md;                         // Was isMoreThan("md", true)
screen.width > screen.sizes.md;        // Was isMoreThan("md")
screen.lt.sm;                         // Was isLessThan("sm")
screen.width <= screen.sizes.sm;       // Was isLessThan("sm", true)

The old methods compared against a class's starting width. screen.gt.md instead means above the whole md class, starting at 1200px. To keep comparisons false before mounting, guard them with screen.ready, for example screen.ready && screen.lt.sm.