# senzui

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

Latest version **0.0.9-6** (published 2023-09-18) · ISC license · 0 weekly downloads

## Install

```sh
npm install senzui
pnpm add senzui
yarn add senzui
bun add senzui
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9-6 |
| Published | 2023-09-18 |
| First published | 2023-09-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=15.0.0 |
| Dependencies | 3 |
| Unpacked size | 51.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | iamaeron |
| Keywords | qwik, components, qwik-ui |

## Links

- npm: https://www.npmjs.com/package/senzui
- Repository: https://github.com/iamaeron/senzui
- Homepage: https://github.com/iamaeron/senzui#readme
- Issues: https://github.com/iamaeron/senzui/issues
- npm.io page: https://npm.io/package/senzui

## Dependencies (3)

- [clsx](https://npm.io/package/clsx.md) ^2.0.0
- [shiki](https://npm.io/package/shiki.md) ^0.14.4
- [highlight.js](https://npm.io/package/highlight.js.md) ^11.8.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.0.9-6 (latest) — 2023-09-18
- 0.0.9-3 — 2023-09-16
- 0.0.9-1 — 2023-09-15
- 0.0.8 — 2023-09-15
- 0.0.6 — 2023-09-15
- 0.0.5 — 2023-09-13
- 0.0.4 — 2023-09-13
- 0.0.3 — 2023-09-13
- 0.0.2 — 2023-09-13
- 0.0.1 — 2023-09-13

## 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

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

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

```sh
# 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`:

```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:

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

export default config;
```

You can now use the component you want!

```jsx
import { Accordion } from "senzui";

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

### Available

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

---
_Source: https://npm.io/package/senzui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._