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.

Live demos · Documentation · Community vs. Enterprise · Theme Builder

Contents

• What is Smart UI Community?
• Installation
• Quick start
• Components
• What is not included
• Theming
• FAQ
• 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

npm install smart-webcomponents-community

Quick start

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

<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 · Bar Code · QR Code

Layout and navigation

Accordion · Tabs · Window · Splitter · Menu · List Menu · Toast · Tooltip

Editors and inputs

Input · Text Box · Text Area · Masked Text Box · Numeric Text Box · Password Text Box · Combo Box · Multi Input · Drop Down List · Drop Down Button · List Box · Tree · Date Time Picker · Date Input · Date Range Input · Check Input · Country Input · Phone Input · Color Picker · Color Input · File Upload · Rating · Slider · Form

Buttons

Button · Radio Button · Check Box

What is not included

The following are part of the commercial 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 for the full breakdown. The Smart.Industrial line (HMI, SCADA and test-and-measurement components) is a package of its own, smart-industrial.

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:

<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.

Frequently asked questions

Is Smart UI Community really free?

Yes. It is licensed under the Apache License 2.0, see 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 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.

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 | Full commercial suite | | smart-webcomponents-angular | Angular modules | | smart-webcomponents-react | React components |

License

Apache License 2.0, see LICENSE.

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