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.

         

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
• Avatar: Versatile user avatar with support for images, initials, and placeholder icons
• AvatarGroup: Display multiple avatars in condensed or grid layouts
• Badge: Versatile label component with button variant, animations, and pulse effects
• 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

• Accessible Astro Starter: Fully accessible starter for kickstarting Astro projects, with Tailwind.
• Accessible Astro Components: Library of reusable, accessible components build for Astro.
• Accessible Astro Dashboard: User-friendly dashboard interface with a login screen and widgets.
• Accessible Astro Docs: Comprehensive documentation for all 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.

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!