-
+
+
+
+ Custom icon and color
+
+ {[1, 2, 3, 4, 5].map((symbol) => (
+
+
+
+
+ ))}
+
+
+
+ 10 stars
+
+
+
);
}
diff --git a/samples/inputs/rating/single-selection/README.md b/samples/inputs/rating/tailwind-styling/README.md
similarity index 91%
rename from samples/inputs/rating/single-selection/README.md
rename to samples/inputs/rating/tailwind-styling/README.md
index 060516b800..11bf5e720f 100644
--- a/samples/inputs/rating/single-selection/README.md
+++ b/samples/inputs/rating/tailwind-styling/README.md
@@ -1,4 +1,4 @@
-This folder contains implementation of React application with example of Single Selection feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+This folder contains implementation of React application with example of Tailwind Styling feature using [Rating](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
@@ -9,7 +9,7 @@ This folder contains implementation of React application with example of Single
-
+
@@ -28,7 +28,7 @@ Follow these instructions to run this example:
git clone https://github.com/IgniteUI/igniteui-react-examples.git
cd ./igniteui-react-examples
git checkout master
-cd ./samples/inputs/rating/single-selection
+cd ./samples/inputs/rating/tailwind-styling
```
open above folder in VS Code or type:
diff --git a/samples/inputs/rating/tailwind-styling/index.html b/samples/inputs/rating/tailwind-styling/index.html
new file mode 100644
index 0000000000..c1db140e73
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/index.html
@@ -0,0 +1,11 @@
+
+
+
+
RatingTailwindStyling
+
+
+
+
+
+
+
diff --git a/samples/inputs/rating/tailwind-styling/package.json b/samples/inputs/rating/tailwind-styling/package.json
new file mode 100644
index 0000000000..2e09c41a69
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "react-rating-tailwind-styling",
+ "description": "This project provides example of Rating Tailwind Styling using Infragistics React components",
+ "author": "Infragistics",
+ "homepage": ".",
+ "version": "1.4.0",
+ "private": true,
+ "scripts": {
+ "start": "vite --port 4200",
+ "build": "tsc && node --max-old-space-size=4096 node_modules/vite/bin/vite build",
+ "preview": "vite preview",
+ "test": "vitest"
+ },
+ "dependencies": {
+ "igniteui-dockmanager": "^2.2.1",
+ "igniteui-react": "19.9.0",
+ "igniteui-react-core": "19.6.0",
+ "igniteui-webcomponents": "~7.4.1",
+ "react": "^19.3.0",
+ "react-dom": "^19.3.0",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@tailwindcss/vite": "^4.1.14",
+ "@types/jest": "^30.0.0",
+ "@types/node": "^24.7.1",
+ "@types/react": "^19.3.0",
+ "@types/react-dom": "^19.3.0",
+ "@vitejs/plugin-react": "^6.1.1",
+ "@vitest/browser": "^5.0.2",
+ "tailwindcss": "^4.1.14",
+ "typescript": "^5.9.3",
+ "vite": "^8.3.1",
+ "vitest": "^5.0.2",
+ "vitest-canvas-mock": "^1.2.0",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/inputs/rating/tailwind-styling/src/index.css b/samples/inputs/rating/tailwind-styling/src/index.css
new file mode 100644
index 0000000000..0514ec0b79
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/src/index.css
@@ -0,0 +1,23 @@
+/* shared styles are loaded from: */
+/* https://dl.infragistics.com/x/css/samples/shared.v8.css */
+
+/* Keep this order. An @import after the Tailwind imports is dropped, and in
+ the samples browser one before the @layer statement drops the Tailwind
+ imports, so Aktiv Grotesk goes between them. */
+@layer theme, base, components, utilities;
+@import url("https://use.typekit.net/bng2zgw.css");
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@source "./index.tsx";
+
+@theme {
+ --color-product-ink: #00142b;
+ --color-product-muted: #556c86;
+ --color-product-border: #d2dbe8;
+ --color-product-primary: #0176ff;
+ --color-product-primary-hover: #005dcc;
+ --color-product-primary-active: #004699;
+ --color-rating-full: #faa419;
+ --color-rating-empty: #8a8a8a;
+ --color-rating-label: #616161;
+}
diff --git a/samples/inputs/rating/tailwind-styling/src/index.tsx b/samples/inputs/rating/tailwind-styling/src/index.tsx
new file mode 100644
index 0000000000..f24b1fb544
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/src/index.tsx
@@ -0,0 +1,38 @@
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrButton, IgrRating } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function RatingTailwindStyling() {
+ return (
+
+
+
+
+
+ Wireless Headphones
+ Great sound quality and battery life!
+
+
$89
+
+
+
+
+ Submit review
+
+
+
+
+ );
+}
+
+// rendering above component to the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
);
diff --git a/samples/inputs/rating/tailwind-styling/tsconfig.json b/samples/inputs/rating/tailwind-styling/tsconfig.json
new file mode 100644
index 0000000000..e27a22be9b
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/tsconfig.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "target": "es2020",
+ "lib": [
+ "es2020",
+ "dom",
+ "dom.iterable"
+ ],
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "jsx": "react-jsx",
+ "types": [
+ "vite/client"
+ ],
+ "strict": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "skipLibCheck": true,
+ "noEmit": true
+ },
+ "include": [
+ "src"
+ ]
+}
diff --git a/samples/inputs/rating/tailwind-styling/vite.config.js b/samples/inputs/rating/tailwind-styling/vite.config.js
new file mode 100644
index 0000000000..4043727956
--- /dev/null
+++ b/samples/inputs/rating/tailwind-styling/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ build: {
+ outDir: 'build',
+ },
+ server: {
+ open: false,
+ },
+});
+