diff --git a/samples/layouts/card/overview/src/CardOverview.css b/samples/layouts/card/overview/src/CardOverview.css
deleted file mode 100644
index 42c504d4b8..0000000000
--- a/samples/layouts/card/overview/src/CardOverview.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.card-wrapper {
- max-width: 320px;
- min-width: 220px;
-}
-
-.center {
- align-items: center;
-}
\ No newline at end of file
diff --git a/samples/layouts/card/overview/src/icons.ts b/samples/layouts/card/overview/src/icons.ts
new file mode 100644
index 0000000000..eabd864a96
--- /dev/null
+++ b/samples/layouts/card/overview/src/icons.ts
@@ -0,0 +1,5 @@
+export const twitterIcon =
+ '
';
+
+export const facebookIcon =
+ '
';
diff --git a/samples/layouts/card/overview/src/index.css b/samples/layouts/card/overview/src/index.css
index e69de29bb2..1074999942 100644
--- a/samples/layouts/card/overview/src/index.css
+++ b/samples/layouts/card/overview/src/index.css
@@ -0,0 +1,8 @@
+.card-wrapper {
+ max-width: 320px;
+ min-width: 220px;
+}
+
+.center {
+ align-items: center;
+}
diff --git a/samples/layouts/card/overview/src/index.tsx b/samples/layouts/card/overview/src/index.tsx
index 290b71ae79..32950170d3 100644
--- a/samples/layouts/card/overview/src/index.tsx
+++ b/samples/layouts/card/overview/src/index.tsx
@@ -1,7 +1,6 @@
import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
-import "./CardOverview.css";
import {
IgrCard,
IgrCardMedia,
@@ -14,11 +13,7 @@ import {
registerIconFromText,
} from "igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";
-
-const twitterIcon =
- '
';
-const facebookIcon =
- '
';
+import { facebookIcon, twitterIcon } from "./icons";
export default function CardOverview() {
useEffect(() => {
diff --git a/samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css b/samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css
deleted file mode 100644
index 3d7094fc63..0000000000
--- a/samples/layouts/card/semi-horizontal/src/CardSemiHorizontal.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.card-wrapper {
- max-width: 400px;
- min-width: 250px;
-}
-
-.semi-horizontal {
- display: flex;
- flex-direction: row;
- flex-grow: 1;
-}
-
-.card-media {
- width: 96px;
- min-width: 96px;
-}
-
-.divider {
- border-right: 1px solid darkgray;
-}
-
-.center {
- align-items: center;
-}
diff --git a/samples/layouts/card/semi-horizontal/src/index.css b/samples/layouts/card/semi-horizontal/src/index.css
index e69de29bb2..bacfee166f 100644
--- a/samples/layouts/card/semi-horizontal/src/index.css
+++ b/samples/layouts/card/semi-horizontal/src/index.css
@@ -0,0 +1,24 @@
+.card-wrapper {
+ max-width: 400px;
+ min-width: 250px;
+}
+
+.semi-horizontal {
+ display: flex;
+ flex-direction: row;
+ flex-grow: 1;
+}
+
+.card-media {
+ width: 96px;
+ min-width: 96px;
+}
+
+.divider {
+ border-right: 1px solid darkgray;
+}
+
+.center {
+ align-items: center;
+ justify-content: center;
+}
diff --git a/samples/layouts/card/semi-horizontal/src/index.tsx b/samples/layouts/card/semi-horizontal/src/index.tsx
index 0230d252a5..482b6b9459 100644
--- a/samples/layouts/card/semi-horizontal/src/index.tsx
+++ b/samples/layouts/card/semi-horizontal/src/index.tsx
@@ -1,7 +1,6 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
-import "./CardSemiHorizontal.css";
import {
IgrCard,
IgrCardHeader,
diff --git a/samples/layouts/card/styling/src/CardStyling.css b/samples/layouts/card/styling/src/CardStyling.css
deleted file mode 100644
index 06d127215e..0000000000
--- a/samples/layouts/card/styling/src/CardStyling.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.card-wrapper {
- max-width: 320px;
- min-width: 220px;
-}
-
-igc-card {
- background-color: #011627;
-}
-
-igc-card-content,
-igc-card-header > *[slot="title"]{
- color: #FEFEFE;
-}
-
-igc-card-header > *[slot="subtitle"] {
- color: #ECAA53;
- opacity: 0.9;
-}
-
-igc-icon-button+igc-icon-button {
- margin-left: 10px;
-}
-
-.center {
- align-items: center;
-}
\ No newline at end of file
diff --git a/samples/layouts/card/styling/src/icons.ts b/samples/layouts/card/styling/src/icons.ts
new file mode 100644
index 0000000000..4039bcb45e
--- /dev/null
+++ b/samples/layouts/card/styling/src/icons.ts
@@ -0,0 +1,8 @@
+export const twitterIcon =
+ "
";
+
+export const facebookIcon =
+ "
";
+
+export const instagramIcon =
+ "
";
diff --git a/samples/layouts/card/styling/src/index.css b/samples/layouts/card/styling/src/index.css
index e69de29bb2..79113c5f33 100644
--- a/samples/layouts/card/styling/src/index.css
+++ b/samples/layouts/card/styling/src/index.css
@@ -0,0 +1,26 @@
+.card-wrapper {
+ max-width: 320px;
+ min-width: 220px;
+}
+
+igc-card {
+ background-color: #011627;
+}
+
+igc-card-content,
+igc-card-header > *[slot="title"] {
+ color: #FEFEFE;
+}
+
+igc-card-header > *[slot="subtitle"] {
+ color: #ECAA53;
+ opacity: 0.9;
+}
+
+igc-icon-button + igc-icon-button {
+ margin-left: 10px;
+}
+
+.center {
+ align-items: center;
+}
diff --git a/samples/layouts/card/styling/src/index.tsx b/samples/layouts/card/styling/src/index.tsx
index f543934898..b15db789d2 100644
--- a/samples/layouts/card/styling/src/index.tsx
+++ b/samples/layouts/card/styling/src/index.tsx
@@ -1,7 +1,6 @@
import React, { useEffect } from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
-import "./CardStyling.css";
import {
IgrCard,
IgrCardMedia,
@@ -13,13 +12,7 @@ import {
registerIconFromText,
} from "igniteui-react";
import "igniteui-webcomponents/themes/light/bootstrap.css";
-
-const twitterIcon =
- "
";
-const facebookIcon =
- "
";
-const instagramIcon =
- "
";
+import { facebookIcon, instagramIcon, twitterIcon } from "./icons";
export default function CardStyling() {
useEffect(() => {
diff --git a/samples/layouts/card/tailwind-styling/.devcontainer/devcontainer.json b/samples/layouts/card/tailwind-styling/.devcontainer/devcontainer.json
new file mode 100644
index 0000000000..e0b8e9c925
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/.devcontainer/devcontainer.json
@@ -0,0 +1,4 @@
+{
+ "name": "Node.js",
+ "image": "mcr.microsoft.com/devcontainers/javascript-node:22"
+}
\ No newline at end of file
diff --git a/samples/layouts/card/tailwind-styling/.eslintrc.js b/samples/layouts/card/tailwind-styling/.eslintrc.js
new file mode 100644
index 0000000000..b45160a9ee
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/.eslintrc.js
@@ -0,0 +1,75 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+ parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+ parserOptions: {
+ ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+ sourceType: "module", // Allows for the use of imports
+ ecmaFeatures: {
+ jsx: true // Allows for the parsing of JSX
+ }
+ },
+ settings: {
+ react: {
+ version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+ }
+ },
+ extends: [
+ "eslint:recommended",
+ "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+ "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+ ],
+ rules: {
+ // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ },
+ "overrides": [
+ {
+ "files": ["*.ts", "*.tsx"],
+ "rules": {
+ "default-case": "off",
+ "no-undef": "off",
+ "no-unused-vars": "off",
+ "no-extend-native": "off",
+ "no-throw-literal": "off",
+ "no-useless-concat": "off",
+ "no-mixed-operators": "off",
+ "no-prototype-builtins": "off",
+ "prefer-const": "off",
+ "prefer-rest-params": "off",
+ "jsx-a11y/alt-text": "off",
+ "jsx-a11y/iframe-has-title": "off",
+ "@typescript-eslint/no-unused-vars": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-inferrable-types": "off",
+ "@typescript-eslint/no-useless-constructor": "off",
+ "@typescript-eslint/no-use-before-define": "off",
+ "@typescript-eslint/no-non-null-assertion": "off",
+ "@typescript-eslint/interface-name-prefix": "off",
+ "@typescript-eslint/prefer-namespace-keyword": "off",
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+ }
+ ]
+ };
\ No newline at end of file
diff --git a/samples/layouts/card/tailwind-styling/README.md b/samples/layouts/card/tailwind-styling/README.md
new file mode 100644
index 0000000000..d56077df55
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/README.md
@@ -0,0 +1,56 @@
+
+
+
+This folder contains implementation of React application with example of Tailwind Styling feature using [Card](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/card/tailwind-styling
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/card/tailwind-styling/index.html b/samples/layouts/card/tailwind-styling/index.html
new file mode 100644
index 0000000000..8189a00d8f
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/index.html
@@ -0,0 +1,11 @@
+
+
+
+
CardStyling
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/samples/layouts/card/tailwind-styling/package.json b/samples/layouts/card/tailwind-styling/package.json
new file mode 100644
index 0000000000..2218f7f9ec
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "react-card-tailwind-styling",
+ "description": "This project provides example of 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": "^1.17.0",
+ "igniteui-react": "19.7.0",
+ "igniteui-react-core": "19.6.0",
+ "igniteui-webcomponents": "^7.2.1",
+ "react": "^19.2.0",
+ "react-dom": "^19.2.0",
+ "tslib": "^2.4.0"
+ },
+ "devDependencies": {
+ "@types/jest": "^29.2.0",
+ "@types/node": "^24.7.1",
+ "@types/react": "^18.0.24",
+ "@types/react-dom": "^18.0.8",
+ "@vitejs/plugin-react": "^5.0.4",
+ "@vitest/browser": "^3.2.4",
+ "typescript": "^4.8.4",
+ "vite": "^7.1.9",
+ "vitest": "^3.2.4",
+ "vitest-canvas-mock": "^0.3.3",
+ "worker-loader": "^3.0.8",
+ "@tailwindcss/vite": "^4.3.3",
+ "tailwindcss": "^4.3.3"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/layouts/card/tailwind-styling/sandbox.config.json b/samples/layouts/card/tailwind-styling/sandbox.config.json
new file mode 100644
index 0000000000..00acba0c10
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/layouts/card/tailwind-styling/src/icons.ts b/samples/layouts/card/tailwind-styling/src/icons.ts
new file mode 100644
index 0000000000..4039bcb45e
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/src/icons.ts
@@ -0,0 +1,8 @@
+export const twitterIcon =
+ "
";
+
+export const facebookIcon =
+ "
";
+
+export const instagramIcon =
+ "
";
diff --git a/samples/layouts/card/tailwind-styling/src/index.css b/samples/layouts/card/tailwind-styling/src/index.css
new file mode 100644
index 0000000000..8f86843de1
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/src/index.css
@@ -0,0 +1,7 @@
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@source "./index.tsx";
+
+.center {
+ align-items: center;
+}
diff --git a/samples/layouts/card/tailwind-styling/src/index.tsx b/samples/layouts/card/tailwind-styling/src/index.tsx
new file mode 100644
index 0000000000..746743aafb
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/src/index.tsx
@@ -0,0 +1,63 @@
+import React, { useEffect } from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import {
+ IgrCard,
+ IgrCardMedia,
+ IgrCardHeader,
+ IgrCardContent,
+ IgrCardActions,
+ IgrIconButton,
+ IgrRipple,
+ registerIconFromText,
+} from "igniteui-react";
+import "igniteui-webcomponents/themes/light/bootstrap.css";
+import { facebookIcon, instagramIcon, twitterIcon } from "./icons";
+
+export default function CardStyling() {
+ useEffect(() => {
+ registerIconFromText("facebook", facebookIcon, "material");
+ registerIconFromText("twitter", twitterIcon, "material");
+ registerIconFromText("instagram", instagramIcon, "material");
+ }, []);
+
+ return (
+
+
+
+
+
+
+ Jane Doe
+ Professional Photographer
+
+
+
+ Hi! I am Jane, photographer and filmmaker. Photography is a way of
+ feeling, of touching, of loving. What you have caught on film is
+ captured forever... it remembers little things, long after you
+ have forgotten everything.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
);
diff --git a/samples/layouts/card/tailwind-styling/tsconfig.json b/samples/layouts/card/tailwind-styling/tsconfig.json
new file mode 100644
index 0000000000..8c0d146f95
--- /dev/null
+++ b/samples/layouts/card/tailwind-styling/tsconfig.json
@@ -0,0 +1,44 @@
+{
+ "compilerOptions": {
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "baseUrl": ".",
+ "outDir": "build/dist",
+ "module": "esnext",
+ "target": "es5",
+ "lib": [
+ "es6",
+ "dom"
+ ],
+ "sourceMap": true,
+ "allowJs": true,
+ "jsx": "react-jsx",
+ "moduleResolution": "node",
+ "rootDir": "src",
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "noImplicitAny": true,
+ "noUnusedLocals": false,
+ "importHelpers": true,
+ "allowSyntheticDefaultImports": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "isolatedModules": true,
+ "noEmit": true
+ },
+ "exclude": [
+ "node_modules",
+ "build",
+ "scripts",
+ "acceptance-tests",
+ "webpack",
+ "jest",
+ "src/setupTests.ts",
+ "**/odatajs-4.0.0.js",
+ "config-overrides.js"
+ ],
+ "include": [
+ "src"
+ ]
+}
diff --git a/samples/layouts/card/tailwind-styling/vite.config.js b/samples/layouts/card/tailwind-styling/vite.config.js
new file mode 100644
index 0000000000..c1fff0c83c
--- /dev/null
+++ b/samples/layouts/card/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
+ },
+});
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+```
+git clone https://github.com/IgniteUI/igniteui-react-examples.git
+git checkout master
+cd ./igniteui-react-examples
+cd ./samples/layouts/card/actions
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html).
diff --git a/samples/layouts/card/actions/index.html b/samples/layouts/card/actions/index.html
new file mode 100644
index 0000000000..8189a00d8f
--- /dev/null
+++ b/samples/layouts/card/actions/index.html
@@ -0,0 +1,11 @@
+
+
+
+ 
+