Introduction

A collection of open-source web components for building accessible, customizable user interfaces.

What is Astra UI?

Astra UI is not a component library you install as a dependency. It's a set of web components you can copy and paste into your projects. Each component is designed to be accessible, customizable, and framework-agnostic.

Key Features

Web Native: Built using web standards, ensuring compatibility across frameworks.
Accessible: Designed with WCAG guidelines in mind, including keyboard navigation support.
Customizable: Easy to modify styles and behavior to fit your project's needs.
Framework-agnostic: Use with any JavaScript framework or vanilla JS.

How It Works

Choose the components you need from our collection.
Copy the component code directly into your project.
Customize the styles and behavior to match your design system.
Use the components in your application, regardless of your framework.

This approach gives you full control over the code, allowing you to optimize, modify, and maintain it as part of your project.

Quick Start

Here's a simple example of how to use Astra UI components:

<!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>

Why Astra UI?

• No dependencies to manage or update
• Full control over the code and styling
• Mix and match with your existing components
• Learn from well-structured, accessible component implementations

Get Started

Ready to use Astra UI? Explore our components and start building better user interfaces today.

Explore Components ->

Getting Started