Vite

Install the packages

Vortex packages are private and available by invitation. Complete the package access prerequisites before installing.

bun add @vortexlabs/vortex @vortexlabs/vortex-themes

bun add -d postcss@^8 @csstools/postcss-global-data postcss-custom-media cssnano

For TypeScript projects, align the React types with React 19:

bun add -d @types/react@^19 @types/react-dom@^19

Generate your theme

Create vortex.config.ts at the project root. An empty theme definition inherits Vortex's default tokens.

import type { VortexThemeConfig } from "@vortexlabs/vortex-themes";

const config: VortexThemeConfig = {
  themes: { acme: {} },
};

export default config;

Add this script to your existing package.json:

"scripts": {
  "build:theme": "vortex-themes theming --output ./src/themes"
}

bun run build:theme

This creates src/themes/acme/globals.css, including theme tokens and typography. Run it again after changing the theme configuration or upgrading Vortex or Vortex Themes, before starting or building the app.

Configure PostCSS

Create postcss.config.mjs at the project root. The preset converts Vortex’s custom media queries into browser-compatible CSS. Vite loads this configuration when processing styles.

import { config } from "@vortexlabs/vortex/config/postcss";

export default config;

If you already have a PostCSS config, merge the preset's plugins into it. Restart the dev server after configuration changes. The preset uses the default breakpoints; if you change them, configure the generated definitions as described in Custom breakpoints.

Set up your entry point

Import the generated theme styles and wrap your app with VortexProvider.

import "./themes/acme/globals.css";
import { VortexProvider } from "@vortexlabs/vortex";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <VortexProvider defaultTheme="acme" defaultColorMode="light">
      <App />
    </VortexProvider>
  </React.StrictMode>,
);

Use your first component

import { Button, Stack, Text } from "@vortexlabs/vortex";

const App = () => (
  <Stack gap={4}>
    <Text as="h1" size={{ xs: "heading-xl-mobile", sm: "heading-xl-desktop" }}>Hello Vortex</Text>
    <Button variant="primary">Get started</Button>
  </Stack>
);

export default App;

Check the result

bun run dev

Open the local URL printed by the dev server. You should see “Hello Vortex” and a styled “Get started” button. Then check the production build:

bun run build