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.
-
Install Jux CLI
Terminal npm install -D @juxio/cliTerminal pnpm add -D @juxio/cliTerminal yarn add -D @juxio/cli -
Initialize a new project
This will install the necessary dependencies, create a
jux.config.ts
andpostcss.config.js
files in your project root.Terminal npx jux init --postcssMore 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
-
Add the Jux layers to your main CSS file:
main.css @layer juxbase, juxtokens, juxutilities; -
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 = () => (<pclassName={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.