An Accessible Admin Dashboard Theme for Astro with a login page and a dashboard overview. Includes accessibility features such as landmarks, better focus-outline and skip-links navigation.
(Accessibility) features
- Contains a login.astro page with an example login using the localStorage and a separate LoginLayout.astro layout
- login.astro contains example login data and a warning notification for when the credentials are incorrect
- Contains a dashboard example in the index.astro page using the DefaultLayout.astro layout
- Several examples of admin pages such as media.astro, messages.astro, products.astro, settings.astro and users.astro
- Media.astro component for images, used on the media.astro page *
- Pagination.astro component for paginating results, used on the media.astro page *
- DashboardWidget.astro component serves as an example for the dashboard on index.astro
- EmpyState.astro component which can be displayed on pages that don't have any data yet
- LoginForm.astro component with a basic accessible login form and some form controls
- SkipLinks.astro component to skip to either the main menu or the main content *
- Navigation.astro component with keyboard accessible navigation (arrow keys, escape key)
- This component is a comprehensive sidebar navigation on desktop with the option to expand or collapse
- The users menu width preference is stored in a localStorage value so that it is preserved during page reloads
- The navigation automatically switches to an accessible mobile navigation for viewport widths below the medium breakpoint
- ResponsiveToggle.astro component with an accessible responsive toggle button for the mobile navigation
- DarkMode.astro component toggle with accessible button which saves the users preference in the localStorage *
- 404.astro provides a custom 404 error page which you can adjust to your needs
- .sr-only utility class for screen reader only text content
- prefers-reduced-motion disables animations for users that have this preference turned on
- Outline focus indicator which works on dark and light backgrounds
- Accessible Astro Components package comes preinstalled with extra components such as Accordions, Modals and Notifications
- Nate Moore's awesome Astro Icon package is also preinstalled which can be applied to different use cases
