Skip to main content

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>