# zWebUI

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

## Basic Information

- **Project Name**: zWebUI
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-16
- **Last Updated**: 2026-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## 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
import "zwebui/theme";           // 注册组件 + 注入设计 token
themeController.init();
```

Or import the entry and the theme CSS separately:

```ts
import { themeController } from "zwebui";
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