Skip to content
Jux Docs
WelcomeDesignersDevelopers

Collaborate with Designers

Learn how to use Jux CLI to pull design tokens, themes, and React components created by product designers into your codebase.

Getting Started with Jux

  1. Log into Jux

    Before you can pull tokens, themes, or components, you need to authenticate with your Jux account using the CLI. If you don’t have an account yet, please visit Jux.io to sign up.

    Terminal
    npx jux login
    This will open a new browser window for authentication.
  2. Configure directories

    Before you can start pull, you need to configure Jux in your codebase and define where to pull design tokens or components. This is done through a configuration file named jux.config.ts in your project root:

    jux.config.ts
    import { defineConfig } from '@juxio/cli';
    

    export default defineConfig({
      /* ... */
      tokens_directory: './src/jux/tokens',
      components_directory: './src/jux/components',
      definitions_directory: './src/jux/types',
      /* ... */
    });
    • tokens_directory: Specifies where to pull design tokens. If not provided, Jux will use a default location (./src/jux/tokens).
    • components_directory: Specifies where to pull generated components. If not provided, Jux will use a default location (./src/jux/components).
    • definitions_directory: Specifies the directory where type definitions will be generated. If not provided, Jux will use a default location (./src/jux/types).

    Make sure to adjust these paths and imports according to your project structure.

Pull Tokens and Themes

Jux allows product designers to define and manage design tokens and themes in your organization account. You can easily pull these into your codebase using the Jux CLI, ensuring that you’re always working with the latest design system elements.

Once you’ve configured Jux and logged in, you can pull the tokens and themes defined by your design team. The CLI will use the directories specified in your jux.config.ts file:

Terminal
npx jux pull tokens [OPTIONS]

This command will retrieve the design tokens and themes from your Jux editor and save them in your project, making them available for immediate use in your development process.

Options
  • -d, --definitions: Generate token definitions after pull.

After running the jux pull tokens -d command, your project structure will be updated to include the pulled design tokens and generated type definitions. Here’s what you can expect:

  • jux.config.ts
  • Directorysrc
    • Directoryjux
      • Directorytokens
        • core.ts All core tokens, shared across themes
        • light.ts
        • dark.ts
        • index.ts A helper file that exports all tokens
      • Directorytypes
        • tokens.d.ts Type definitions for design tokens
  • …
Using Pulled Tokens in jux.config.ts

After pulling tokens from your Jux editor, you can use them in jux config file to define your project’s core tokens and themes. This integration ensures that your Jux configuration reflects the latest design system created by your design team.

jux.config.ts
import { defineConfig } from '@juxio/cli';
import * as tokens from './src/jux/tokens';


export default defineConfig({
  /* ... */
  core_tokens: tokens.core,
  themes: {
    light: tokens.light,
    dark: tokens.dark,
    my_custom_theme: tokens.my_custom_theme,
  },
  /* ... */
});

For more information on how to use design tokens in your project, refer to the Tokens & Themes guide.

Pull Components

Jux enables designers to create reusable components that you can directly pull into your codebase and start using immediately. Here’s how to use the Jux CLI to pull these components:

To pull components from your Jux account, use the following command:

Terminal
npx jux pull components [OPTIONS]

Options

  • -c, --components <value>...: Pull specific components. You can specify multiple components by separating them with a space.

Examples

Terminal
npx jux pull -c navbar sidebar dialog

This command will retrieve the specified components (or all components if no flags are used) and their dependencies from your Jux editor and save them in your project. All components pulled from Jux are fully typed and connected to your design tokens and themes.

  • jux.config.ts
  • Directorysrc
    • Directoryjux
      • Directorycomponents
        • Navbar.tsx
        • Sidebar.tsx
        • Dialog.tsx
      • Directorytokens
        • …
      • Directorytypes
        • tokens.d.ts Type definitions for design tokens
  • …

Next steps

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

Themes & Tokens Familiarize yourself with the concept of themes and tokens in Jux.
Presets Learn how to use presets to quickly apply design system configurations.