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 to resolve paths:

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

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

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

Update 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

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

bun i framer-motion clsx tailwind-merge

6. Add Aceternity Ui component

bunx aceternity-ui@latest add 3d-card

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

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

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

Remove :

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

Project Structure

/
├── public/
├── src/
│   └── components/
│       └── ui
│   └── lib/
│       └── utils.ts
│   └── pages/
│       └── index.astro
│   └── styles/
│       └── globals.css
│   └── env.d.ts
└── astro.config.mjs
└── components.json
└── package.json
└── tailwind.config.mjs
└── tsconfig.json