Installation

Get started with Astra UI in your project using one of these simple methods.

Quick Start

The fastest way to try Astra UI is to include it directly in your HTML file:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Astra UI App</title>
    <script src="https://cdn.outerbase.com/astra/latest/astra.js"></script>
  </head>
  <body>
    <astra-text variant="h1">Hello, Astra UI!</astra-text>
    <astra-button>Click me</astra-button>
  </body>
</html>

This example includes Astra UI from our CDN and uses two components: astra-text and astra-button.

Installation Methods

1. CDN

Include Astra UI directly from our CDN by adding this script tag to your HTML:

<script src="https://cdn.outerbase.com/astra/latest/astra.js"></script>

2. Self-hosting

Download astra.js from our GitHub repository and host it yourself:

<script src="/path/to/astra.js"></script>

Replace /path/to/astra.js with the actual path where you've placed the file.

3. NPM

For projects using npm, you can install Astra UI as a package:

npm install @outerbase/astra-ui

Then, import the entire bundle in your JavaScript:

import '@outerbase/astra-ui/bundle'

Or import only the components you need:

import { Button, Card, Input, Label, ScrollArea, Select, Table } from '@outerbase/astra-ui/components'

Next Steps

Now that you've installed Astra UI, you're ready to start building! Check out our component documentation to learn how to use each component in your project.

Explore Components

Getting Started