UI Components

Welcome to our comprehensive UI component library for AstroJS. Built with accessibility, performance, and developer experience in mind, our components help you create professional web applications faster.

Customize Theme

Benefits of using this library

• Accessible: Built following WCAG guidelines with ARIA support

• Easy to use: No complex framework concepts to learn, just AstroJS and TypeScript

• Customizable: Flexible styling through props and CSS classes

• Well-Documented: Clear examples and best practices

• Performance-Focused: Optimized for speed and efficiency

Intentions Of This Library

This library is intended to be a collection of components that are used to build a statically generated website with user interactivity and a focus on accessibility and search engine optimization. Typically AstroJS is combined with another framework such as React, Vue, or Svelte for creating user interfaces. But as you’ll see, Astro components are capable of creating complex user interfaces without the need for a framework.

Limitations

The main limitation of using Astro components for creating user interfaces is that you cannot dynamically create components from the client. You must render the components statically at build time, and then use the components in the client. For most use cases, this is not a problem, and may require some tricks. For example having a single toast component that is used throughout the site, or pre-rendering any components that will be used on the page, or having a clonable sub-component such as a row in a table, that can then be duplicated as many times as needed as new content is added to the table.

Why AstroJS?

When using AstroJS as your component framework you are not limited to the design principles of any framework. Personally, I have found React to be a pain to work with. Plus, importing and relying on many libraries for functionality, that can be done easily with Astro components and some typescript magic.

Getting Started

• Check component documentation
• Review example code
• Clone the repository and run the examples locally
• Explore TypeScript definitions
• Join our community discussions

The Component Architecture page contains details to understand the core principles of the library code and how to extend or interact with the components.

Limited Time Launch Sale

Start building professional web interfaces today. Get our AstroJS starter template and access the complete UI component library.

GET 60% OFF!