Astro

Integrating React

To us NeUI within Astro, you will first need to integrate React compatibility. There is a more in-depth guide on the Astro website, please refer to it before proceeding.

Setting up dependencies

Since Astro's vite packager seems to be having some issues with bundling Radix UI and babel's runtime, we will need to ignore their externals by setting the following in astro.config.mjs:

import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
  // Other config
  vite: {
    ssr: {
      noExternal: ["@radix-ui/*", "@babel/runtime"],
    },
  },
});

This will allow us to build our Astro app without any errors.

Server Side Rendering

Due to stitches' zero-runtime approach, we can render all needed CSS into the head by creating an astro Layout with getCssText()'s content rendered into a style tag by doing creating a file in src/layout/Layout.astro with the following content:

---
import { getCssText } from "@neui/core";
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Other head things -->
    <style set:html={getCssText()}>

    </style>
  </head>
  <body>
    <slot />
  </body>
</html>

We can now use non-interactive NeUI components in Astro without any further setup:

---
import Layout from "../layouts/Layout.astro";
import { Box } from "@neui/layout";
import { yourTheme } from "your-package";
---

<Layout>
  <div class={`${yourTheme}`}>
    <Box margin={{ base: 30, md: 60 }}>
      Box Content
    </Box>
  </div>
</Layout>

If we have interactive components though, we will need to use Astro's interface of loading JavaScript client side - since this adds JavaScript to the client bundle, only do this when interactivity is actually required.

<Button client:visible>Button Text</Button>