Skip to content
OrbitUI Logo OrbitUI Logo OrbitUI Component Library

Installation

This guide will walk you through the steps to add OrbitUI to your Astro project.

Prerequisites

Section titled “Prerequisites”

Before you begin, make sure you have the following installed:

  • Node.js (v20.0 or later)

Using the CLI

Section titled “Using the CLI”

  1. If you don’t have an existing Astro project, you can create a new one using your preferred package manager. Open your terminal and run one of the following commands:

    Terminal window
    npm create astro@latest

    Follow the on-screen prompts to set up your project.

  2. OrbitUI components are styled using Tailwind CSS. If you don’t already have Tailwind CSS configured in your Astro project, follow the steps in the documentation.

    Terminal window
    npm install tailwindcss @tailwindcss/vite

    Add the @tailwindcss/vite plugin to your Vite plugins in your Astro config file.

    astro.config.mjs
    // @ts-check
    import { defineConfig } from "astro/config";
    import tailwindcss from "@tailwindcss/vite";
    // https://astro.build/config
    export default defineConfig({
      vite: {
        plugins: [tailwindcss()],
      },
    });

    Create a ./src/styles/global.css file and add an @import for Tailwind CSS. Or let the OrbitUI CLI create it for you.

  3. OrbitUI components are designed to be copied directly into your project, and we provide a Command Line Interface (CLI) tool to simplify this process.

    Using the OrbitUI CLI:

    While the OrbitUI CLI is still experimental and under active development, it’s the recommended way to get started.

    To initialize OrbitUI in your Astro project, open your terminal in the project’s root directory and run the following command:

    Terminal window
    npx orbitkit@latest init

    Follow the prompts provided by the CLI. This command will help you configure your project to use OrbitUI and may set up the necessary directories and files for components.

  4. Once the initialization is complete, you can start adding components using the CLI:

    Terminal window
    npx orbitkit@latest add button

  5. After adding a component, you can import and use it in your Astro pages or components:

    index.astro
    ---
    import { Button } from "@/components/ui/button";
    ---
    

    <Button>Click Me</Button>