Hybrid Astro UI

AIButton

A smart, provider-aware button component that instantly opens prompts in AI tools like ChatGPT or Perplexity. Fully themeable, variant-based, and designed for seamless integration into Astro projects without JavaScript by default. Perfect for enhancing UX with AI actions directly from your UI.

AnimateScroll

A lightweight scroll-triggered animation wrapper that automatically animates each of its direct children as they enter or leave the viewport. Supports nested usage for granular control and configurable visibility thresholds

Avatar

A flexible avatar component that supports both static and dynamic images, with automatic optimization for local assets and seamless rendering for API-loaded content. Includes multiple size variants and two rendering modes for maximum compatibility.

Badge

A lightweight, versatile badge component that provides clear labeling, supports multiple variants, and integrates seamlessly with icons or interactive UI elements.

Button

A customizable button component offering variant-based styling, size options, and support for rendering as different HTML blocks while preserving all native attributes.

Card

A structured card component system with dedicated subcomponents for headers, content, and footers. Provides a clean, flexible layout for displaying grouped information, statistics, and UI sections.

Checkbox

A flexible and accessible checkbox component that supports custom styles, seamless labeling, disabled states, and smooth integration within form interfaces. Designed to deliver consistent behavior, intuitive interaction, and compatibility with external labels, it adapts effortlessly to a wide range of UI layouts and use cases.

FormField

A lightweight, semantic wrapper for organizing related form inputs, combining accessible fieldsets with fully customizable visual titles for clean and well-structured forms.

Input

A flexible input component that supports all native HTML input attributes, offering a consistent style for text fields, file inputs, and fully customizable form blocks.

Label

A simple and accessible label component that pairs seamlessly with form inputs, providing clear semantics, consistent styling, and support for disabled states.

List

A flexible list component composed of ListItem, ListItemMarker, and ListItemContent, allowing fully customizable markers and multi-line content, optimized for Lucide icons.

PageMetadata

An all-in-one metadata component that streamlines SEO tags, social preview images, favicon links, font preloading, and optional client-side routing—providing a structured, maintainable way to manage metadata across Astro projects.

PaginationControls

A compact, Astro-native pagination system that syncs directly with Astro’s routing and pagination APIs, offering modular controls, dynamic page indices, and zero client-side JavaScript. Ideal for clean, scalable multi-page navigation in Astro projects.

PostMeta

A versatile metadata component designed for blog posts, documentation pages, and content-driven layouts

PreviewLink

Components for creating interactive inline links that trigger a floating content panel (tooltip/popup) on hover, enriching the reading experience without interrupting the flow of the main text.

ReviewStars

A detailed rating breakdown component that displays star tiers with percentage-based distribution, customizable color variants, and accessible semantics—ideal for product reviews, feedback summaries, and analytics dashboards.

ScrollArea

A scrollable container component that enables smooth vertical or horizontal scrolling for overflowing content, with full control over direction, layout, and custom styling.

Separator

A decorative and functional separator component offering multiple visual styles and customizable widths, ideal for section dividers and content organization.

Spinner

A customizable loading spinner component that offers various animated icons, suitable for buttons, forms, and asynchronous UI states.

TextArea

A flexible input component that supports all native HTML input attributes, offering a consistent style for text fields, file inputs, and fully customizable form blocks.

Theme Toggle

A flexible wrapper component for toggling between light and dark themes, fully customizable and designed to work seamlessly with the ThemeProvider.

Tooltip

A lightweight, direction-aware tooltip component designed for Astro projects. Fully themeable, compatible with custom orientations, and built to enhance UX with accessible, hover-based hints — all without requiring JavaScript by default.