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

Hackaton project

This project was created as a submission for the Astro Hackathon 2022. As such there are some features that are not yet implemented. We are planning on updating the project to a production-ready state in the future.

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

Authentication

The demo includes a basic authentication system. Use these credentials to log in:

• Email: admin@astro.demo
• Password: Astronaut570

Getting started

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Start development server:

   npm run dev

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

GitHub Template

The dashboard is also available as a GitHub template. You can use it to create a new project by clicking the “Use this template” button in the repository.

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
        • _breakpoint.scss // Responsive breakpoints

Responsive Breakpoint System

The dashboard includes a powerful and versatile breakpoint mixin system using modern CSS media query syntax. The system supports min-width, max-width, and range queries with predefined breakpoints or custom values.

Available Breakpoints

$breakpoints: (
  'default': 0,
  'xs': 320px,
  's': 480px,
  'm': 768px,
  'l': 1024px,
  'xl': 1280px,
  '2xl': 1536px,
)

Usage Examples

// Min-width (mobile-first approach)
.sidebar {
  @include breakpoint('l') {
    width: 250px;
  }
}

// Max-width (mobile overrides)
.dashboard-widget {
  @include breakpoint('m', 'max') {
    flex-direction: column;
  }
}

// Range between breakpoints (tablet-only styles)
.navigation {
  @include breakpoint('m', 'xl') {
    padding: 1rem 2rem;
  }
}

// Custom pixel values
.content {
  @include breakpoint(900px, 1200px) {
    max-width: 90%;
  }
}

// Alternative explicit syntax
.component {
  @include breakpoint-min('m') { }  // Min-width
  @include breakpoint-max('l') { }  // Max-width
  @include breakpoint-between('m', 'xl') { } // Range
}

Modern syntax

The breakpoint system uses modern CSS range syntax (width >= 768px instead of min-width: 768px), which is more readable and follows current CSS best practices.

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>

SSR support

While the demo uses SSG for simplicity, it’s recommended to use Astro’s SSR capabilities for proper authentication in production.

Contributing

1. Fork the repository on GitHub

2. Create a new branch:

   git checkout -b feat/your-feature-name

3. Make your changes and commit them:

   git commit -m "Add some feature"

4. Push to your fork:

   git push origin feat/your-feature-name

5. Open a Pull Request on GitHub

Best practice

When customizing the dashboard, maintain the accessibility features and test with screen readers and keyboard navigation.