Qwik Design System (QDS)

Production Ready

• 🌐 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.

Installation 💻

To install the project, run the following command:

npm i -D @qds.dev/ui

Contributing

We welcome contributions to Qwik Design System!

To learn more about contributing to QDS, please visit our contribution docs.

Created by Kunai

Kunai funds the work that makes Qwik Design System possible.

Their sponsorship enables:

• Full-time development of core components
• Comprehensive documentation and examples
• Regular maintenance and updates
• Community support and engagement

We're grateful for Kunai's continued support in making QDS a production-ready design system for the Qwik ecosystem.

Tech Stack

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
• Tailwind CSS 🎨: For styling the documentation site itself
• Changelogen 📦: For changelog generation
• Bumpp 📦: For versioning bumping

We also use Oxlint for linting, and Biome for formatting. Please enable both of the recommended extensions in VSCode to get the recommended rules and formatting.

Roadmap

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