- Astro 4.0
- Tailwind CSS support
- Prettier integration with
prettier-plugin-astroandprettier-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-iconpackage for the icons - Excellent Lighthouse/PageSpeed scores
- Accessible landmarks such as
header,main,footer,sectionandnav - Outline focus indicator which works on dark and light backgrounds
- Several
ariaattributes which provide a better experience for screen reader users [...page].astroand[post].astrodemonstrate the use of dynamic routes and provide a basic blog with breadcrumbs and pagination404.astroprovides a custom 404 error page which you can adjust to your needsHeader.astrocomponent included in theDefaultLayout.astrolayoutFooter.astrocomponent included in theDefaultLayout.astrolayoutSkipLinks.astrocomponent to skip to either the main menu or the main contentNavigation.astrocomponent with keyboard accessible (dropdown) navigation (arrow keys, escape key)ResponsiveToggle.astrocomponent with an accessible responsive toggle button for the mobile navigationDarkMode.astrocomponent toggle with accessible button and a user system preferred color scheme settingSiteMeta.astroSEO component for setting custom meta data on different pages.sr-onlyutility class for screen reader only text content (hides text visually)prefers-reduced-motiondisables 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 - View Transitions (
⚠️ see astro-docs for accessibility considerations)
Clone this theme locally and run any of the following commands in your terminal:
| Command | Action |
|---|---|
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 |