Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/breadcrumb/overview/App.jsx

npm create vite@latest my-smart-app -- --template react-ts

```
cd my-smart-app
```
then
```
npm install
```

npm install smart-webcomponents-react

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import React from "react";
import ReactDOM from 'react-dom/client';
import { Breadcrumb } from 'smart-webcomponents-react/breadcrumb';

class App extends React.Component {

	componentDidMount() {
	}

	render() {
		return (
			<div>
			    <Breadcrumb id="breadcrumb1" addNewItem allowDrag
			    allowDrop closeButtons dataSource='[{ "label": "Planets", "value": "A" }, { "label": "Continents", "value": "B" }, { "label": "Countries", "value": "C" }, { "label": "States", "value": "D" }, { "label": "Cities", "value": "E" }]'></Breadcrumb>
			    <br />
			    <Breadcrumb id="breadcrumb2" allowDrag allowDrop closeButtons
			    data-source='[{ "label": "Email", "value": "alternate_email" }, { "label": "Phone", "value": "phone" }, { "label": "TV", "value": "tv" }, { "label": "Video game", "value": "videogame_asset" }, { "label": "Laptop", "value": "laptop" }]'
			    ></Breadcrumb>
			    <br />
			    <Breadcrumb id="breadcrumb3" minimizeWidth="150" allowDrag
			    allowDrop closeButtons dataSource='[{ "label": "Planets", "value": "A" }, { "label": "Continents", "value": "B" }, { "label": "Countries", "value": "C" }, { "label": "States", "value": "D" }, { "label": "Cities", "value": "E" }]'></Breadcrumb>
			    
			</div>
		);
	}
}



export default App;

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

Alternative: Next.js

Create an app with npx create-next-app@latest (Pages Router or App Router). Install the same package (npm install smart-webcomponents-react), then reuse the imports and default export from step 3 in pages/_app.tsx, the App Router root app/layout.tsx, or your top-level layout component so styles and the widget tree load once.

Types ship with smart-webcomponents-react. Import the component and prop types:

import type { Breadcrumb, BreadcrumbProps } from 'smart-webcomponents-react/breadcrumb';

The generated wrappers expose on* callbacks (for example onChange) whose arguments are standard DOM Event values unless the widget typings narrow them further.

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.

Getting Started with React Breadcrumb Component

1 Create a Vite + React + TypeScript app

2 Install Smart UI for React