Skip to content

Integrating Jux with Vite

This guide will walk you through the process of setting up Jux in a Vite project. Vite is a modern build tool that provides a faster and leaner development experience for modern web projects.

  1. Create a New Vite Project (Skip if using an existing project)

    If you’re starting from scratch, create a new Vite project:

    Terminal
    npm create vite@latest my-jux-vite-app --template react-ts
    cd my-jux-vite-app
  2. Install Jux CLI
    Terminal
    npm install -D @juxio/cli postcss
  3. Initialize Jux in your project

    Run the Jux CLI to initialize Jux in your project. This will install the necessary dependencies and create the jux.config.ts file in your project root.

    Terminal
    npx jux init --postcss

    This will install the necessary dependencies, and create jux.config.ts and postcss.config.js files in your project root.

    postcss.config.js
    module.exports = {
    plugins: {
    '@juxio/postcss': {}
    }
    }
  4. Configure Jux

    Open jux.config.ts and update the include paths to match your Vite project structure:

    jux.config.ts
    export default {
    preflight: true,
    include: ['./src/**/*.{js,jsx,ts,tsx}'],
    exclude: [],
    /* The core tokens of your design system */
    core_tokens: {},
    /* The themes for your design system */
    themes: {},
    };
  5. Add Jux’s @layer directive to your main CSS file

    Create or update your global CSS file (e.g., src/index.css) to include Jux layers:

    main.css
    @layer juxbase, juxtokens, juxutilities;
  6. Import Global CSS in your Vite project

    In your main entry point (usually src/main.tsx or src/main.js), import your global CSS:

    main.tsx
    import './index.css';
    // ... rest of your imports and app initialization
  7. Start using Jux in your project

    Now you can start using Jux in your Vite components:

    index.tsx
    import { css } from '@juxio/css';
    function App() {
    return (
    <div
    className={css({
    color: 'violet',
    fontSize: '2rem',
    '&:hover': {
    color: 'darkviolet',
    },
    })}
    >
    Hello from Jux in Vite! 🚀
    </div>
    );
    }
    export default App;