Smart UI

Smart UI is a commercial, enterprise-ready web component library for Angular, React, Vue, Blazor, and vanilla JavaScript, built around a data grid and dozens of UI widgets. It lets developers assemble data-heavy interfaces without writing chart, scheduler, or grid engines from scratch.

What is Smart UI?

Smart UI is a cross-framework UI component library that turns JavaScript data and configuration objects into interactive enterprise widgets. You feed it an array of objects (for example, product records) and define columns, sorting, filtering, and editing rules; it renders a functional Data Grid, TreeGrid, Scheduler, Gantt chart, or another component. The library runs in the browser and is distributed through npm packages such as smart-webcomponents, smart-webcomponents-react, and smart-webcomponents-angular. It is developed by HTMLElements (htmlelements.com) and released under a commercial license.

What makes Smart UI stand out?

• Data Grid and TreeGrid — Includes Excel-like sorting, filtering, grouping, pivoting, spreadsheet-style editing, AI filtering, transpose, and cell formatting (currency, dates).
• Scheduler and Gantt Chart — Full project and resource scheduling with timeline, calendar, and critical path support.
• Docking Layout — Drag-and-drop dashboard panels that persist their arrangement.
• Rich Text Editor — WYSIWYG editing with custom CSS support.
• 20+ localizations — All components ship with locale files for global applications.
• Framework-agnostic import — Import only the modules you need; separate packages exist for Angular, React, and Vue.
• Additional widgets — CardView, Kanban, Charts, Tabs, Accordion, Menu, and dozens more components are included.

Who should use Smart UI?

• Enterprise front-end developers — Build internal admin panels, dashboards, and back-office tools with prebuilt grid and chart components instead of hand-rolling them.
• Angular, React, or Vue teams — Use framework-specific npm packages and the provided usage examples to integrate Smart UI into an existing stack quickly.
• Product teams building scheduling or planning tools — Use the Scheduler and Gantt components to display timelines, assign resources, and track critical paths.

What can you build with Smart UI?

• Data-heavy admin dashboards — Drop a grid element into a page, bind it to a local or remote data source, and enable sorting, filtering, paging, and editing in configuration.
• Project management applications — Show tasks, dependencies, and critical paths with the Gantt chart component.
• Resource scheduling systems — Use the Scheduler for calendar and timeline views of appointments or assignments.

How does Smart UI work?

Smart UI components are native web components registered as custom HTML elements. You import the module for the component, attach a dataSource array, and set properties such as columns, sorting, and editing either through JavaScript or as HTML attributes. In React and Angular, the same configuration is passed as props and component inputs, respectively.

Pricing

Smart UI is commercial software with a paid license; the GitHub repository links to a separate LICENSE file and the npm badge labels it "Commercial". No trial tier or cost figures are listed on this page.

FAQ

Is Smart UI free?

No, Smart UI is licensed commercially. The GitHub repository shows a Commercial license badge, and the project's LICENSE file defines the terms; this page does not list prices.

What frameworks does Smart UI support?

Smart UI works with Angular, React, Vue, Blazor, and vanilla JavaScript. It provides separate npm packages for Angular (smart-webcomponents-angular) and React (smart-webcomponents-react), and the same core package works for vanilla JS and Vue.

Does Smart UI include a Gantt chart?

Yes, the library includes a Gantt Chart component with timeline, calendar, and critical path support, plus a Scheduler component for resource and project scheduling.

How do I install Smart UI?

Install the core package with npm install smart-webcomponents. For Angular, use npm install smart-webcomponents-angular; for React, use npm install smart-webcomponents-react. You can also install a specific component package, such as @smart-webcomponents-angular/grid.