Qwik Design System 🚀

A design system framework to manage your project UI at scale.

Key features ✨

• 🎨 Unstyled base components for flexible customization
• 📐 Styling guide for creating consistent components
• 📦 Ready-to-use, copy-paste styled components
• 🖥️ Interactive component showcase with live examples
• ♿ Accessibility-first approach in component design
• 🎭 Customization options for adapting to various brand identities
• 📚 Detailed API documentation for each component
• 🔄 Version control and changelog for easy updates
• 🎨 Design tokens for maintaining consistent styles across the system
• 🛠️ Developer tooling for efficient workflow and debugging

Why Qwik Design System? 🤔

Qwik Design System offers a comprehensive solution for building modern, efficient, and consistent user interfaces. Here's why you should consider it:

• Qwik-optimized ⚡: Built specifically for Qwik, ensuring optimal performance and seamless integration
• Customizable 🎨: Easily adapt components to match your brand's unique style and requirements
• Accessibility-focused ♿: Ensures your applications are usable by everyone, right out of the box
• Responsive 📱: Designed to work flawlessly across all device sizes and orientations
• Developer-friendly 👩‍💻👨‍💻: Intuitive API, extensive documentation, and ready-to-use components accelerate development
• Performance-first 🏎️: Lightweight and optimized components that don't compromise on functionality
• Consistent design language 🎭: Maintain visual and functional consistency across your entire application
• Scalable 📈: Designed to grow with your project, from small applications to large-scale enterprises
• Community-driven 🤝: Benefit from continuous improvements and additions from an active community
• Time-saving ⏱️: Reduce development time with pre-built, tested, and documented components

Whether you're starting a new project or looking to improve an existing one, Qwik Design System provides the tools and structure needed to create beautiful, efficient, and consistent user interfaces.

Getting Started 🏁

Create a new design system from the Qwik Design System template, a starting point for managing your company design system.

Installation 💻

To install Qwik the ui components, run the following command:

npm i -D @kunai-consulting/qwik-components

To install the ui hooks, run the following command:

npm i -D @kunai-consulting/qwik-hooks