Skip to content
Accessible Astro Documentation

Quick Start

Using components

Our components package provides ready-to-use, accessible components that you can easily add to any Astro project. Here’s how to get started:

1. Install the package

Terminal window
npm install accessible-astro-components

2. Import components

---
import { Modal, Notification } from 'accessible-astro-components'
---

3. Use in your template

<button id="modal-trigger">Open Modal</button>


<Modal
  triggerId="modal-trigger"
  title="Welcome!"
>
  <p>You've successfully added your first accessible component!</p>
</Modal>

Using starter themes

If you’re looking to kickstart a new project, our starter themes come with accessibility features, components, and best practices built in. Choose the theme that best fits your needs:

Accessible Astro Starter

A minimal blog theme with all essential features for content-focused websites:

  1. Clone the repository:
Terminal window
git clone https://github.com/markteekman/accessible-astro-starter.git my-project
  1. Install dependencies:
Terminal window
cd my-project
npm install
  1. Start developing:
Terminal window
npm run dev

Accessible Astro Dashboard

A comprehensive admin dashboard theme with authentication, navigation, and interactive components:

  1. Clone the repository:
Terminal window
git clone https://github.com/markteekman/accessible-astro-dashboard.git my-dashboard
  1. Install dependencies:
Terminal window
cd my-dashboard
npm install
  1. Start developing:
Terminal window
npm run dev

Next steps

Once you have your project set up, you might want to: