npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

accessible-astro-components

v4.0.2

Published

A set of Accessible, easy to use, Front-end UI Components for Astro.

Downloads

4,471

Readme

Accessible Astro Components

Built with Astro

accessible-astro-components

A comprehensive library of accessible, easy-to-use UI Components for Astro. Each component is built with accessibility in mind, following WCAG guidelines and ARIA best practices, providing a solid foundation for building inclusive web applications. The components are designed to be customizable, performant, and developer-friendly, with full TypeScript support.

LIVE DEMO   DOCUMENTATION   NPM Version   NPM Downloads  

Follow on X   Follow on BlueSky   Sponsor on Open Collective   Sponsor on GitHub

Our mission

Provide developers with accessible, easy-to-use components that make building inclusive web applications simpler and faster, without compromising on customization or performance.

Component features

  • Accessible by default: Built following WCAG guidelines and ARIA best practices
  • Modern CSS: Using logical properties and modern selectors
  • Performance: Optimized for Core Web Vitals
  • Responsive: Mobile-first and touch-friendly design
  • i18n ready: Built with internationalization in mind
  • Dark mode: Supports light and dark themes with light-dark()
  • Keyboard navigation: Full keyboard support with focus management
  • Screen readers: Proper ARIA labels and semantic HTML
  • Customizable: Easy to style and adapt to your needs
  • Zero dependencies: Pure Astro components
  • TypeScript: Full type support and documentation
  • Modern: Uses latest web standards and best practices

Available components

The Accessible Astro Components library provides a collection of pre-built, accessible components that you can easily integrate into your Astro projects:

  • Accordion: Expandable/collapsible sections for progressive disclosure
  • Breadcrumbs: Navigation aid showing the current page's location
  • Card: Content container with flexible layout options
  • DarkMode: Theme toggle with system preference support
  • Media: Responsive image component
  • Modal: Accessible dialog windows
  • Notification: Info and alert messages
  • Pagination: Navigation for paginated content
  • SkipLinks: Keyboard navigation aid for screen readers
  • Tabs: Content organization with tabbed interfaces
  • Video: YouTube embed component

Getting started

# npm
npm install accessible-astro-components

# pnpm
pnpm add accessible-astro-components

# yarn
yarn add accessible-astro-components

Quick Start

---
import { Accordion, AccordionItem } from 'accessible-astro-components'
---

<Accordion>
  <AccordionItem title="Getting Started">Content for the first item...</AccordionItem>
</Accordion>

Accessible Astro projects

Check out our roadmap to see what's coming next!

Contributing

We welcome contributions to improve the documentation! You can help by:

  1. Filing an issue
  2. Submitting a pull request
  3. Starting a discussion
  4. Supporting on Open Collective

Support this project

Your support helps us cover basic costs and continue building accessible solutions for the Astro ecosystem. By becoming a sponsor, you're not just supporting code – you're helping create a more inclusive web for everyone. Every contribution, big or small, helps maintain and improve these accessibility-focused tools.

Sponsor on Open Collective

Together we make a difference

We want to express our heartfelt gratitude to everyone who contributes to making the web more accessible:

  • The Astro team for creating an amazing static site generator and the wonderful Starlight theme
  • Our contributors who dedicate their time and expertise to improve these tools
  • Our sponsors who help make this project sustainable
  • The web community for embracing and promoting web accessibility
  • You, the developer for choosing to make your projects more accessible

Together, we're not just building documentation or components – we're creating a more inclusive and accessible web for everyone. Every contribution, whether it's code, documentation, bug reports, or feedback, helps move us closer to this goal. ✨

Remember: Accessibility is not a feature, it's a fundamental right. Thank you for being part of this journey!

The story behind Accessible Astro

Accessible Astro started as a personal project by Mark Teekman in 2021 when Astro was in its early stages, born from a passion for web accessibility and the Astro framework. What began as a single starter template grew into a family of accessible solutions, leading to the creation of Incluud, an initiative with Peter Padberg to make the web more inclusive. Today, these projects continue to grow and evolve with the help of our amazing community, staying true to their original purpose: making web accessibility easier for developers and better for everyone.