Installation

Install the package with your package manager:

pnpm

pnpm add @fluentic/style

npm

npm install @fluentic/style

Yarn

yarn add @fluentic/style

Bun

bun add @fluentic/style

React 18 or newer is a peer dependency. Fluentic Style imports React for its JSX runtime and hooks, but your app provides the React version. Bundler packages are optional peer dependencies, so you only install the integration you actually use.

Pick a mode

There are two useful starting modes. They use the same component code.

Mode	Best for	Setup
Runtime-only	Prototyping, tests, component libraries, unsupported bundlers, SSR experiments	JSX import source and useCss
Static extraction	Applications and production bundles where a supported bundler is available	Runtime setup plus a bundler plugin and virtual CSS imports

Runtime-only is not a throwaway mode. It is the fallback that keeps the same style definitions usable when static evaluation is not available. Static extraction is an optimization path for chains the compiler can evaluate.

TypeScript

Use the custom JSX runtime so css and scope props are accepted on DOM and SVG elements.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@fluentic/style"
  }
}

You can also use a file-level pragma:

/** @jsxImportSource @fluentic/style */

Runtime-only check

After the JSX runtime is configured, this is enough to verify the runtime path:

/** @jsxImportSource @fluentic/style */
import { style, useCss } from '@fluentic/style';

const styles = {
  root: style.slot({
    display: 'inline-flex',
    borderRadius: 6,
    padding: '8px 12px',
  }),
};

export function Button() {
  const css = useCss(styles);
  return <button css={css.root} scope={css}>Save</button>;
}

Add extraction with Vite

Install the Vite React plugin if your app does not already have it:

pnpm

pnpm add -D @vitejs/plugin-react vite

npm

npm install -D @vitejs/plugin-react vite

Yarn

yarn add -D @vitejs/plugin-react vite

Bun

bun add -d @vitejs/plugin-react vite

Then add the Fluentic Style plugin:

import { plugin as stylePlugin } from '@fluentic/style/plugin/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    stylePlugin(),
    react({
      jsxImportSource: '@fluentic/style',
    }),
  ],
});

Then import the virtual runtime module once near your application entry:

import 'virtual:fluentic-styles';

The runtime virtual module tells Fluentic Style whether the build is handled by the plugin and whether CSS was extracted.

Other bundler adapters follow the same idea: configure the adapter, keep the JSX runtime, and import the virtual runtime module once. Some adapters need explicit CSS handling. See Integrations for Vite, Rollup, Rolldown, Rspack, Webpack, esbuild, and Babel.