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:

Install the package
Terminal window
```
npm install accessible-astro-components
```

Import components

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

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:

Clone the repository:

git clone https://github.com/incluud/accessible-astro-starter.git my-project

Install dependencies:
Terminal window
```
cd my-project
npm install
```
Start developing:
Terminal window
```
npm run dev
```

Accessible Astro Dashboard

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

Clone the repository:

git clone https://github.com/incluud/accessible-astro-dashboard.git my-dashboard

Install dependencies:
Terminal window
```
cd my-dashboard
npm install
```
Start developing:
Terminal window
```
npm run dev
```

Next steps

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

Read the accessibility guidelines
Explore available components
Check out theme customization
Join our community