Installation

Installing components

Choose your preferred package manager to install the components. The package includes TypeScript definitions out of the box and requires no additional configuration.

npm install accessible-astro-components

pnpm add accessible-astro-components

yarn add accessible-astro-components

Installing themes

Our themes come with all the components pre-installed and configured. You can choose between using git clone or degit for installation.

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

npx degit markteekman/accessible-astro-starter my-project

Dashboard theme

Git
Degit

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

npx degit markteekman/accessible-astro-dashboard my-dashboard

Post installation

After installing, you’ll need to set up your project. The steps differ slightly depending on whether you’re using the components package or a theme.

Components setup

Import the components you need:

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

Add the component to your template:

<Modal triggerId="modal" title="Welcome">
  <p>Content goes here</p>
</Modal>

Theme setup

Install dependencies:

cd my-project
npm install

Start development server:

npm run dev

Optional dependencies

Some components require additional packages to unlock their full potential. Here’s what you might need:

Icon support

To use icons in components like Notifications:

Installation
Configuration

npm install astro-icon

import icon from 'astro-icon'

export default defineConfig({
  integrations: [icon()]
})

ESLint for accessibility

We recommend using ESLint with accessibility rules to catch common issues during development:

npm install -D eslint-plugin-jsx-a11y

Troubleshooting

Here are some common issues you might encounter and how to resolve them:

Common issues

Port conflicts: If port 4321 is in use, Astro will automatically try the next available port.
Node.js version: Ensure you’re using Node.js 18.14.1 or higher:

node --version

Dependency conflicts: Clear your dependencies and reinstall if needed:

rm -rf node_modules package-lock.json
npm install