Skip to content
Jux Docs
WelcomeDesignersDevelopers

Pulling Tokens, Themes, and Components

As a code-based product design tool, Jux empowers product designers to design real, web-based applications, complete with themes and design tokens, that you can immediately use in your project. This guide will show you how to use the Jux CLI to pull these designer-created elements from your Jux account into your codebase, facilitating a seamless workflow between you and your design team.

Configurations

  1. Logging 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 command will open a browser window for authentication and prompt you to enter your Jux credentials.

  2. Configuring Jux config file

    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',
    

      core_tokens: {
        /* Your core tokens */
      },
    

      themes: {
        light: {
          /* Your light theme */
        },
        dark: {
          /* Your dark theme */
        },
        my_custom_theme: {
          /* Your custom theme */
        },
      },
    });
    • 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).
    • core_tokens: Defines your core design tokens.
    • themes: Defines your theme-specific tokens (e.g., light and dark themes).

    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({
6 collapsed lines
  /* ... */
  tokens_directory: './src/jux/tokens',


  components_directory: './src/jux/components',


  definitions_directory: './src/jux/types',


  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.