Astro Headless UI

A headless component library for Astro

Note: This project is a work in progress, components with documentation are finished, if there are any changes they will be recorded in the wiki changelog

Documentation

Examples

Changelog

Submit an issue for bugs or suggestions

Style Components

HTML Element with an attached stylesheet

• <NoScriptProperty>: CSS javascript detector (@predaytor)
• <AnimatedSpriteSheet>: Animates a spritesheet as a background image on an element using css
• <IconSwitcher> Animated icon switcher, used to display current theme, copy button state, and more using icons

Components

Generates structured HTML

• <Rating>: Display a ratio using elements, useful for star ratings on products, posts, etc
• <Link>: Active link component, used in <Navigation> to generate link navigations
• <Navigation>: Generate a list of links using props, useful for config files
• <TableOfContents>: Generates a table of contents
• <Breadcrumb>: Site/URL hierarchy navigation
• <Pagination>: Page navigation for paginated routes
• <Paginate>: SSR component version of Astro's SSG paginate()

Utility / Flow Components

• <Wrap>: Conditionally wrap a component
• <When>: acts like a conditional/ternary statement, mostly used for <Switch/>
• <Switch>: Advanced conditional rendering, similar to SolidJS <Switch> with extra features using slots
• <For>: .map() in component form with extra features, similar to SolidJS <For>

Client Components

HTML element with client side interactivity using <script>

• <DarkThemeToggle>: Dark theme toggle button/script
• <MultiThemeToggle>: Multi theme toggle button(s)/script
• <CopyCode>: Attaches a button that copies code to all selected codeblocks

Client Scripts

Client side script that does not include HTML

• <ScrollProperty>: Access scroll position of window or element inside CSS as custom properties
• <MouseProperty>: Access mouse position of window or element inside CSS as custom properties

Utility

astro-headless-ui/util

• hashId(): Create a hash from a string, for scoping CSS, HTML elements, and <script> tags