DEV Community

Cover image for Using Aceternity UI in Astro
Ko Htet
Ko Htet

Posted on • Updated on

Using Aceternity UI in Astro

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


Enter fullscreen mode Exit fullscreen mode



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



Enter fullscreen mode Exit fullscreen mode


cd project-name


Enter fullscreen mode Exit fullscreen mode

2. Add React

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



bunx astro add react


Enter fullscreen mode Exit fullscreen mode

Answer Yes to all the questions.

3. Add Tailwind



bunx astro add tailwind


Enter fullscreen mode Exit fullscreen mode

Answer Yes to all the questions.

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



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


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

Update tailwind() in astro.config.mjs :



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


Enter fullscreen mode Exit fullscreen mode

Update tailwind.config.mjs :



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



Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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)

Image description

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


Enter fullscreen mode Exit fullscreen mode

5. Install Framer Motion

Finally, install Framer Motion.



bun i framer-motion clsx tailwind-merge


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.

or

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";


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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



<ThreeDCardDemo client:idle />


Enter fullscreen mode Exit fullscreen mode

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

You can check my github repository at:

GitHub logo Tokigin / astro-aceternity

Using Aceternity ui in Astro project

Astro + Aceternity

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.

Reference

https://docs.astro.build/en/install-and-setup

https://www.framer.com/motion/introduction

https://ui.shadcn.com/docs/installation/astro

https://ui.aceternity.com/docs/add-utilities

Installation

I use Bun here but you can use npm or npx.

1. Creating Astro Project

bun create astro@latest
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

2. Add React

bunx astro add react
Enter fullscreen mode Exit fullscreen mode

Answer Yes to all the questions.

3. Add Tailwind

bunx astro add tailwind
Enter fullscreen mode Exit fullscreen mode

Answer Yes to all the questions.

Add the following code to the tsconfig.json file…




References

https://docs.astro.build/en/install-and-setup

https://www.framer.com/motion/introduction

https://ui.shadcn.com/docs/installation/astro

https://ui.aceternity.com/docs/add-utilities

Top comments (0)