Ko Htet

Posted on Sep 5 • Edited on Oct 2

Using Aceternity UI in Astro

#tutorial #astro #react #ui

I really like to use Aceternity Ui in Nextjs but sometime, I don't really need Nextjs to develop a project. About half of my new projects are done in Astro SSG. So, I thought, why not use Aceternity Ui in Astro.

Astro is an open-source web framework that allows developers to create fast and lightweight websites. My personally favorite is that Astro can support React, Preact, Svelte, Vue, Solid, Lit, HTMX, web components, and more. It is Zero JS, by default and customizable.

For this, we will take advantage of using Astro with React and of course, TypeScript.

Installation

Firstly, we will create an Astro project using Bun. If you are not using Bun, don't worry. You can still use NPM instead of Bun.

We will start creating a project with Astro CLI.

1. Creating Astro Project



bun create astro@latest




dir   Where should we create your new project?
         ./project-name

tmpl   How would you like to start your new project?
         Empty

ts   Do you plan to write TypeScript?
         Yes

use   How strict should TypeScript be?
         Strict

deps   Install dependencies?
         Yes

git   Initialize a new git repository?
         No



cd project-name

2. Add React

If you are using npm, use npx instead of bunx.



bunx astro add react

Answer Yes to all the questions.

3. Add Tailwind



bunx astro add tailwind

Answer Yes to all the questions.

Add the following code to the tsconfig.json file to resolve paths:



{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Import the globals.css file in the @/pages/index.astro file:



---
import '@/styles/globals.css'
---

Update tailwind() in astro.config.mjs :



export default defineConfig({
  integrations: [
    //your code,
    tailwind({
      applyBaseStyles: false,
    }),
  ],
})

Update tailwind.config.mjs :



export default {
//your code,
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
}

4. Install Shardcn Ui

Aceternity Ui is based on Shardcn Ui. So we will need to install Shardcn in the project. Luckily, Shardcn provides installation for Astro.



bunx shadcn@latest init

There is still no error after running this command with bun but if you are using npm, there may be an error like this. (#issue)

To fix this error, you have to create a folder named "npm" in "AppData\Roaming".
There are two ways to create the folder.

Open PowerShell and enter New-Item -Path "$env:APPDATA\npm" -ItemType Directory.
Open Run command window, enter %appdata% and create a folder named "npm".

After that, you can continue the process below.



√ Would you like to use TypeScript (recommended)? ... yes
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Slate
√ Where is your global CSS file? ... ./src/styles/globals.css
√ Would you like to use CSS variables for colors? ... no
√ Are you using a custom tailwind prefix eg. tw-? (Leave blank if not) ...
√ Where is your tailwind.config.js located? ... tailwind.config.mjs
√ Configure the import alias for components: ... @/components
√ Configure the import alias for utils: ... @/lib/utils
√ Are you using React Server Components? ... no
√ Write configuration to components.json. Proceed? ... yes

5. Install Framer Motion

Finally, install Framer Motion.



bun i framer-motion clsx tailwind-merge

6. Add Aceternity Ui component

After installing Framer Motion, we can basically use Aceternity component in our project but there are a few adjustments that need to done.

Now we will add 3d-card from Aceternity.



bunx aceternity-ui@latest add 3d-card

In 3d-card.tsx , remove "use client"; as it is from Nextjs. We are using Astro so we don't need Nextjs Syntax.

Remove import Image from "next/image"; and use normal <img> tag.

Replace it with import { Image } from 'astro:assets';.

7. Using Aceternity Ui component

After adding the component, we can now use the Aceternity component.
I will skip writing the code from scratch so I will copy and paste from the example.

Create threedcarddemo.tsx in "@/components/".

Copy and Paste the code from https://ui.aceternity.com/components/3d-card-effect example.

Remove these lines because we don't need them in Astro :



"use client";
import Image from "next/image";
import React from "react";

Import component in the @/pages/index.astro file:



---
import { ThreeDCardDemo } from "@/components/threedcarddemo";
---

You can use client:idle or client:load as you like.



<ThreeDCardDemo client:idle />

I hope you encounter no error during the process.
Thank you for reading. :D

You can check my github repository at:

Tokigin / astro-aceternity