axrac / qwik-hueeye

UI library for qwik with a special focus on colors (hue)

Qwik Hue Eye

A UI library for qwik with a strong focus on color management with native CSS variables.

⚠️ This is an experimental library with a TON of improvements to come.

npm i qwik-hueeye

Hue Eye comes with some global style with CSS variables. An easy way to import it is to use the QwikCityProvider in the root.tsx component. root.tsx

import { HueEyeProvider } from 'qwik-hueeye';

export default () => {
  return (
  <QwikCityProvider>
    <HueEyeProvider>
      {/* head & body here */}
    </HueEyeProvider>
  </QwikCityProvider>
  );
};

CSS variables

The goal of this lib is to be customizable with css variables.

Hue (required)

First set the hue you can to use for your application

html {
  --hue: 250; /* Blue color */
}

The whole theme will adapt based o nthis css variable.

demo: https://qwik-playground.vercel.app/

Components

• button
• accordion
• dialog
• navlist
• form

...More component later

Documentation takes time... You can take a look at the list of component here :

• tabs
• toaster
• checkbox
• checklist
• radio
• slider
• range
• toggle
• switch
• form-field
• input
• select