0.0.9-6 • Published 8 months ago

senzui v0.0.9-6

Weekly downloads
-
License
ISC
Repository
github
Last release
8 months ago

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
0.0.9-6

8 months ago

0.0.9-3

8 months ago

0.0.9-1

8 months ago

0.0.9

8 months ago

0.0.8

8 months ago

0.0.6

8 months ago

0.0.5

8 months ago

0.0.4

8 months ago

0.0.3

8 months ago

0.0.2

8 months ago

0.0.1

8 months ago