# Smart UI Community - Free Open-Source Web Components

**`smart-webcomponents-community` is the free, Apache-2.0 licensed subset of the Smart UI suite: 38
standards-based custom elements covering inputs, buttons, layout and navigation. It has no
third-party dependencies and works in plain HTML or with any framework.**

[![npm version](https://img.shields.io/npm/v/smart-webcomponents-community.svg)](https://www.npmjs.com/package/smart-webcomponents-community)
[![npm downloads](https://img.shields.io/npm/dm/smart-webcomponents-community.svg)](https://www.npmjs.com/package/smart-webcomponents-community)
[![License](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](./LICENSE)

[Live demos](https://www.htmlelements.com/demos/) ·
[Documentation](https://www.htmlelements.com/docs/) ·
[Community vs. Enterprise](https://www.htmlelements.com/docs/community-and-enterprise/) ·
[Theme Builder](https://www.htmlelements.com/themebuilder/)

## Contents

- [What is Smart UI Community?](#what-is-smart-ui-community)
- [Installation](#installation)
- [Quick start](#quick-start)
- [Components](#components)
- [What is not included](#what-is-not-included)
- [Theming](#theming)
- [FAQ](#frequently-asked-questions)
- [License](#license)

## What is Smart UI Community?

Smart UI Community is the free edition of the Smart UI component library. It provides 38 UI
components built as native custom elements, so they run in a plain HTML page or inside any framework
with no build step required.

The community edition covers form and layout building blocks: inputs, dropdowns, buttons, menus,
tabs, trees and windows. Data components such as the Grid, Pivot Table, Scheduler and Gantt Chart are
part of the commercial suite.

## Installation

```sh
npm install smart-webcomponents-community
```

## Quick start

Load a theme and the components you need, then use the elements:

```html
<link rel="stylesheet"
      href="node_modules/smart-webcomponents-community/source/styles/smart.default.css" />
<script type="module"
        src="node_modules/smart-webcomponents-community/source/modules/smart.window.js"></script>

<smart-window label="Hello">Window content.</smart-window>
```

Each component is a self-contained ES module under `source/modules/`, so you load only what you use.
`source/components/` holds the same components in non-module form for `<script>`-tag loading.

## Components

38 components ship in the package. Each name links to its API reference.

**Charts and data visualization**

[Progress Bar](https://www.htmlelements.com/docs/progress-bar/) · [Bar Code](https://www.htmlelements.com/docs/barcode/) · [QR Code](https://www.htmlelements.com/docs/qr-code/)

**Layout and navigation**

[Accordion](https://www.htmlelements.com/docs/accordion/) · [Tabs](https://www.htmlelements.com/docs/tabs/) · [Window](https://www.htmlelements.com/docs/window/) · [Splitter](https://www.htmlelements.com/docs/splitter/) · [Menu](https://www.htmlelements.com/docs/menu/) · [List Menu](https://www.htmlelements.com/docs/list-menu/) · [Toast](https://www.htmlelements.com/docs/toast/) · [Tooltip](https://www.htmlelements.com/docs/tooltip/)

**Editors and inputs**

[Input](https://www.htmlelements.com/docs/input/) · [Text Box](https://www.htmlelements.com/docs/text-box/) · Text Area · [Masked Text Box](https://www.htmlelements.com/docs/masked-text-box/) · [Numeric Text Box](https://www.htmlelements.com/docs/numeric-text-box/) · [Password Text Box](https://www.htmlelements.com/docs/password-text-box/) · [Combo Box](https://www.htmlelements.com/docs/combo-box/) · Multi Input · [Drop Down List](https://www.htmlelements.com/docs/drop-down-list/) · [Drop Down Button](https://www.htmlelements.com/docs/drop-down-button/) · [List Box](https://www.htmlelements.com/docs/list-box/) · [Tree](https://www.htmlelements.com/docs/tree/) · [Date Time Picker](https://www.htmlelements.com/docs/date-time-picker/) · Date Input · Date Range Input · Check Input · Country Input · Phone Input · [Color Picker](https://www.htmlelements.com/docs/color-picker/) · [Color Input](https://www.htmlelements.com/docs/color-input/) · [File Upload](https://www.htmlelements.com/docs/file-upload/) · [Rating](https://www.htmlelements.com/docs/rating/) · [Slider](https://www.htmlelements.com/docs/slider/) · [Form](https://www.htmlelements.com/docs/form/)

**Buttons**

[Button](https://www.htmlelements.com/docs/button/) · [Radio Button](https://www.htmlelements.com/docs/radio-button/) · [Check Box](https://www.htmlelements.com/docs/check-box/)


## What is not included

The following are part of the commercial
[`smart-webcomponents`](https://www.npmjs.com/package/smart-webcomponents) package and are **not**
in the community edition:

Grid · Table · Pivot Table · Card View · Scheduler · Gantt Chart · Kanban · Timeline · Chart ·
3D Chart · Editor · Ribbon · Docking Layout · Query Builder · Filter Builder · Gauge · Map ·
Customization Dialog

See the [community and enterprise comparison](https://www.htmlelements.com/docs/community-and-enterprise/)
for the full breakdown.

## Theming

137 prebuilt theme stylesheets ship in the package, across six families - Default,
Bootstrap, Material, Fluent, Strata and Tabula - each with light and dark modes and accent-color
variants. Swap a single stylesheet to restyle the whole application:

```html
<link rel="stylesheet"
      href="node_modules/smart-webcomponents-community/source/styles/material/dark/smart.material-dark.blue.css" />
```

| Family | Light | Dark | Location |
| --- | --- | --- | --- |
| Default | 10 | 9 | `source/styles/` |
| Bootstrap | 12 | 12 | `source/styles/bootstrap/light/`, `source/styles/bootstrap/dark/` |
| Material | 12 | 12 | `source/styles/material/light/`, `source/styles/material/dark/` |
| Fluent | 12 | 12 | `source/styles/fluent/light/`, `source/styles/fluent/dark/` |
| Strata | 11 | 11 | `source/styles/strata/light/`, `source/styles/strata/dark/` |
| Tabula | 12 | 12 | `source/styles/tabula/light/`, `source/styles/tabula/dark/` |

Every family except Default ships a base stylesheet plus accent variants in black, blue, cyan, green,
indigo, orange, pink, purple, red, teal and turquoise. Strata omits black. The Default family uses
`smart.default.css` with `smart.<accent>.css` and `smart.dark-<accent>.css` variants.

Dark stylesheets are named for their family, so `material/dark/smart.material-dark.blue.css` is the
blue accent of Material Dark. Bootstrap keeps the same filenames in both folders, so the light and
dark variants are distinguished by directory.

Per-component stylesheets are available in `source/styles/default/` if you prefer to load only the
CSS for the components you use.

Custom palettes can be generated with the [Theme Builder](https://www.htmlelements.com/themebuilder/).

## Frequently asked questions

### Is Smart UI Community really free?

Yes. It is licensed under the Apache License 2.0, see [LICENSE](./LICENSE), and can be used in
commercial projects.

### Does it include a data grid?

No. The Grid, Table and Pivot Table are part of the commercial
[`smart-webcomponents`](https://www.npmjs.com/package/smart-webcomponents) package.

### Do the components work without a framework?

Yes. They are native custom elements, so they work in a plain HTML page with no build step, and in
any framework.

### How many themes are included?

137 prebuilt stylesheets across six families: Default, Bootstrap, Material, Fluent, Strata and
Tabula. Each family ships light and dark modes with accent variants in black, blue, cyan, green,
indigo, orange, pink, purple, red, teal and turquoise. Custom palettes can be built with the
[Theme Builder](https://www.htmlelements.com/themebuilder/).

### Does it include TypeScript definitions?

Yes, in the `typescript/` directory.

### Which browsers are supported?

Current versions of Chrome, Edge, Firefox, Safari and Opera.

## Related packages

| Package | Description |
| --- | --- |
| [`smart-webcomponents`](https://www.npmjs.com/package/smart-webcomponents) | Full commercial suite |
| [`smart-webcomponents-angular`](https://www.npmjs.com/package/smart-webcomponents-angular) | Angular modules |
| [`smart-webcomponents-react`](https://www.npmjs.com/package/smart-webcomponents-react) | React components |

## License

Apache License 2.0, see [LICENSE](./LICENSE).

Issues: <https://github.com/HTMLElements/smart-elements/issues> ·
Forum: <https://www.htmlelements.com/forum/>