Senzui

Free, and open-source components for Qwik built with Tailwind CSS on top of Qwik UI.

Installation

Add tailwind to your Qwik project

# change this based on your package manager
pnpm run qwik add tailwind

Then, install Qwik UI's headless kit, clsx, and Senzui:

# change this based on your package manager
pnpm add @qwik-ui/headless clsx senzui

Then, add senzui, default and theme colors to your tailwind.config.js:

const { senzuiTheme } = require("senzui");
// or import { senzuiTheme } from 'senzui'

const config = {
  darkMode: "class",
  // ...
  theme: {
    extend: {
      colors: {
        senzui: senzuiTheme.main,
        theme: senzuiTheme.theme,
      },
    },
  },
};

Lastly, add senzui's node_module directory in your tailwind file for tailwind to scan the classes and apply the styles:

/** @type {import('tailwindcss').Config} */
const config = {
  content: [
    // ...,
    "./node_modules/senzui/**/*.{cjs,mjs}",
  ],
};

export default config;

You can now use the component you want!

import { Accordion } from "senzui";

const SenzuiSucks = () => {
  return <Accordion>{/* ... */}</Accordion>;
};

Available

• Accordion
• Alert
• Button
• Button Group
• Card
• Code Block
• Input
• Phone Input
• Tab
• Toast
• Tooltip