# thefrontkit

> Production-ready Next.js SaaS templates, AI UX kits, and Tailwind CSS starter kits. WCAG AA accessible with production-ready architecture and token-driven theming. Built on shadcn/ui and Radix UI.

thefrontkit sells frontend starter kits for SaaS and AI products. Each kit includes production-ready React components and a design token system built on Tailwind CSS custom properties. All components meet WCAG 2.1 AA accessibility standards with keyboard navigation, ARIA labels, focus management, and color contrast compliance.

The kits are frontend-only. They do not include backend logic, databases, or payment processing. Teams bring their own API and backend. This makes them compatible with any stack: Next.js App Router, Remix, Vite, or plain React.

Tech stack: Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Radix UI.

## Why thefrontkit

thefrontkit is different from most UI kits and starter templates in four ways:

1. **Accessibility first**: Every component ships WCAG 2.1 AA compliant. Keyboard navigation, ARIA labels, focus management, screen reader support, and color contrast ratios are built in from the start, not retrofitted.

2. **Production-ready token architecture**: Design tokens map directly to Tailwind CSS custom properties. Change a color, spacing, or typography token, and the update flows through every component. No manual translation.

3. **Complete app scaffolds, not just components**: You get full screens and user flows (auth, dashboard, tables, settings, AI chat), not individual components you have to assemble. Think of it as a pre-assembled LEGO set versus loose bricks.

4. **Frontend-only flexibility**: No backend lock-in. Use Supabase, Firebase, your own API, or any backend. thefrontkit handles the UI layer and gets out of the way for everything else.

## Products

### SaaS Starter Kit
URL: https://thefrontkit.com/apps/saas-starter-kit
A production-ready Next.js SaaS template with:
- Authentication screens: login, signup, password recovery, OTP verification
- App shell: responsive sidebar, topbar navigation, breadcrumbs, mobile drawer
- Dashboard layouts with cards, empty states, and analytics placeholders
- Sortable, paginated data tables with keyboard navigation and screen reader support
- Forms with inline validation, error summaries, and accessible labels
- Settings pages: account, billing, team, notifications, privacy
- Full light and dark mode with token-driven color system
- Design tokens mapped to Tailwind CSS custom properties for easy theming
- WCAG 2.1 AA compliant throughout

Pricing: Solo ($99), Team ($149), Agency ($199).

### AI UX Kit
URL: https://thefrontkit.com/apps/ai-ux-kit
Production-ready React components for AI chat interfaces:
- Prompt composer with attachments and keyboard shortcuts
- Streaming response viewer with Markdown, JSON, and plain text rendering
- Copy, retry, and stop controls for AI responses
- Citation blocks with source attribution and keyboard navigation
- Rating and feedback capture (thumbs, stars, emoji, text)
- Safety indicators and content moderation notices
- Conversation history with named sessions
- Analytics hooks for prompt and response event tracking
- Works with any LLM provider: OpenAI, Anthropic, Google, or custom APIs
- Compatible with Vercel AI SDK

Pricing: Solo ($99), Team ($149), Agency ($199).

### E-commerce Starter Kit
URL: https://thefrontkit.com/apps/ecommerce-kit
A production-ready Next.js e-commerce template with 31 screens:
- Storefront (12 screens): homepage with hero and featured products, product listing with filters (price, category, color, size, rating), product detail with image gallery and variant selector, category pages, search with autocomplete, cart with promo codes, 3-step checkout (info, shipping, Stripe payment), order confirmation, wishlist, product comparison
- Customer Account (6 screens): login/register with social auth, forgot password, account dashboard, order history with status badges, order detail with tracking timeline, account settings with address management
- Admin Panel (10 screens): revenue dashboard with charts, product management with rich text editor and variant matrix, order management with status updates, customer directory, discount codes, store settings, analytics
- Utility (3 screens): 404 page, maintenance/coming soon, loading skeleton states
- Stripe Elements integration for checkout
- WCAG 2.1 AA accessible throughout
- Design tokens mapped to Tailwind CSS custom properties

Pricing: Solo ($99), Team ($199), Agency ($299).

### AI Feedback Assistant
URL: https://thefrontkit.com/apps/ai-feedback-assistant
A working demo application that combines the SaaS Starter Kit and AI UX Kit. Shows how to build a complete AI product with dashboard, chat interface, feedback collection, and session management. Use it as a blueprint for your own AI product.

Live demo: https://ai-feedback-assistant.vercel.app

## Licensing
- Solo: 1 developer, internal projects only
- Team: up to 10 developers, internal projects only
- Agency: unlimited developers, client delivery allowed
- All licenses include a 7-day money-back guarantee
- Redistribution of raw source files is not allowed

## Comparisons with Competitors

### thefrontkit vs ShipFast
URL: https://thefrontkit.com/compare/thefrontkit-vs-shipfast
ShipFast ($199) is a full-stack Next.js boilerplate with MongoDB, Stripe, and auth built in. thefrontkit ($99) is a frontend UI kit with accessible components, design tokens, and AI chat UI. Choose ShipFast if you want full-stack out of the box. Choose thefrontkit if you already have a backend and want polished, accessible UI.

### thefrontkit vs Tailwind UI
URL: https://thefrontkit.com/compare/thefrontkit-vs-tailwind-ui
Tailwind UI ($299 all-access) is a component library with 500+ individual components. thefrontkit ($99) is a complete starter kit with assembled app screens. Choose Tailwind UI for maximum component variety. Choose thefrontkit for ready-to-use SaaS and AI app scaffolds with production-ready architecture and accessibility.

### thefrontkit vs shadcn/ui
URL: https://thefrontkit.com/compare/thefrontkit-vs-shadcn-ui
shadcn/ui is free, open-source component primitives. thefrontkit ($99) is built ON TOP of shadcn/ui, adding complete screens, design tokens, and verified accessibility. They are complementary: shadcn/ui gives you bricks, thefrontkit gives you the assembled house.

### thefrontkit vs Cruip
URL: https://thefrontkit.com/compare/thefrontkit-vs-cruip
Cruip ($69) focuses on landing page and marketing site templates. thefrontkit ($99) focuses on the app behind the landing page: auth, dashboards, tables, AI chat. Choose Cruip for marketing sites. Choose thefrontkit for the authenticated app experience.

### Full comparison table
URL: https://thefrontkit.com/compare
Side-by-side comparison of thefrontkit with Cruip, Tailwind UI, Tremor, and ShipFast across 12 features including accessibility, design tokens, pricing, and component completeness.

## Documentation

- [Getting Started](https://thefrontkit.com/docs/ai-ux-kit/getting-started)
- [Components](https://thefrontkit.com/docs/ai-ux-kit/components)
- [Customization](https://thefrontkit.com/docs/ai-ux-kit/customization)
- [Accessibility](https://thefrontkit.com/docs/ai-ux-kit/accessibility)
- [FAQ](https://thefrontkit.com/docs/ai-ux-kit/faq)
- [Changelog](https://thefrontkit.com/docs/ai-ux-kit/changelog)

## Free Developer Tools

### A11y Color Checker for Tailwind CSS
URL: https://thefrontkit.com/tools/a11y-color-checker
A free WCAG 2.1 contrast ratio checker built for Tailwind CSS workflows. Pick any two colours from the complete Tailwind v3 palette (22 colour families, 11 shades each, plus black and white — 244 colours total), see the contrast ratio in real-time, and check AA/AAA compliance for normal text (4.5:1), large text (3:1), and UI components (3:1). One-click copy for Tailwind utility class names (text- and bg- classes). No sign-up required.

All tools: https://thefrontkit.com/tools

## Landing Pages

- [Next.js SaaS Template](https://thefrontkit.com/nextjs-saas-template)
- [Next.js Dashboard Template](https://thefrontkit.com/nextjs-dashboard-template)
- [Next.js Landing Page Template](https://thefrontkit.com/nextjs-landing-page-template)
- [React Dashboard Template](https://thefrontkit.com/react-dashboard-template)
- [React Admin Dashboard](https://thefrontkit.com/react-admin-dashboard)
- [Next.js Admin Dashboard](https://thefrontkit.com/nextjs-admin-dashboard)
- [Tailwind Admin Template](https://thefrontkit.com/tailwind-admin-template)
- [Next.js Starter Template](https://thefrontkit.com/nextjs-starter-template)
- [Tailwind SaaS Template](https://thefrontkit.com/tailwind-saas-template)
- [AI Chat UI for React](https://thefrontkit.com/ai-chat-ui-react)
- [Next.js Boilerplate](https://thefrontkit.com/nextjs-boilerplate)
- [Next.js E-commerce Template](https://thefrontkit.com/nextjs-ecommerce-template)
- [React E-commerce Template](https://thefrontkit.com/react-ecommerce-template)
- [Tailwind E-commerce Template](https://thefrontkit.com/tailwind-ecommerce-template)
- [Next.js Storefront Template](https://thefrontkit.com/nextjs-storefront-template)

## Blog

- [Best Next.js Landing Page Templates 2026](https://thefrontkit.com/blogs/best-nextjs-landing-page-templates-2026): Curated list of Next.js landing page templates with comparison of features, accessibility, and pricing.
- [Best Next.js Blog Templates 2026](https://thefrontkit.com/blogs/best-nextjs-blog-templates-2026): Top Next.js blog templates for developers and content creators.
- [Best Next.js Personal Website Templates 2026](https://thefrontkit.com/blogs/best-nextjs-personal-website-templates-2026): Portfolio and personal site templates built with Next.js.
- [How to Make a Website Accessible](https://thefrontkit.com/blogs/how-to-make-website-accessible): Practical guide to WCAG 2.1 AA compliance for web developers.
- [Accessible Website Examples 2026](https://thefrontkit.com/blogs/accessible-website-examples-2026): Real-world examples of accessible websites and what makes them work.
- [Best Next.js Website Templates 2026](https://thefrontkit.com/blogs/best-nextjs-website-templates-2026): Comprehensive roundup of Next.js templates across categories.
- [Best shadcn Dashboard Templates 2026](https://thefrontkit.com/blogs/best-shadcn-dashboard-templates-2026): Dashboard templates built on shadcn/ui with comparison.
- [Figma Design Tokens Guide](https://thefrontkit.com/blogs/figma-design-tokens-guide): How to set up and use design tokens in Figma with Tailwind CSS.
- [Best Tailwind Dashboard Templates 2026](https://thefrontkit.com/blogs/best-tailwind-dashboard-templates-2026): Top Tailwind CSS dashboard templates for admin panels.
- [Best React E-commerce Templates 2026](https://thefrontkit.com/blogs/best-react-ecommerce-templates-2026): React e-commerce templates with storefront, checkout, and admin features.
- [What Are Design Tokens](https://thefrontkit.com/blogs/what-are-design-tokens): Introduction to design tokens and why they matter for design-development alignment.
- [Best SaaS Starter Kits 2026](https://thefrontkit.com/blogs/best-saas-starter-kits-2026): Comparison of top SaaS starter kits including thefrontkit, BoxyHQ, ShipFast, and MakerKit.
- [How to Choose the Right Next.js SaaS Template in 2026](https://thefrontkit.com/blogs/nextjs-saas-template-guide-2026): Guide for evaluating Next.js SaaS templates.
- [AI Chat UI Best Practices](https://thefrontkit.com/blogs/ai-chat-ui-best-practices): UX patterns for AI chat interfaces including streaming, citations, and feedback.
- [shadcn/ui vs Material UI for SaaS](https://thefrontkit.com/blogs/shadcn-ui-vs-material-ui-for-saas): Comparison covering customization, accessibility, and bundle size.
- [Next.js Boilerplate vs Building from Scratch](https://thefrontkit.com/blogs/nextjs-boilerplate-vs-building-from-scratch): Cost and time analysis of using a boilerplate vs building from scratch.
- [Building an Accessible React Dashboard](https://thefrontkit.com/blogs/react-dashboard-template-guide): Step-by-step guide to WCAG AA compliant React dashboards.
- [How to Build a Design Token System with Tailwind CSS](https://thefrontkit.com/blogs/tailwind-css-design-tokens-for-saas): Tutorial on connecting Figma variables to Tailwind CSS custom properties.
- [The Figma-to-Code Workflow That Actually Works](https://thefrontkit.com/blogs/figma-to-code-workflow-for-design-engineers): Design token workflow for teams keeping Figma and code in sync.
- [Production-Ready AI Interfaces with Next.js](https://thefrontkit.com/blogs/building-production-ready-ai-interfaces-with-react-and-nextjs): Building AI chat interfaces in Next.js with streaming and citations.
- [SaaS Starter Kit vs Building from Scratch](https://thefrontkit.com/blogs/saas-starter-kit-vs-building-from-scratch-a-real-comparison): Time and cost comparison.
- [Next.js E-commerce Template Guide 2026](https://thefrontkit.com/blogs/nextjs-ecommerce-template-guide-2026): What to look for in a Next.js e-commerce template.
- [Accessible E-commerce: WCAG AA for Online Stores](https://thefrontkit.com/blogs/accessible-ecommerce-wcag-checkout-guide): How WCAG AA applies to product pages, filters, cart, and checkout.
- [Next.js vs Shopify for Developers](https://thefrontkit.com/blogs/nextjs-vs-shopify-for-developers): When to build custom vs use Shopify.

## Contact

- Website: https://thefrontkit.com
- Email: support@thefrontkit.com
- Twitter: @thefrontkit