Quickstart

This guide will walk you through the basics of setting up and using Jux toolkit in your project.

Or clone our Next.js example app:

Terminal

pnpm create next-app --example https://github.com/jux-io/quickstart/

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, create a jux.config.ts and postcss.config.js files in your project root.

   Terminal

   npx jux init --postcss

   More information

   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

   Under the hood

   The previous step created jux.config.ts, which specifies the paths to your source files. Jux will scan and parse these files to generate the CSS.

   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: {},
   };

   
   

   Generating a CSS file

   By running the Jux build process you can generate a CSS file for static usage. This file will include all styles used in your project, along with tokens and theme configurations.

   terminal

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

   Note

   For more information on the generated CSS file, see the PostCSS guide.
   
   

3. Add the Jux layers to your main CSS file:

   main.css

   @layer juxbase, juxtokens, juxutilities;

4. Start using Jux in your project

   index.tsx

   // Import main CSS file and style your components using Jux.
   import './main.css';
   import { css } from '@juxio/css';
   
   const Home = () => (
     <p
       className={css({
         color: 'violet',
         '& span': { color: 'darkviolet' },
       })}
     >
       Hello from <span>Jux 🤖</span>
     </p>
   );

Next steps

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

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

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

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.