Next.js

Setup Vanilla Extract

Install the Vanilla Extract dependencies to generate CSS from the library:

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

Good to know

@vanilla-extract/css is not required by Vibrant UI itself, but installing it lets you author your own *.css.ts files if you want custom styles.

Update Next.js configuration

Add the Vanilla Extract plugin to your next.config.ts and include @vibrant-ui/styles in the transpilePackages array so its files are processed correctly:

import { createVanillaExtractPlugin } from '@vanilla-extract/next-plugin';
import type { NextConfig } from 'next';
import type { Configuration, WebpackPluginInstance } from 'webpack';
import type webpack from 'webpack';

const withVanillaExtract = createVanillaExtractPlugin({
  identifiers: process.env.NODE_ENV === 'development' ? 'debug' : 'short',
});

const nextConfig: NextConfig = {
  transpilePackages: ['@vibrant-ui/styles'],
};

export default withVanillaExtract(nextConfig);

Bundling Fonts

The Vibrant UI library uses Geist. Start by installing the geist package:

npm install geist

Then, import the font files in your root layout.ts file:

import { GeistMono } from 'geist/font/mono';
import { GeistSans } from 'geist/font/sans';

And apply the classes for the sans and mono fonts to the <html> element:

<html className={clsx(GeistSans.variable, GeistMono.variable)} lang="en">

Provide a theme

Create a theme with createTheme in your root layout.ts. Apply its attributes to <html> so styles can use them, and wrap your app with ThemeProvider so components can access it:

import { ThemeProvider, createTheme, themeAttributes } from '@vibrant-ui/core';
import { clsx } from '@vibrant-ui/styles';
import { GeistMono } from 'geist/font/mono';
import { GeistSans } from 'geist/font/sans';

export default function RootLayout({ children }: LayoutProps<'/'>) {
  const theme = createTheme({
    colorScheme: 'dark',
    neutral: 'slate',
  });

  return (
    <html
      {...themeAttributes(theme)}
      className={clsx(GeistSans.variable, GeistMono.variable)}
      lang="en"
    >
      <body>
        <ThemeProvider theme={theme}>{children}</ThemeProvider>
      </body>
    </html>
  );
}

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 global.css to global.css.ts.

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,
});