🎨 The Project: Quokka UI
Quokka UI is a token-driven React component library designed to help developers build modern, accessible interfaces with predictable design tokens and a consistent API. Every component is built with React, TypeScript, and Radix primitives to ensure strong accessibility and composability out of the box.
🛑 The Problem: Scaling UI Consistency
Large applications often face two major UI challenges:
- Accessibility Debt: Components that are styled correctly but lack WAI-ARIA compliance, leading to hidden maintenance costs.
- Theming Pain: Switching between light/dark modes often causes hydration flash or requires verbose logic across the codebase.
✨ The Quokka Solution: CSS Variables & Radix Primitives
Architecture Signal: Token-Driven Design
Theming: It is built on
CSS variables and Tailwind v4 theme tokens. This allows for
instant theme switching using a single data-theme attribute (like
data-theme="dark") without client-side heavy lifting.
Quality Signal: Accessibility & Testing
A11Y Guarantee: Components are Accessible by default by leveraging robust Radix UI primitives under the hood. Fully tested with Vitest + React Testing Library for stability.
🧹 Component Philosophy (DX Focused)
- Headless where it matters (fully controllable with props).
- Composable and tree-shakeable with a minimal API surface.
- Design System Ready for consistent themes and scaling across projects.
Tech Stack: React, TypeScript, Tailwind v4, Radix UI, Storybook.
View Quokka UI on GitHub