Skip to content
Jux Docs
WelcomeDesignersDevelopers

Integrating Jux with Astro

This guide will walk you through setting up Jux in a Next.js project, from creating a new Next.js app to configuring Jux as a PostCSS plugin.

  1. Create a new Astro project (Skip if using an existing project)

    First, let’s create a new Astro project using astro create template:

    Terminal
    npm create astro@latest -- --template my-jux-astro-app
    cd my-jux-astro-app
  2. Install Jux CLI
    Terminal
    npm install -D @juxio/cli postcss
  3. Initialize a new project
    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 your include files

    Add the path to your source files in jux.config.ts. During the build process, Jux will scan these files to generate the CSS file.

    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: {},
    };
  5. Add Jux’s @layer directive to your main CSS file
    main.css
    @layer juxbase, juxtokens, juxutilities;

    In your src/layouts/Layout.astro or a similar global layout file, import your global CSS:

    src/layout/Layout.astro
    ---
    import './main.css';
    ---
    <html><!-- Your page here --></html>
  6. Start using Jux in your project
    src/components/MyStyledComponent.tsx
    import { css } from '@juxio/css';
    

    export const titleStyle = css({
      color: 'violet',
      '&:hover': {
        color: 'darkviolet',
      },
    });
    

    export const MyStyledComponent = ({ children, title }) => {
      return (
        <div
          className={css({
            /*
              Strings in the brackets {} represent design tokens
              from your jux.config.ts
            */
            border: '1px solid {color.core.grays_500}',
            borderRadius: '{core.dimension.spacing_100}',
            padding: '1.5rem',
            flexDirection: 'column',
            gap: 'clamp(0.5rem, calc(0.125rem + 1vw), 1rem)',
    

            [`.${titleStyle}`]: {
              marginBottom: '1rem',
            },
          })}
        >
          <span className={titleStyle}>{title}</span>
          {children}
        </div>
      );
    };

    Import your component or style into your Astro component:

    src/components/Component.astro
    ---
    import { MyStyledComponent, titleStyle } from './MyStyledComponent';
    ---
    

    <MyStyledComponent title="Hello, Astro!">
      <p class={titleStyle}>From Jux 🤖</p>
    </MyStyledComponent>

Your Astro app is now set up with Jux! You can start building your components using Jux’s CSS-in-JS capabilities while leveraging Astro’s powerful features. Remember to define your styles in separate .ts or .js files for now, and import them into your Astro components.