Examples of Ignite UI for React Components

This repository contains over 900 examples on how to use Ignite UI for React components:

• Charts: Area, Bar, Column, Composite, Donut, Financial/Stock, Line, Pie, Polar, Radial, Scatter, Shape, Sparkline, Stacked, Step,
• Maps: Geographic Map, Treemap,
• Gauges: Bullet Graph, Linear Gauge, Radial Gauges
• Grids & Lists: Grid, List, Tree, Table / Grid, Spreadsheet
• Other: Dock Manager, Date Picker, Multi-Column Combobox

Branches

NOTE: Use the master branch to run samples locally. Use the vnext branch only when contributing new samples.

Preview

Browse all samples in the React Samples Browser, or with documentation in the React Help.

Each sample folder is also a standalone project with its own README, e.g. ./samples/charts/category-chart/overview/README.md.

Setup

Clone the repository and install dependencies from the root:

git clone https://github.com/IgniteUI/igniteui-react-examples.git
cd igniteui-react-examples
git checkout master
npm install

Running All Samples (Dev Server)

npm run dev

Open http://localhost:4200. The index lists every component; the sidebar lists every sample. Samples compile on demand, so there is no copy or full build step, and edits to samples/ reload in place.

Running an Individual Sample

Every sample under samples/{group}/{component}/{name}/ runs on its own:

cd samples/charts/category-chart/overview
npm install
npm start

Then open http://localhost:4200.

Building for Production

npm run build
npm run preview

npm run build first copies the Ignite UI theme sheets to public/ig-themes/ and generates public/code-viewer/**/*.json (the source tabs of the docs code viewer), then builds every sample page into dist/. npm run preview serves dist/ on http://localhost:4200.

The deployed site lives under a sub-path. Set BASE_PATH for both commands to reproduce it:

BASE_PATH=/react-demos npm run build
BASE_PATH=/react-demos npm run preview

Testing

Smoke tests run in Playwright against the production build:

npx playwright install --only-shell chromium   # once
npm run build
npm run test:smoke

Use the same BASE_PATH for the build and the tests. CI builds and tests with BASE_PATH=/react-demos.

Adding a New Sample

1. Create a branch from vnext.

2. Scaffold the sample:

   npm run add:sample inputs/button/new-thing

   The folder must be exactly samples/{group}/{component}/{name}/, with:

   • src/index.tsx: export default the sample component, and end with the standalone mount (root.render(<Sample />)). The samples browser strips that mount and renders the default export itself; the build fails if either is missing.
   • index.html: the standalone entry, <div id="root"> only.
   • package.json: dependencies for running standalone. Its presence is what adds the sample to the browser.

   Import theme and sample CSS from src/index.tsx (e.g. import './index.css';) so the page puts it in <head> at first paint.

3. Start the dev server and verify:

   npm run dev

   • the sample appears in the sidebar
   • it loads without errors in the browser console

4. Type-check it along with every other sample (CI runs the same check):

   npm run check:samples

5. Commit, push, and open a pull request targeting vnext. Include a screenshot of the running sample.

Updating Ignite UI Package Versions

Do not edit version strings in package.json files by hand; CI fails when a sample's versions drift from the list.

1. Update the versions in ./scripts/lib/versions.js: SHARED applies to the root and every sample, TOOLING to samples only.
2. Run from the repo root:

   npm run update:ig
   npm install

3. Create and merge a pull request with the updated package.json files.
4. Create a second pull request with the same versions in /editor-templates/react/main-template/package.json of the igniteui-xplat-examples repository.

Scripts Reference

Script	Description
npm run dev	Start the Astro dev server on port 4200
npm run build	Copy themes, generate code-viewer JSON, build the static site to dist/
npm run preview	Serve dist/ on port 4200
npm run test:smoke	Run the Playwright smoke tests against the production build
npm run check	Type-check src/ and tests/ with astro check
npm run check:samples	Type-check every published sample, except the generated ones listed in scripts/lib/skip-type-check.json
npm run add:sample	Scaffold samples/{group}/{component}/{name}/
npm run update:ig	Apply scripts/lib/versions.js to every package.json
npm run generate:code-viewer	Regenerate public/code-viewer/**/*.json
npm run copy:themes	Copy Ignite UI theme sheets to public/ig-themes/

Learn More

To learn more about Ignite UI for React components, check out the React documentation.