# solid-ui
[](https://www.npmjs.com/package/solid-ui)
User Interface widgets and utilities for Solid (solid-ui)
These are HTML5 widgets which connect to a solid store. Building blocks for solid-based apps.
Vanilla JS. Includes large widgets like chat, table, matrix, form fields, and small widgets.
See [Solid-Ui Storybook](http://solidos.github.io/solid-ui/examples/storybook/) for UI widgets.
See [Solid-UI API](https://solidos.github.io/solid-ui/docs/api/) for UI functions.
See [Forms introduction](./docs/FormsReadme.md) for UI vocabulary implementation.
## Table of Contents
- [Getting Started](#getting-started)
- [Install via npm](#install-via-npm)
- [Use Directly in Browser](#use-directly-in-a-browser)
- [UMD Bundle](#umd-bundle-global-variable)
- [ESM Bundle](#esm-bundle-import-as-module)
- [Development](#development-new-components)
- [Testing](#adding-tests)
- [Further Documentation](#further-documentation)
## Getting started
Contributions of bug fixes and new functionality, documentation, and tests are
always appreciated.
## Install via npm
```sh
npm install solid-ui rdflib solid-logic
```
Then import in your JavaScript/TypeScript code:
```js
import * as UI from 'solid-ui'
import * as $rdf from 'rdflib'
import * as SolidLogic from 'solid-logic'
// Example: Create a button
const button = UI.widgets.button(
document,
'https://solidproject.org/assets/img/solid-emblem.svg',
'Click me',
() => alert('Button clicked!')
)
document.body.appendChild(button)
```
## Use Directly in a Browser
Solid-UI provides both **UMD** and **ESM** bundles for direct browser usage. Both bundles externalize `rdflib` and `solid-logic`, which must be loaded separately.
### Available Files
- **UMD (Universal Module Definition)**:
- Development: `dist/solid-ui.js` (exposes global `window.UI`)
- Production: `dist/solid-ui.min.js` (minified)
- **ESM (ES Modules)**:
- Development: `dist/solid-ui.esm.js`
- Production: `dist/solid-ui.esm.min.js` (minified)
### UMD Bundle (Global Variable)
Load via `