A ready-to-use, SEO and accessibility-focused Astro starter template. Built with modern web standards and WCAG guidelines in mind, it provides a solid foundation for creating inclusive websites. Features Tailwind CSS integration, comprehensive component library, and example pages including a dynamic blog, 404, and MDX support.
(Accessibility) Features
- Astro 5+
- Tailwind CSS support
- Prettier integration with prettier-plugin-astro and prettier-plugin-tailwind
- ESLint integration with strict accessibility settings for eslint-plugin-jsx-a11y
- Markdown and MDX support with examples included in the theme
- Uses the awesome astro-icon package for the icons
- Excellent Lighthouse/PageSpeed scores
- Accessible landmarks such as header, main, footer, section and nav
- Outline focus indicator which works on dark and light backgrounds
- Several `aria` attributes which provide a better experience for screen reader users
- [...page].astro and [post].astro demonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination
- 404.astro provides a custom 404 error page which you can adjust to your needs
- Header.astro component included in the DefaultLayout.astro layout
- Footer.astro component included in the DefaultLayout.astro layout
- SkipLinks.astro component to skip to either the main menu or the main content
- Navigation.astro component with keyboard accessible (dropdown) navigation (arrow keys, escape key)
- ResponsiveToggle.astro component with an accessible responsive toggle button for the mobile navigation
- DarkMode.astro component toggle with accessible button and a user system preferred color scheme setting
- SiteMeta.astro SEO component for setting custom meta data on different pages
- .sr-only utility class for screen reader only text content (hides text visually)
- prefers-reduced-motion disables animations for users that have this preference turned on
- Ships with many components such as Accordions, Breadcrumbs, Modals, Pagination and many more
- A collection of utility classes such as breakpoints, button classes, font settings, resets and outlines in src/assets/scss/base
- Astro's View Transitions
Getting started
- Clone the repository or use as a template
- npm install Installs dependencies
- npm run dev Starts local dev server at localhost:4321
- npm run build Build your production site to ./dist/
- npm run preview Preview your build locally, before deploying
Read the documentation to learn more 🚀
