Quickstart

This guide will walk you through the basics of setting up and using Jux toolkit in your project. Jux is a type-safe, zero-runtime CSS-in-JS solution with full interpolation capabilities. It leverages PostCSS to generate optimized stylesheets during build time, combining the flexibility of CSS-in-JS with the performance of traditional CSS.

Let’s dive in and get Jux set up in your project!

Installation

The fastest way to get started with Jux is to use the Jux CLI. The CLI will help you set up a new project and generate the necessary configuration files.

1. Install Jux CLI

   npm

   Terminal

   npm install -D @juxio/cli

   pnpm

   Terminal

   pnpm add -D @juxio/cli

   yarn

   Terminal

   yarn add -D @juxio/cli

2. Initialize a new project

   This will install the necessary dependencies and create a jux.config.ts file in your project root.

   Terminal

   npx jux init

   Tip

   Use the --skip-deps flag to skip dependency installation if you’re using an integrated monorepo with a centralized package.json (e.g. Nx). In this case, don’t forget to manually add Jux to your root package.json: npm install @juxio/postcss @juxio/css

3. Configure source files

   In jux.config.ts, specify the paths to your source files. Jux will scan and parse these files to generate the CSS file.

   jux.config.ts

   export default {
     preflight: true,
     include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{ts,tsx}'],
     exclude: [],
   
     /* The core tokens of your design system */
     core_tokens: {},
   
     /* The themes for your design system */
     themes: {},
   };

4. Generate CSS

   Run the Jux build process to generate your CSS file. This file will include all styles used in your project, along with tokens and themes configurations.

   terminal

   npx jux generate -o ./src/jux.css

5. Start using Jux in your project

   Include the generated CSS file in your project and start using Jux to style your components.

   index.tsx

   import './jux.css';
   
   import { css } from '@juxio/css';
   
   export default function Home() {
     return (
       <div
         className={css({
           color: 'violet',
           '&:hover': {
             color: 'darkviolet',
           },
         })}
       >
         Hello from Jux 🤖
       </div>
     );
   }

Framework Guides

React

Next.js

Astro

Vite

Next steps

Get familiar with some of the core concepts that make Jux different compared to other styling solutions.

Using with PostCSS Learn how to setup Jux as a PostCSS plugin.

Integrate with Jux Editor Pull design tokens and components from Jux Editor to your project.

Create a Theme System Learn how to build a flexible theme system using Jux's features to easily manage and switch between different themes in your application.

Learn how to style components with Jux Check out our guides on using Jux functions to style your components.