Skip to content
Accessible Astro Documentation

Accessible Astro Dashboard

Introduction

The Accessible Astro Dashboard is a comprehensive admin dashboard theme that includes a login system, dashboard overview, and various admin pages. It’s built with accessibility in mind and includes numerous utility classes and design system primitives.

GitHub RepositoryLive Demo

Key features

  • Login system with authentication example
  • Dashboard overview with customizable widgets
  • Admin pages (Media, Messages, Products, Settings, Users)
  • Keyboard accessible sidebar navigation
  • Collapsible sidebar with localStorage preference
  • Dark mode with system preference detection
  • Responsive design with mobile navigation
  • Design system utilities and primitives
  • Tailwind CSS integration Not implemented yet
  • Excellent Lighthouse scores
  • ESLint with strict accessibility settings Not implemented yet

Accessibility features

  • Semantic HTML landmarks
  • Skip links navigation
  • Keyboard accessible navigation (arrow keys, escape key)
  • Screen reader friendly components
  • Focus management and trap for modals
  • Proper ARIA attributes and landmarks
  • High contrast mode support Not implemented yet
  • Reduced motion preferences Not implemented yet
  • Clear focus indicators
  • Screen reader only text utilities
  • Proper heading hierarchy

Getting started

  1. Clone the repository:

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

  2. Install dependencies:

    Terminal window
    npm install

  3. Start development server:

    Terminal window
    npm run dev

  4. Open your browser: Visit http://localhost:4321 and log in with the demo credentials.

Project structure

The dashboard follows a clear and organized structure:

  • Directorypublic/
    • … // Other assets
  • Directorysrc/
    • Directoryassets/
      • Directoryimg/ // Contains the logo
        • …
      • Directoryscss/
        • Directorybase/ // Core styles and utilities
          • …
    • Directorycomponents/
      • DashboardWidget.astro
      • EmptyState.astro
      • LoginForm.astro
      • Navigation.astro
      • ResponsiveToggle.astro
    • Directorylayouts/
      • DefaultLayout.astro // Default page layout
      • LoginLayout.astro // Login page layout
    • Directorypages/
      • 404.astro
      • index.astro
      • login.astro // Login page
      • media.astro
      • messages.astro
      • products.astro
      • settings.astro
      • users.astro
  • package.json
  • astro.config.mjs

Components

The dashboard includes several specialized components:

  • DashboardWidget.astro - Customizable dashboard widgets
  • EmptyState.astro - Placeholder for empty data states
  • LoginForm.astro - Accessible login form with validation
  • Navigation.astro - Collapsible sidebar navigation
  • ResponsiveToggle.astro - Mobile navigation toggle

Customization

The theme includes a comprehensive design system:

  • Directorysrc/
    • Directoryassets/
      • Directoryscss/
        • Directorybase/
          • _reset.scss // CSS reset
          • _grid.scss // Grid system
          • _color.scss // Color system
          • _font.scss // Font styles
          • _space.scss // Space scale
          • _elevation.scss // Box shadows

Example usage

<div class="grid">
  <div class="small-12 medium-3">
    <div class="space-32 radius-large elevation-400">
      <h3>Dashboard Widget</h3>
      <!-- Widget content -->
    </div>
  </div>
</div>

Contributing

  1. Fork the repository on GitHub

  2. Create a new branch:

    Terminal window
    git checkout -b feat/your-feature-name

  3. Make your changes and commit them:

    Terminal window
    git commit -m "Add some feature"

  4. Push to your fork:

    Terminal window
    git push origin feat/your-feature-name

  5. Open a Pull Request on GitHub