Smart UI for React - 90+ Enterprise React UI Components

smart-webcomponents-react is a commercial React UI component library providing 91 components for React 19, including a data grid, pivot table, scheduler, Gantt chart, Kanban board, charts and a rich text editor. TypeScript definitions are bundled, and every component is importable from its own subpath for tree-shaking.

Live demos · Documentation · Theme Builder · Pricing and licensing

Contents

• What is Smart UI for React?
• Requirements
• Installation
• Quick start
• React data grid example
• Components
• Theming
• TypeScript
• FAQ
• License

What is Smart UI for React?

Smart UI for React is a UI component library for building data-heavy business applications in React. Components expose typed props, React events and refs, so they compose naturally with React state, hooks and controlled-input patterns.

The library is aimed at applications that need enterprise data components, such as sortable and filterable data grids, pivot tables, schedulers and Gantt charts, rather than a general-purpose styling kit. It ships with no third-party runtime dependencies.

Requirements

| Requirement | Version | | --- | --- | | React | 19 (react and react-dom are peer dependencies) | | TypeScript | Optional; type definitions are bundled | | Browsers | Current Chrome, Edge, Firefox, Safari and Opera |

Installation

npm install smart-webcomponents-react

yarn add smart-webcomponents-react

pnpm add smart-webcomponents-react

Quick start

Import a theme once in your application entry point, then import components from their own subpaths:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from 'react';
import { Accordion, AccordionItem } from 'smart-webcomponents-react/accordion';

const App = () => (
  <Accordion>
    <AccordionItem label="First Item">First Item Content.</AccordionItem>
    <AccordionItem label="Second Item">Second Item Content.</AccordionItem>
  </Accordion>
);

export default App;

Each component has its own entry point, such as smart-webcomponents-react/grid, smart-webcomponents-react/scheduler and smart-webcomponents-react/chart, with separate main, module and typings fields, so bundlers include only the components you import.

React data grid example

The data grid is reached through a ref, which exposes the component's full API:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React, { useRef, useEffect } from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

const App = () => {
  const grid = useRef(null);

  useEffect(() => {
    grid.current.dataSource = [
      { firstName: 'Andrew', lastName: 'Burke', quantity: 3 },
      { firstName: 'Nancy', lastName: 'Devolder', quantity: 5 }
    ];
  }, []);

  return (
    <Grid
      ref={grid}
      sorting={{ enabled: true }}
      filtering={{ enabled: true }}
      paging={{ enabled: true }}
    />
  );
};

export default App;

Components

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

Data grids and tables

Grid · Table · Pivot Table · Card View · Column Panel · Group Panel · Sort Panel · Filter Panel · Filter Builder · Multi Column Filter Panel · 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 · Tabs Window · Window · Alert Window · Dialog Window · Multiline Window · Progress Window · Prompt Window · Wait 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 · Customization Dialog

Buttons

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

Theming

31 themes ship in the package. Change the whole application by swapping a single import:

import 'smart-webcomponents-react/source/styles/smart.dark-indigo.css';

| Theme family | Count | Stylesheets | | --- | --- | --- | | Default | 1 | smart.default.css | | Light accents | 9 | smart.cyan.css, smart.green.css, smart.indigo.css, smart.orange.css, smart.pink.css, smart.purple.css, smart.red.css, smart.teal.css, smart.turquoise.css | | Dark accents | 9 | smart.dark-cyan.css, smart.dark-green.css, smart.dark-indigo.css, smart.dark-orange.css, smart.dark-pink.css, smart.dark-purple.css, smart.dark-red.css, smart.dark-teal.css, smart.dark-turquoise.css | | Bootstrap | 12 | bootstrap/smart.bootstrap.css plus black, blue, cyan, green, indigo, orange, pink, purple, red, teal and turquoise variants |

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 are bundled, so no @types package is required. Every subpath ships its own .d.ts with the component's props interface and enums:

import { Grid, GridProps } from 'smart-webcomponents-react/grid';

Frequently asked questions

Does Smart UI support React 19?

Yes. react and react-dom version 19 are declared as peer dependencies.

Is Smart UI for React 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 of the components is published separately as smart-webcomponents-community.

Does the package include TypeScript definitions?

Yes. Every component subpath ships a .d.ts file. No separate @types package is needed.

How many themes are included?

31: a default theme, 9 light accent themes, 9 dark accent themes and 12 Bootstrap variants. Custom palettes can be built with the Theme Builder.

How do I change the theme?

Import a different stylesheet from smart-webcomponents-react/source/styles/.

Which browsers are supported?

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

How do I reduce bundle size?

Import components from their individual subpaths rather than a barrel file. Each subpath is a separate entry point marked sideEffects: false, so unused components are tree-shaken. Per-component stylesheets in source/styles/default/ let you trim CSS the same way.

What is the difference between Smart UI and the community edition?

The commercial package includes the full suite, with Grid, Pivot Table, Scheduler, Gantt Chart, Kanban, Editor and Docking Layout among them. The community edition contains 38 components covering inputs, buttons, layout and navigation only. See the comparison.

Related packages

| Package | Description | | --- | --- | | smart-webcomponents | The components as framework-agnostic custom elements | | smart-webcomponents-angular | Angular modules | | smart-webcomponents-community | Free, open-source subset |

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