Skip to content

Installation

You don’t need to install this project as a dependency — in fact, there’s no NPM package available (yet).

Right now, using the project is as simple as Copying and pasting the components into your own project.

That’s it. No build steps, no complex tooling. Grab what you need and use it however you like.


Although this project doesn’t need to be installed, there are three essential tools you’ll need to have in your project to make the components work as expected:

The modern framework for building fast, content-driven websites.

Astro is a static site generator that lets you use your favorite frontend tools in a highly optimized environment. It delivers lightning-fast performance and a great developer experience.

Install Astro with:

Terminal window
npm create astro@latest

Choose a name for your project, select the template you like, and add any dependencies you need.

More details at the Astro documentation.


A utility-first CSS framework for building modern and responsive user interfaces.

Most components in this project are styled using Tailwind CSS. It’s fast, flexible, and makes styling your pages a breeze.

  1. To install it in your Astro project:

    Terminal window
    npx astro add tailwind
  2. Then go to your src/styles/global.css file and import Tailwind. If it doesn’t exist, create it — it will be useful, especially if you want to define variables or customize Tailwind configurations:

    src/styles/global.css
    @import "tailwindcss";
  3. After setting up your global.css, go to your layout file (e.g. src/layouts/Layout.astro) and import it at the top:

    src/layouts/Layout.astro
    ---
    import "../styles/global.css";
    ---
  4. That’s it.

More details at the
Tailwind + Astro Integration Guide


A powerful JavaScript 3D library that brings immersive experiences to the browser.

Some components use Three.js to render particles, 3D animations, and visual effects.

Install it with:

Terminal window
npm install three

Learn more at the Three.js documentation.


Once these tools are installed, you’re good to go!
Just copy the components you need into your project and start building