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:
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-ui@latest init
√ 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
Import the globals.css file in the @/pages/index.astro file:
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.
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.
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.
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