Astra is a lightweight web component UI library usable with any frameworks or no framework at all.
- Web Components: Using Astra UI as web components.
- NPM Modules: Install as an NPM package.
You do not need have to build or compile Astra yourself to use it.
- Load directly from our CDN
- Host the astra.js yourself
npm installinto your project- Import only the components you use; minimize and build to your liking
TypeScript support is built-in, not required.
Declaring an instance of the editor in your HTML you can do the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Classified</title>
<script src="https://cdn.outerbase.com/astra/latest/index.js"></script>
</head>
<body>
<astra-text variant="h1">Are you ready?</astra-text>
<astra-button>Yes!</astra-button>
</body>
</html>example.html (located in the root of this project) illustrates how to use Astra in the most basic of environments. Go ahead and open it in your favorite browser to see what you can do with minimal effort.
We're making Astra available from our CDN. You may simply copy/paste the following snippet onto your site to include all of our components.
<script src="https://cdn.outerbase.com/astra/latest/index.js"></script>Place astra.js (found in dist/web-components/astra.js) somewhere accessible to your website. Then update your HTML to include a script tag that references that location:
<script src="/your/path/to/astra.js"></script>If you want to include our preferred font Inter, you can add it to your own site via Google Fonts with the following style tag:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:400,500,600,700&display=swap" />We recommend hosting all of your dependencies yourself. See src/pages/index.astro for an example including Inter via NPM.
In your terminal, type
npm add @outerbase/astra-uiin your js/ts client-side file(s)
import '@outerbase/astra-ui/bundle'This will include/register all of the Astra copmonents on the page
In your terminal, type
npm add @outerbase/astra-uiIn your .js, .mjs and .tsx files
import { Button, Card, Input, Text, ScrollArea, Select, Table } from '@outerbase/astra-ui/components'Reference src/pages/index.astro for an example of using components in this way
We've also packaged Astra for React:
import React from 'react'
import Astra from '@outerbase/astra-ui/react'
const { Select, Text, Input, Card, Button, ScrollArea, Table } = Astra(React)
function ArbitraryComponent() {
return <Button>Click me</Button>
}We do not force you to use/load the Inter font. If you'd like to use it, include the font Inter on your page. You can see examples of how to do this in the following files of this repo:
example.htmlvia Google Fontssrc/pages/index.astrovia the @fontsource/inter NPM module
npm install --frozen-lockfile
npm devIf you want to add contributions to this repository, please follow the instructions here.
For support join our community on Discord. For enterprise solutions contact us at [email protected]
This project is licensed under the MIT license. See the LICENSE file for more info.