Installation

This guide walks you through setting up the A11y Starter Kit from scratch.

System Requirements

• Node.js 18.17 or later
• pnpm (recommended), npm, or yarn
• Git for cloning the repository

Step 1 -- Clone the Repository

The A11y Starter Kit is open source on GitHub:

git clone https://github.com/thefrontkit/a11y-starter-kit-code.git a11y-starter-kit
cd a11y-starter-kit

Step 2 -- Install Dependencies

pnpm install

Key Dependencies

Package	Purpose
next 16.x	React framework
react 19.x	UI library
tailwindcss 4.x	CSS framework with oklch tokens
@base-ui/react	Accessible UI primitives (shadcn/ui v4)
lucide-react	Icons
next-themes	Dark mode
sonner	Toast notifications

Step 3 -- Start the Dev Server

pnpm dev

Visit http://localhost:3000 to see the landing page.

Step 4 -- Verify the Setup

Navigate through key pages to confirm everything works:

• / -- Landing page with feature cards and accessibility badge
• /dashboard -- Dashboard with stat cards, sidebar navigation, and activity feed
• /data-table -- Sortable, filterable data table with pagination
• /settings -- Settings with tabbed interface for profile, notifications, and privacy
• /login -- Login form with validation and error handling
• /notifications -- Notification center with modals and toast messages

Available Scripts

Command	Description
pnpm dev	Start dev server
pnpm build	Create production build
pnpm start	Run production server
pnpm lint	Run ESLint checks

Integrating into an Existing Project

1. Copy components/a11y/ for the accessibility utility components
2. Copy hooks/ for the accessibility hooks
3. Copy components/layout/ for the skip link and layout primitives
4. Copy design tokens from app/globals.css
5. Install the required dependencies from package.json

Tip: The accessibility hooks and components are standalone -- you can drop them into any React project without the rest of the kit.

Troubleshooting

Port 3000 already in use:

pnpm dev --port 3001

TypeScript errors after installation:

npx tsc --noEmit

Check that tsconfig.json path aliases match your project structure.