Better Design Systems at Scale
- 🌐 Runs in any environment (browser, server, etc)
- 🔍 Just-in-time code execution
- ♿ Fully accessible and tested across browsers and devices
- 🧩 Composable architecture with compound components
- 🔍 Comprehensive TypeScript support
- 🛠️ Decoupled from styling (headless)
- 🧰 Utilities for creating extensible design systems
- 🚀 Runs in any meta-framework that supports Qwik
Qwik Design System (QDS) is a next generation toolkit for creating Qwik apps of any size. It intends to be the foundation for design system authors, and is already being adopted in production by enterprise organizations.
It is currently in active development, and aims to provide:
- ✨ A component library of unstyled UI components (currently in development)
- 📚 A documentation framework that allows you to focus on content
- 🎨 A comprehensive icons library
- 📊 A powerful data visualization library (charts)
- 🧮 A flexible and accessible tables library
And much more, you can view our roadmap here.
To install the project, run the following command:
npm i -D @kunai-consulting/qwikWe welcome contributions to Qwik Design System!
To learn more about contributing to QDS, please visit our contribution docs.
QDS is built with:
- Qwik ⚡: Our core framework for environment agnostic components
- TypeScript 🔒: For type safety and better developer experience
- Vite 🚀: For fast development and optimized builds
- MDX 📝: For documentation with embedded components
- Vitest 🧪: For unit and component testing
- Playwright 🎭: For end-to-end testing
- Tailwind CSS 🎨: For styling the documentation site itself
- Changesets 📦: For versioning and changelog management
We also use Biome for linting and formatting. Please enable the Biome extension in VSCode to get the recommended rules and formatting.
Qwik Design System is currently focused on Phase 1: Core Headless Components. Future phases will include design system tooling and enterprise features.
For more information, visit qwik.design