ui-kit-with-vanilla-extract

Vanilla Extract UI Kit in React Next.js

wiktor-plagaWiktor Plaga
March 25, 20237 min reading time

Vanilla Extract UI Kit in React Next.js

Welcome to the Vanilla Extract UI Kit in React Next.js tutorial! In this tutorial, we will be exploring how to use the Vanilla Extract library to create a reusable UI kit in a React Next.js application. Vanilla Extract is a CSS-in-JS library that allows you to write CSS styles in TypeScript, providing type safety and a better developer experience.

We will start by setting up a new React Next.js project and installing the necessary dependencies, including Vanilla Extract. We will then create a basic UI component using Vanilla Extract and explore how to style it using the library's API. By the end of this tutorial, you will have a solid understanding of how to use Vanilla Extract to create a reusable UI kit in a React Next.js application, and how to leverage the library's features to create maintainable and scalable CSS styles.

What is Vanilla Extract?

Vanilla Extract UI Kit is a library that allows developers to create a reusable and maintainable UI kit in a React application. It is built on top of the Vanilla Extract CSS-in-JS library, which provides a type-safe and scalable way to write CSS styles in TypeScript. With Vanilla Extract UI Kit, developers can create a set of reusable UI components that can be easily customized and shared across different projects.

The library provides a set of APIs that allow developers to define styles for their UI components using a declarative syntax. This makes it easy to create consistent and visually appealing UIs without having to write complex CSS code. Additionally, Vanilla Extract UI Kit provides a set of utility functions that can be used to create responsive designs, handle theming, and more. Overall, Vanilla Extract UI Kit is a powerful tool for creating maintainable and scalable UI components in a React application.

Why use Vanilla Extract for UI Kit in React Next.js application?

There are several reasons why developers should consider using Vanilla Extract for creating a UI kit in their React application. First and foremost, Vanilla Extract provides a type-safe and scalable way to write CSS styles in TypeScript. This means that developers can catch errors at compile-time rather than runtime, leading to fewer bugs and a more efficient development process. Additionally, Vanilla Extract's declarative syntax makes it easy to create and maintain complex CSS styles, even for large-scale projects.

  • Type-safe CSS-in-JS
  • Declarative syntax for maintainable CSS styles
  • Easy to create reusable UI components
  • Provides utility functions for responsive designs and theming
  • Compatible with React and other popular frameworks

Another benefit of using Vanilla Extract for a UI kit is that it makes it easy to create reusable UI components. With Vanilla Extract, developers can define a set of styles for a component and reuse them across different parts of the application. This leads to a more consistent and visually appealing UI, as well as a more efficient development process.

Finally, Vanilla Extract is compatible with React and other popular frameworks, making it a versatile tool for creating UI kits in different environments. Whether you are working on a small project or a large-scale application, Vanilla Extract can help you create maintainable and scalable UI components that are easy to customize and share.

Prerequisites

To complete the "Vanilla Extract UI Kit in React Next.js" tutorial, you will need to have the following prerequisites:

  • Basic knowledge of React and Next.js
  • Familiarity with TypeScript
  • Node.js installed on your computer
  • A code editor such as Visual Studio Code or Sublime Text
  • Basic knowledge of CSS and CSS-in-JS
  • Familiarity with package managers such as npm or yarn

If you are new to React or Next.js, it is recommended that you complete some introductory tutorials before starting this one. Additionally, if you are not familiar with TypeScript or CSS-in-JS, you may want to review some documentation or tutorials on these topics before starting the tutorial. Finally, make sure that you have Node.js installed on your computer and that you are comfortable using a code editor and package manager.

React Next.js Vanilla Extract step by step setup and configuration

Integrating Vanilla Extract into a React Next.js project is a straightforward process that involves installing the library and configuring it to work with your project. Here are the steps to follow:

  1. Install Vanilla Extract and its dependencies using npm or yarn:
npm install vanilla-extract @vanilla-extract/css @vanilla-extract/webpack-plugin
  1. Create a vanilla-extract.js file in your project's root directory. This file will contain the configuration for Vanilla Extract. Here's an example configuration:
import { createGlobalTheme } from '@vanilla-extract/css';

export const vars = createGlobalTheme(':root', {
  color: {
    primary: 'blue',
    secondary: 'green',
  },
  fontSize: {
    small: '12px',
    medium: '16px',
    large: '24px',
  },
});

export const globalStyles = {
  ':root': {
    '--color-primary': vars.color.primary,
    '--color-secondary': vars.color.secondary,
    '--font-size-small': vars.fontSize.small,
    '--font-size-medium': vars.fontSize.medium,
    '--font-size-large': vars.fontSize.large,
  },
};

This configuration creates a global theme with some color and font-size variables, and defines some global styles that use these variables.

  1. Import the vanilla-extract.js file in your _app.js file, which is located in the pages directory. This file is used to wrap your entire application and apply global styles. Here's an example:
import { globalStyles } from '../vanilla-extract';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <style jsx global>
        {globalStyles}
      </style>
    </>
  );
}

export default MyApp;

This code imports the globalStyles from the vanilla-extract.js file and applies them globally using a style tag.

  1. Finally, you can use Vanilla Extract to create styles for your components. Here's an example:
import { style } from '@vanilla-extract/css';

const buttonStyles = style({
  backgroundColor: 'var(--color-primary)',
  color: 'white',
  padding: '10px 20px',
  borderRadius: '5px',
  fontSize: 'var(--font-size-medium)',
});

function Button({ children }) {
  return <button className={buttonStyles}>{children}</button>;
}

export default Button;

This code creates a Button component with some styles defined using Vanilla Extract's style function. The backgroundColor, color, padding, borderRadius, and fontSize properties are defined using the global variables defined in the vanilla-extract.js file.

By following these steps, you can easily integrate Vanilla Extract into your React Next.js project and start creating reusable and maintainable styles for your components.

Vanilla Extract configuration options in React Next.js

Here are the Vanilla Extract configuration options for React Next.js integration:

  • outputCss: This option specifies the path where the CSS output file will be generated. By default, it is set to ./build/index.css.
  • extractCss: This option determines whether the CSS should be extracted into a separate file or not. By default, it is set to true.
  • globalCss: This option specifies the path to a global CSS file that should be included in the output. By default, it is set to ./src/global.css.
  • sourceMap: This option determines whether source maps should be generated or not. By default, it is set to false.
  • minify: This option determines whether the CSS should be minified or not. By default, it is set to false.
  • watch: This option determines whether the CSS should be watched for changes or not. By default, it is set to false.
  • writeToDisk: This option determines whether the CSS output file should be written to disk or not. By default, it is set to false.
  • preprocessCss: This option allows you to preprocess the CSS before it is processed by Vanilla Extract. It takes a function that returns a string of CSS.
  • additionalLoaders: This option allows you to specify additional loaders to use when processing CSS. It takes an array of loader objects.

By configuring these options, you can customize the behavior of Vanilla Extract in your React Next.js project and tailor it to your specific needs.

Conclusion

Congratulations! You have completed the Vanilla Extract UI Kit in React Next.js tutorial. By following this tutorial, you have learned how to use Vanilla Extract to create a reusable and maintainable UI kit in a React Next.js application. You have also learned how to leverage the library's features to create scalable and responsive CSS styles.

Throughout the tutorial, you have seen how to install and configure Vanilla Extract, create global themes and styles, and use the library to create UI components. You have also learned how to customize the library's configuration options to suit your specific needs.

By using Vanilla Extract in your React Next.js projects, you can create maintainable and scalable UI components that are easy to customize and share. Whether you are working on a small project or a large-scale application, Vanilla Extract can help you create visually appealing and consistent UIs with ease.

Hix logoHix Software Project Starter

Automate your project configuration with the Hix project starter.

Skip all the mundane tasks and start delivering.

Subscribe

Like what you're reading?

 

Get new articles straight to your inbox.

We use cookies, please read and accept our Cookie Policy.