# zWebUI

**Repository Path**: cpsoft13/z-web-ui

## Basic Information

- **Project Name**: zWebUI
- **Description**: 一套专门为AI提供的前端组件。用于AI vibe coding项目。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-16
- **Last Updated**: 2026-09-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: AI, UI, 组件

## README

# zwebui

A lightweight, framework-agnostic Web Component UI library. Built with native Custom Elements, CSS Custom Properties theming, and tree-shakeable ESM modules. Just import and use — no bundler config required.

## Install

```bash
npm install zwebui
```

## Quick Start

```ts
// 按需引入组件，导入即注册 custom element
import "zwebui/components/button";

// 注入设计 token（幂等）
import { themeController } from "zwebui/theme";
themeController.init();
```

Or import the theme CSS separately instead of the theme module:

```ts
import { themeController } from "zwebui/theme";
import "zwebui/zwebui.css";
themeController.init();
```

```html
<z-button variant="primary">Primary</z-button>
<z-table id="table"></z-table>
```

```ts
const table = document.querySelector("z-table");
table.columns = [
  { key: "name", header: "Name", sortable: true },
  { key: "ops", header: "Actions", align: "center",
    render: (_v, row) => `<z-button size="sm" data-action="edit" data-id="${row.name}">Edit</z-button>` },
];
table.data = [{ name: "Alice" }];

table.addEventListener("z-click", (e) => console.log(e.target.dataset));
```

## Theming

Design tokens are injected automatically by `themeController.init()` (idempotent). Dark mode:

```ts
themeController.theme = "dark";       // 或 themeController.toggle()
```

## Components

Button, Input, Select, Checkbox, Radio, Switch, Modal, Table, ReportTable, Tabs, Tooltip, Menu, Toast, Badge, Divider, Spinner, Card, Tag, Avatar, Skeleton, Alert, Progress, Pagination, Accordion, Popover, Datepicker, Tree, Markdown, Chart (bar/line/area/pie/donut/sparkline/map), Login.

Each component can be imported individually:

```ts
import "zwebui/components/button";
```

## React

Optional React wrappers are available via `zwebui/react` (React >= 17, optional peer dependency).

## License

MIT