https://github.com/waggylabs/yumekit
Web Component UI Kit
https://github.com/waggylabs/yumekit
ui-components uikit web-components
Last synced: about 2 months ago
JSON representation
Web Component UI Kit
- Host: GitHub
- URL: https://github.com/waggylabs/yumekit
- Owner: waggylabs
- Created: 2026-03-05T22:27:57.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-14T17:56:35.000Z (2 months ago)
- Last Synced: 2026-04-14T19:27:26.138Z (2 months ago)
- Topics: ui-components, uikit, web-components
- Language: JavaScript
- Homepage: https://www.yumekit.com
- Size: 1.08 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- Security: SECURITY.md
Awesome Lists containing this project
README
Yumekit
A modern, themeable Web Components UI kit — no framework required.
---
## Overview
YumeKit is a collection of 35 production-ready custom elements built with native Web Components. It works with any framework — or none at all — and ships with a comprehensive design token system, built-in theming, an icon registry, and full TypeScript support.
- **Zero dependencies** — built entirely on web standards
- **Framework-agnostic** — works with React, Vue, Svelte, or plain HTML
- **Themeable** — 22 built-in themes plus support for fully custom themes
- **Accessible** — ARIA-compliant, keyboard navigable, form-associated inputs
- **Tree-shakeable** — import only the components you use
---
## Installation
```bash
npm install @waggylabs/yumekit
```
---
## Usage
### Via CDN (script tag)
The IIFE bundle includes all components and icons. Drop it into any HTML page:
```html
Click me
```
### Via ESM (recommended)
Import the full library or individual components for tree-shaking:
```js
// Full library
import "@waggylabs/yumekit";
// Individual components
import "@waggylabs/yumekit/components/y-theme";
import "@waggylabs/yumekit/components/y-button";
import "@waggylabs/yumekit/components/y-input";
```
Then use the `` component to apply a theme:
```html
```
---
## Components
| Component | Element | Description |
| ------------ | ------------------ | --------------------------------------------------- |
| App Bar | `` | Top or side navigation bar |
| Avatar | `` | User avatar with shape and color variants |
| Badge | `` | Status badge or label |
| Breadcrumbs | `` | Navigation breadcrumb trail with collapse support |
| Button | `` | Button with icon, size, and style variants |
| Button Group | `` | Groups buttons (or inputs) into a connected toolbar |
| Card | `` | Content card container |
| Checkbox | `` | Form checkbox input |
| Date | `` | Date input |
| DatePicker | `` | A date and time picker |
| Dialog | `` | Modal dialog |
| Dock | `` | Fixed navigation dock |
| Drawer | `` | Side drawer / sidebar |
| Gallery | `` | Media gallery with lightbox |
| Icon | `` | SVG icon display |
| Input | `` | Text input field |
| Menu | `` | Dropdown navigation menu |
| Panel | `` | Accordion panel |
| Panel Bar | `` | Accordion panel group |
| Progress | `` | Progress bar |
| Radio | `` | Radio button input |
| Rating | `` | Star / icon rating input |
| Select | `` | Select / dropdown input |
| Slider | `` | Range slider input |
| Stack | `` | Layout container (row, column, grid, masonry) |
| Stepper | `` | Multi-step wizard with sequential flow |
| Switch | `` | Toggle switch |
| Table | `` | Sortable data table |
| Textarea | `` | Multi-line text input |
| Tabs | `` | Tabbed interface |
| Tag | `` | Tag / chip label |
| Theme | `` | Theme provider |
| Toast | `` | Notification toast |
| Tooltip | `` | Tooltip / popover |
---
## TypeScript
Type definitions are included. React-specific type augmentations are available at `@waggylabs/yumekit/react`.
```ts
import "@waggylabs/yumekit";
```
---
## License
MIT © [WaggyLabs](https://github.com/waggylabs)