GitHub repoGitHub logoA silhouette of a cat

a11y-stack | home page

An accessibility-focused, type-safe Next.js frontend framework stack

Modular | Semantic | Extensible

npx create-a11y-stack-app@latest
A line of code, illustrated using preformatted text characters, which states the following: npx create-a11y-stack-app@latest
Next.js logoThe Next.js logo in whiteTypeScript logoThe letters T and S in white inside a blue boxStorybook logoAn 'S' inside a bright pink book-shape with a bookmark cut-out in the top right cornerTailwind logoTwo blue wavy lines stacks on top of one anothershadcn/ui logoTwo adjacent white lines at an angle, one shorter than the other, against a black backdropReact Hook Form logoA white clipboard inside a bright pink rounded squareZod logoA diamond-shape with the letter 'Z' inside, with different accents of blue Playwright logoTwo masks, one red with a sad face and one green with a happy faceThe Prettier logoESLint logoA white hexagon inside a solid purple hexagon at alternate angles

🐶

a11y-stack is an opinionated, unified and robust framework which enforces type-checking, sound coding practices and accessibility at the forefront of development

sound semantic practices

Enforces proper, accessible HTML across components using correct semantics

enforces type safety

TypeScript, Zod schema validation and code formatting all work together

extensible

Turn this into a full stack framework using Prisma, Drizzle, Payload, Next Auth etc.

created to solve three main developer pain points

  1. time spent scaffolding an app with several dependencies and scripts to run before actually building, wasting valuable development time

  2. challenges implementing modern, a11y-focused components which pass Lighthouse, WCAG and other a11y testing audits

  3. cross-dependency issues, including debugging TypeScript and non-TypeScript features and numerous configuration files between different libraries

out of the box

Next.js logoThe Next.js logo in white

Next.js

A full stack framework built upon React, Next.js offers dynamic routing, API routes, extensibility with database platforms and SEO capabilities under-the-hood

TypeScript logoThe letters T and S in white inside a blue box

TypeScript

A statically-typed superset of Javascript which adds additional support for types to help catch errors and bugs during compile time.

Storybook logoAn 'S' inside a bright pink book-shape with a bookmark cut-out in the top right corner

Storybook

An extensive library which allows isolated building of UI components, including a11y, interaction and visual testing.

Tailwind logoTwo blue wavy lines stacks on top of one another

Tailwind CSS

A mobile-first responsive CSS framework library which uses pre-set utility classes for rapid rendering of component styling.

shadcn/ui logoTwo adjacent white lines at an angle, one shorter than the other, against a black backdrop

Shadcn

An extensive library of ready-to-use components built upon Radix primitives, Shadcn addresses many accessibility challenges which also plays nice with Tailwind

React Hook Form logoA white clipboard inside a bright pink rounded square

React Hook Form

A lightweight, performant library for managing form state and validation in React applications, utilizing hooks to simplify form handling with minimal re-renders and an intuitive API

Zod logoA diamond-shape with the letter 'Z' inside, with different accents of blue

Zod

A TypeScript-first schema declaration and validation library that enables developers to define, validate, and infer types for complex data structures at runtime, ensuring data integrity and type safety in applications.

Playwright logoTwo masks, one red with a sad face and one green with a happy face

Playwright

A powerful open-source automation framework for web testing and browser automation, including axe-core a11y integration and visual regression testing.

The Prettier logo

Prettier

A popular, opinionated code formatter that automatically formats code to ensure consistent style across projects, supporting multiple languages and integrating seamlessly with various development environments and workflows

ESLint logoA white hexagon inside a solid purple hexagon at alternate angles

ESLint

A pluggable and configurable linting library for identifying and reporting patterns in JavaScript in order to ensure code consistency and reduce bugs.

🐶

Husky

Simplifies the integration of Git hooks into development workflows, allowing task automation and enforcing code quality standards prior to commits and pushes.