smart-webcomponents
Version:
Web Components & Custom Elements for Professional Web Applications
107 lines (79 loc) • 18.8 kB
Markdown
# Smart UI
Web Components, Anguiar UI Components and React UI Components for Professional Web Applications
[](https://www.webcomponents.org/collection/HTMLElements/smarthtmlelements-core) | [](https://jqwidgets.com/license/) | [](https://www.travis-ci.com/HTMLElements/Team)
Build responsive, mobile-first projects on the Web with the most advanced front-end component library
-----------------------------------------------------------------------------------------------------
What is Smart UI?
----------------------------
Smart UI is a Framework for building Web Components and Custom Elements. Smart is similar to Stencil and LitElement. It supports two-way data-binding, templates, property change notifications, Typescript-like type-checking and validation.
Smart does not have third-party dependencies. It is pure Javascript code.
60+ UI Components are built with Smart including Grid, Chart, Kanban, Gantt, Table, Tabs, Accordion, Gauge, DateTimePicker and others. Some of the UI Components built with the library are commercial. Others are open-source.
Smart UI components are available in Javascript, Angular and React. Typescript definitions are included.
Works across devices and browsers
---------------------------------
Supported Browsers: Chrome, Firefox, Safari, Edge, Opera
UI Components
---
| Component | Status | Issues
| ----------| ------ | ------
| [`<smart-accordion>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+accordion)
| [`<smart-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+button)
| [`<smart-calendar>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+calendar)
| [`<smart-card>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+card)
| [`<smart-carousel>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/@smarthtmlelements/smart-carousel) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+toggle+button)
| [`<smart-chart>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+chart)
| [`<smart-check-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+check+box)
| [`<smart-color-panel>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+color+panel)
| [`<smart-color-picker>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+color+picker)
| [`<smart-combo-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+combo+box)
| [`<smart-date-time-picker>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+date+time+picker)
| [`<smart-docking-layout>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+docking+layout)
| [`<smart-drop-down-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+drop+down+button)
| [`<smart-drop-down-list>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+drop+down+list)
| [`<smart-file-upload>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+file+upload)
| [`<smart-gantt-chart>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+gantt+chart)
| [`<smart-gauge>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+gauge)
| [`<smart-grid>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+grid)
| [`<smart-input>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+input)
| [`<smart-kanban>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+kanban)
| [`<smart-list-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+list+box)
| [`<smart-list-menu>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+list+menu)
| [`<smart-masked-text-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+masked+text+box)
| [`<smart-menu>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+menu)
| [`<smart-multiline-text-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+multiline+text+box)
| [`<smart-multi-split-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+multi+split+button)
| [`<smart-numeric-text-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+numeric+text+box)
| [`<smart-pager>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+pager)
| [`<smart-password-text-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+password+text+box)
| [`<smart-power-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+power+button)
| [`<smart-progress-bar>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+progress+bar)
| [`<smart-query-builder>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+query+builder)
| [`<smart-radio-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+radio+button)
| [`<smart-repeat-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+repeat+button)
| [`<smart-scroll-bar>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+scroll+bar)
| [`<smart-slider>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+slider)
| [`<smart-sortable>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+sortable)
| [`<smart-splitter>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+splitter)
| [`<smart-switch-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+switch+button)
| [`<smart-table>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+table)
| [`<smart-tabs>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+tabs)
| [`<smart-tank>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+tank)
| [`<smart-time-picker>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+time+picker)
| [`<smart-text-box>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+text+box)
| [`<smart-toast>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+toast)
| [`<smart-toggle-button>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+toggle+button)
| [`<smart-tooltip>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+tooltip)
| [`<smart-tree>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+tree)
| [`<smart-window>`](https://github.com/HTMLElements/smart-elements) | [](https://www.npmjs.com/package/smart-webcomponents) | [*Issues*](https://github.com/HTMLElements/smart-elements/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+window)
Download and Installation
-------------------------
[Download Smart HTML Elements](https://www.htmlelements.com/download/)
[Live Demo ↗](https://htmlelements.com/demos//)
|
[Documentation ↗](https://www.htmlelements.com/docs/)
[<img src="https://raw.githubusercontent.com/htmlelements/smart-elements/master/grid.png" alt="Screenshot of smart-grid, using the Material theme">](https://htmlelements.com/demos/)
[<img src="https://raw.githubusercontent.com/htmlelements/smart-elements/master/grid-sheet.png" alt="Screenshot of smart-sheet, using the Material theme">](https://htmlelements.com/demos/)
[<img src="https://raw.githubusercontent.com/htmlelements/smart-elements/master/chart.png" alt="Screenshot of smart-chart, using the Material theme">](https://htmlelements.com/demos/)
[<img src="https://raw.githubusercontent.com/htmlelements/smart-elements/master/docking.png" alt="Screenshot of smart-docking, using the Material theme">](https://htmlelements.com/demos/)
[<img src="https://raw.githubusercontent.com/htmlelements/smart-elements/master/smart-tabs.png" alt="Screenshot of smart-tabs, using the Material theme">](https://htmlelements.com/demos/tabs/)
[<img src="https://raw.githubusercontent.com/htmlelements/smart-elements/master/smart-calendar.png" alt="Screenshot of smart-calendar, using the Material theme">](https://htmlelements.com/demos/calendar/)