Headless kit
Taking inspiration from popular headless libraries such as Headless UI, Radix UI, React Aria, Kobalte, and Melt UI, the headless kit is a library of completely unstyled, accessible, and resumable components with built-in structure, behavior, and state. You can use it to build your design system from scratch with any of the tools you want, or simply use the docs as a reference to the components API if you're using the styled kit.
Vision
In 2024, developers should not have to recreate the same WAI-Aria Patterns from scratch. Building custom components is challenging, and developers shouldn't need to reinvent common UI patterns.
Our aim is to ensure Qwik UI is not just an effective, but also a simple, reliable, and flexible choice for developing applications.
Qwik UI Headless is optimized to squeeze every possible ounce of performance out of Qwik (Like lemonade from lemons that had a run-in with a steamroller.) 🥤
Why Qwik UI Headless?
The client and the server
Like Qwik itself, Qwik UI is super performant because it renders everything it can on the server
Unlike many other solutions that focus solely on client-side components, Qwik UI takes advantage of the server, the client, and the concept of resumability.
This means that Qwik UI can operate with any meta-framework that supports Qwik, including the full framework benefits. At the time of writing, that includes Qwik City and Astro.
Embracing native first
Qwik values HTML as the source of truth, and this principle extends to Qwik UI components. We appreciate and adopt the excellent work done by the Open UI Group when appropriate.
This approach also encompasses future native APIs. Users of Qwik UI might find themselves using components that can be gradually adopted into the native specification. This implies that, eventually, these custom patterns might not need any JavaScript.
Thanks to resumability, we do less work because there are less components to execute. With Qwik UI we build on top of that, providing the same functionality with less code needed to prefetch in the first place.
Features
Unstyled
Qwik UI is a headless library, and comes with zero or very minimal styling. This means the design of your components are completely customizable.
import { component$, useSignal, useStyles$ } from '@builder.io/qwik';
import { Modal, ModalContent, ModalFooter, ModalHeader } from '@qwik-ui/headless';
import styles from './headless-css.css?inline';
export default component$(() => {
const showSig = useSignal(false);
useStyles$(styles);
return (
<Modal class="modal" bind:show={showSig}>
<ModalHeader class="modal-header" />
<ModalContent class="modal-body" />
<ModalFooter class="modal-footer" />
</Modal>
);
});
This is in contrast to styled libraries such as Bootstrap or Material UI, where styles often need to be stripped in order to be custom.
.modal {
min-width: 50rem;
min-height: 50rem;
border-radius: 5px;
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
padding: 1rem;
}
.modal-header {
margin-bottom: 1rem;
}
.modal-body {
margin-bottom: 1rem;
}
.modal-footer {
text-align: right;
}
Accessible at its core
Everyone should have equal access to information and functionality on the web. Every Qwik UI component is designed to follow the WCAG Guidelines.
However, it's a common misconception that meeting WCAG success criteria guarantees full accessibility of your components. Unfortunately, this is not the case.
The ultimate measure of your components' accessibility is user testing. This aspect, often overlooked in other projects, is a high priority for us.
Developer Experience that matches UX
Many libraries tout their excellent Developer Experience (DX), but this doesn't necessarily translate into a superior User Experience (UX).
Conversely, some packages offer great UX, but fall short when it comes to DX.
One of the benefits of Qwik is its ability to create performant applications without compromising on DX. Our goal is to extend this same balance of performance and ease-of-use to those utilizing Qwik UI components.
Some examples being:
- TypeScript support
- Custom Signal Binds
- Automatic entry and exit animations across browsers
- Works across environments / microfrontends
- Automatic performance optimization
FAQ
If you stumble into any problems, create an issue on the Qwik UI repository. We also have a discord community with a Qwik UI channel where you can raise any concerns, propose ideas, or chat all things Qwik UI 😊
We provide a contributing guide to help get familiar with the repository. Additionally, we offer a quick start setup guide and a section dedicated to advanced resources below the Components navigation.
If you're using Qwik-React
, Qwik-Angular
, @qwikdev/astro
, we suggest
incrementally adding Qwik UI components to your application. Qwik, built as a
microfrontend, allows you to incrementally integrate Qwik UI components into your
existing application. This approach reduces migration risk and complexity, letting
you leverage Qwik UI's benefits at your own pace.
Credits
We strongly believe in having a learner's mindset, and as such, we've drawn inspiration from a multitude of projects, learning from their successes and challenges.
Qwik UI's development has been shaped by the following remarkable projects: