Vite

Setup Vanilla Extract

Install the Vanilla Extract dependencies:

npm install --save-dev @vanilla-extract/vite-plugin @vanilla-extract/css

Good to know

@vanilla-extract/css isn't required by Vibrant UI itself, but installing it lets you author your own *.css.ts files for custom styles.

Update Vite configuration

Add the Vanilla Extract plugin to your vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';

export default defineConfig({
  plugins: [
    react(),
    vanillaExtractPlugin({
      identifiers: process.env.NODE_ENV === 'development' ? 'debug' : 'short',
    }),
  ],
});

Bundling Fonts

Use Fontsource for Geist in Vite:

npm install @fontsource/geist-sans @fontsource/geist-mono

Then, import the fonts in your main.tsx file:

import '@fontsource/geist-sans';
import '@fontsource/geist-mono';

Provide a theme

Create a theme with createTheme and wrap your app with ThemeProvider:

import '@fontsource/geist-sans/variable.css';
import '@fontsource/geist-mono/variable.css';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider, createTheme } from '@vibrant-ui/core';
import App from './App';

const theme = createTheme({
  colorScheme: 'dark',
  neutral: 'slate',
});

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </StrictMode>,
);

ThemeProvider offers a useTheme hook to change theme values at runtime and keeps the <html> theme attributes in sync with the active theme.

For details on available options for createTheme, see the Theming guide.

Customize Global Styles (Optional)

You can define global styles with Vanilla Extract by renaming index.css to index.css.ts and importing it into your main.tsx file.

For example, to change the background color:

import { globalStyle } from '@vanilla-extract/css';
import { vars } from '@vibrant-ui/styles';

globalStyle('body', {
  backgroundColor: vars.semantic.backgroundColor.subtle.blue,
});