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.
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";
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
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
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
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…
References
https://docs.astro.build/en/install-and-setup
https://www.framer.com/motion/introduction
Top comments (0)