Smart UI - 75+ Enterprise Web Components and Custom Elements

smart-webcomponents is a commercial UI component library of 77 standards-based custom elements, including a data grid, pivot table, scheduler, Gantt chart, Kanban board, charts and a rich text editor. It has no third-party dependencies and works in plain HTML or with any framework.

Live demos · Documentation · Theme Builder · Pricing and licensing

Contents

• What is Smart UI?
• Installation
• Quick start
• Data grid example
• Loading only what you use
• Components
• Theming
• TypeScript
• FAQ
• License

What is Smart UI?

Smart UI is a library of UI components built as native custom elements. Because the components are standard HTML elements, they run directly in plain HTML pages and in any framework, including Angular, React, Vue and Svelte.

The library targets data-heavy business applications: sortable and filterable data grids, pivot tables, schedulers, Gantt charts and dashboards. It is written in plain JavaScript with no third-party runtime dependencies, and TypeScript definitions are included.

Installation

npm install smart-webcomponents

Quick start

Load a theme and the component bundle, then use the element:

<link rel="stylesheet" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />
<script src="node_modules/smart-webcomponents/source/smart.elements.js"></script>

<smart-grid id="grid"></smart-grid>

Data grid example

<smart-grid id="grid"></smart-grid>

<script>
  const grid = document.getElementById('grid');

  grid.sorting = { enabled: true };
  grid.filtering = { enabled: true };
  grid.dataSource = new window.Smart.DataAdapter({
    dataSource: [
      { firstName: 'Andrew', lastName: 'Burke', quantity: 3 },
      { firstName: 'Nancy', lastName: 'Devolder', quantity: 5 }
    ],
    dataFields: ['firstName: string', 'lastName: string', 'quantity: number']
  });
</script>

Loading only what you use

source/smart.elements.js contains every component. To keep the bundle small, import individual ES modules instead, each of which pulls in its own dependencies:

import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.grid.js';

source/modules/ holds one ES module per component. source/smart.element.js is the framework core on its own, for building custom elements against it.

Components

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

Data grids and tables

Grid · Table · Pivot Table · Card View · Query Builder · Pager · Array · Sortable

Scheduling and project management

Scheduler · Gantt Chart · Kanban · Timeline · Calendar

Charts and data visualization

Chart · 3D Chart · Gauge · Tank · Led · Progress Bar · Path · Map · Bar Code · QR Code

Layout and navigation

Docking Layout · Accordion · Tabs · Window · Splitter · Menu · List Menu · Ribbon · Breadcrumb · Carousel · Card · Chip · Toast · Tooltip · Scroll Bar

Editors and inputs

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

Buttons

Button · Button Group · Switch Button · Radio Button · Check Box · Multi Split Button

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

TypeScript

Type definitions for every component are included in the typescript/ directory:

/// <reference path="node_modules/smart-webcomponents/typescript/smart.grid.d.ts" />

Frequently asked questions

Do Smart UI components work without a framework?

Yes. They are native custom elements, so they work in a plain HTML page with a <script> tag and no build step.

Do they work with React, Angular or Vue?

Yes. They can be used directly in any framework, and dedicated packages with framework-native APIs are published for React and Angular.

Is Smart UI free?

No. It is a commercial library. You can evaluate it free for 30 days with full technical support; a license is required for production use. A free, open-source subset is published as smart-webcomponents-community.

Does it have third-party dependencies?

No. The library is plain JavaScript with no runtime dependencies.

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, with one .d.ts per component.

Which browsers are supported?

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

Related packages

| Package | Description | | --- | --- | | smart-webcomponents-angular | Angular modules | | smart-webcomponents-react | React components | | smart-webcomponents-community | Free, open-source subset | | smart-industrial | Smart.Industrial: HMI, SCADA and test-and-measurement components, with smart-industrial/angular and smart-industrial/react entry points; not part of this package |

License

Commercial. Free 30-day evaluation with technical support; a license is required for production use. See https://www.htmlelements.com/license/. The EULA ships in the package as EULA.pdf.

Support: [email protected] · Forum