Skip to content

Quickstart

This guide will walk you through the basics of setting up and using Jux toolkit 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
    Terminal
    npm install -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
    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

  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.