Astro Headless UI

Overview

Astro Headless UI is a component library designed to be used with Astro. It is a work in progress, with finished components and their documentation available. The library includes a range of components and utility functions to enhance the development of Astro projects.

Features

• Style Components: A series of components that generate structured HTML elements with an attached stylesheet. Examples include <NoScriptProperty> for CSS JavaScript detection and <AnimatedSpriteSheet> for animating a sprite sheet as a background image.
• Components: Various components designed for specific purposes, such as <Rating> for displaying ratios, <Link> for creating active links, and <TableOfContents> for generating a table of contents.
• Utility / Flow Components: Components that provide utility functions or help with conditional rendering. Examples include <Wrap> for conditionally wrapping a component, <Switch> for advanced conditional rendering, and <For> for mapping components.
• Client Components: Components that add client-side interactivity to HTML elements using scripts. Examples include <DarkThemeToggle> for a dark theme toggle button and <CopyCode> for attaching a button to copy code.
• Client Scripts: Scripts that can be used on the client side, such as <ScrollProperty> for accessing the scroll position and <MouseProperty> for accessing the mouse position inside CSS.

Installation

To install Astro Headless UI, you need to add it as a dependency in your Astro project. You can do this by running the following command in your project directory:

npm install astro-headless-ui

Once installed, you can import and use the components and utility functions in your Astro project.

Summary

Astro Headless UI is a powerful component library designed for use with Astro. It provides a range of components and utility functions that can enhance the development of Astro projects. With features such as style components, utility components, and client-side interactivity, Astro Headless UI offers a comprehensive set of tools for building modern, dynamic websites.