senzui
v0.0.9-6
Published
Free, and open-source components for Qwik built with Tailwind CSS on top of Qwik UI.
Downloads
15
Readme
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