- {
const s = e.target as IgrDateTimeInput;
const result =
s.value !== null
- ? `Arrive before ${e.detail.toLocaleTimeString([], {
+ ? e.detail.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
- })}`
- : "Time";
+ })
+ : "Any time";
this.setState({
time: result,
});
@@ -207,7 +232,7 @@ export default class AccordionCustomization extends React.Component {
public clearTime() {
this.dateTimeInput.clear();
this.setState({
- time: "Time",
+ time: "Any time",
});
}
@@ -217,8 +242,14 @@ export default class AccordionCustomization extends React.Component {
}
this.dateTimeInput = input;
}
+
+ public transportationPanelRef(panel: IgrExpansionPanel) {
+ if (!panel) {
+ return;
+ }
+ this.transportationPanel = panel;
+ }
}
-// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render((false);
-
+
const switchChange = (e: IgrCheckboxChangeEventArgs) => {
setSingleExpand(e.detail.checked);
- }
+ };
return (
-
-
-
-
- Categories
- {this.state.categories.some((c: Category) => c.checked) && ": "}
- {this.state.categories
- .filter((c: Category) => c.checked)
- .map((c: Category) => c.type)
- .join(", ")}
-
-
-
-
-
- Cost: ${this.state.cost.lower} to $
- {this.state.cost.upper}
-
-
-
-
-
- Rating{this.state.rating && ": "}
- {this.state.rating}
-
-
-
- {[1, 2, 3, 4].map((rating) => {
- return (
-
- 1 ? "s" : ""
- } or more`}
- max={5}
- value={rating + 0.5}
- className="size-small"
- readOnly={true}
- >
-
- );
- })}
-
-
-
-
-
- {this.state.time}
-
-
-
-
-
-
-
-
-
+
- {this.state.categories.map((c: Category) => {
- return (
-
- this.categoriesChange(e, c.type)
- }
- >
- {c.type}
-
- );
- })}
-
-
-
+
+
+
+ Transportation{selectedCategories && `: ${selectedCategories}`}
+
+ Choose how you want to travel
+
+
+
+
+ Budget: ${this.state.cost.lower} - ${this.state.cost.upper}
+
+ Set the price range
+
+
+
+
+ Minimum Rating{this.state.rating && ": "}
+ {this.state.rating}
+
+ Filter by review score
+
+
+ {ratingOptions.map((rating) => {
+ return (
+
+ 1 ? "s" : ""} or more`}
+ max={5}
+ value={rating}
+ className="rating-control size-small"
+ readOnly={true}
+ >
+
+ );
+ })}
+
+
+
+
+ Arrival Time{this.state.time !== "Any time" && `: ${this.state.time}`}
+ Set the latest arrival time
+
+
+
+
+
+
+
);
}
@@ -194,11 +219,11 @@ export default class AccordionCustomization extends React.Component+ Select one or more transportation options for your trip. +
+
+ {this.state.categories.map((c: Category) => {
+ return (
+
+ this.categoriesChange(e, c.type)
+ }
+ >
+ {c.type}
+
+ );
+ })}
+
+
+ + Adjust the minimum and maximum cost for available options. +
+
+ ${this.state.cost.lower}
+ ${this.state.cost.upper}
+
+ + Choose the lowest rating you want to include in the results. +
++ Pick the latest acceptable arrival time for your trip. +
+
- Single Expand
-
-
-
- Common questions about renewal.
-
-
-
- What happens if I don't renew my subscription?
- Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark.
-
-
- If I don't renew my subscription will I still have access to previous versions of Infragistics products?
- Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or
- previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing
- to renew it.
-
-
- Will I be automatically charged for my renewal/ Can I be automatically charged for renewal?
- Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled,
- at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are
- subject to the renewal terms that were agreed upon as part of that purchase.
-
-
-
-
-
- What has changed about subscription and pricing model?
- We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
- for you to manage your license subscriptions and allows us to provide a better level of service for you. We
- updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI
- (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development,
- including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional,
- Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount,
- so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best
- price.
-
-
- Who will the updated changes impact?
- The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and
- Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript,
- Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this
- blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages.
- So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will
- be honored and renewed based upon the current agreement.
-
-
+ (false);
const switchChange = (e: IgrCheckboxChangeEventArgs) => {
setSingleExpand(e.detail.checked);
- }
-
+ };
+
return (
-
+
+
+ Workspace Settings
+ Nested account, access, and billing options
+
+
+
+ Profile
+ Name, photo, and contact details
+
+
+
+ Security
+ Password and sign-in preferences
+
+
+
+ Notifications
+ Email and product updates
+
+
+
+
+
+ Team Access
+ Members, roles, and permissions
+
+
+
+ Billing
+ Plan, invoices, and payment method
+
+
);
}
-// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+ Single Expand
+
+
+ Update the public information shown to other workspace members.
+Review active sessions, change your password, and configure sign-in requirements.
+Choose the messages you receive for comments, assignments, and releases.
+Invite teammates, assign roles, and review workspace permissions.
+Manage subscription details, billing contacts, and invoice delivery.
+
- Single Expand
-
-
-
- What has changed about subscription and pricing model?
- We have moved to a subscription-based pricing model for all our developer tools. This makes it easier
- for you to manage your license subscriptions and allows us to provide a better level of service for you. We
- updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI
- (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development,
- including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components, as well as Infragistics Professional,
- Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount,
- so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best
- price.
-
-
- Who will the updated changes impact?
- The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and
- Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript,
- Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this
- blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages.
- So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will
- be honored and renewed based upon the current agreement.
-
-
- What is the difference between your old model and your current subscription model for Ignite UI?
- For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with
- packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet
- server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages
-
-
- What happens if I don't renew my subscription?
- Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark.
-
-
- If I don't renew my subscription will I still have access to previous versions of Infragistics products?
- Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or
- previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing
- to renew it.
-
-
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## 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/accordion/programmatic-expansion
+```
+
+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/accordion/programmatic-expansion/index.html b/samples/layouts/accordion/programmatic-expansion/index.html
new file mode 100644
index 0000000000..050be7adb0
--- /dev/null
+++ b/samples/layouts/accordion/programmatic-expansion/index.html
@@ -0,0 +1,11 @@
+
+
+
+ Accordion Programmatic Expansion
+
+
+
+
+
+
+
diff --git a/samples/layouts/accordion/programmatic-expansion/package.json b/samples/layouts/accordion/programmatic-expansion/package.json
new file mode 100644
index 0000000000..de10646370
--- /dev/null
+++ b/samples/layouts/accordion/programmatic-expansion/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "react-accordion-programmatic-expansion",
+ "description": "This project provides example of Accordion Programmatic Expansion 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"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/layouts/accordion/programmatic-expansion/sandbox.config.json b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json
new file mode 100644
index 0000000000..f8b5562bd6
--- /dev/null
+++ b/samples/layouts/accordion/programmatic-expansion/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.css b/samples/layouts/accordion/programmatic-expansion/src/index.css
new file mode 100644
index 0000000000..dc0476de9b
--- /dev/null
+++ b/samples/layouts/accordion/programmatic-expansion/src/index.css
@@ -0,0 +1,19 @@
+.accordion-sample {
+ width: min(720px, 100%);
+ max-height: 100%;
+ overflow-y: auto;
+ margin: 0 auto;
+ padding: 24px;
+ box-sizing: border-box;
+}
+
+.accordion-toolbar {
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-bottom: 12px;
+}
+
+.action-button {
+ min-width: 96px;
+}
diff --git a/samples/layouts/accordion/programmatic-expansion/src/index.tsx b/samples/layouts/accordion/programmatic-expansion/src/index.tsx
new file mode 100644
index 0000000000..64c4664a4c
--- /dev/null
+++ b/samples/layouts/accordion/programmatic-expansion/src/index.tsx
@@ -0,0 +1,53 @@
+import React, { useRef } from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrAccordion, IgrButton, IgrExpansionPanel } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function AccordionProgrammaticExpansion() {
+ const accordionRef = useRef(null);
+
+ return (
+ Accordion Styling
+
+
+
+
+
+
+
diff --git a/samples/layouts/accordion/styling/package.json b/samples/layouts/accordion/styling/package.json
new file mode 100644
index 0000000000..ebf67487ca
--- /dev/null
+++ b/samples/layouts/accordion/styling/package.json
@@ -0,0 +1,42 @@
+{
+ "name": "react-accordion-styling",
+ "description": "This project provides example of Accordion 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"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/layouts/accordion/styling/sandbox.config.json b/samples/layouts/accordion/styling/sandbox.config.json
new file mode 100644
index 0000000000..f8b5562bd6
--- /dev/null
+++ b/samples/layouts/accordion/styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
diff --git a/samples/layouts/accordion/styling/src/index.css b/samples/layouts/accordion/styling/src/index.css
new file mode 100644
index 0000000000..506da5be76
--- /dev/null
+++ b/samples/layouts/accordion/styling/src/index.css
@@ -0,0 +1,40 @@
+.accordion-sample {
+ width: min(720px, 100%);
+ max-height: 100%;
+ overflow-y: auto;
+ margin: 0 auto;
+ padding: 24px;
+ box-sizing: border-box;
+}
+
+.accordion-sample igc-expansion-panel {
+ background-color: var(--ig-gray-50);
+ color: var(--ig-gray-900);
+ border-radius: 4px;
+}
+
+.accordion-sample igc-expansion-panel::part(header) {
+ background-color: var(--ig-gray-100);
+}
+
+.accordion-sample igc-expansion-panel[open]::part(header) {
+ background-color: var(--ig-primary-50);
+}
+
+.accordion-sample igc-expansion-panel::part(indicator) {
+ color: var(--ig-primary-500);
+}
+
+.accordion-sample igc-expansion-panel::part(title) {
+ color: var(--ig-gray-900);
+ font-weight: 600;
+}
+
+.accordion-sample igc-expansion-panel[open]::part(title),
+.accordion-sample igc-expansion-panel[open]::part(subtitle) {
+ color: var(--ig-primary-700);
+}
+
+.accordion-sample igc-expansion-panel::part(content) {
+ color: var(--ig-gray-700);
+}
diff --git a/samples/layouts/accordion/styling/src/index.tsx b/samples/layouts/accordion/styling/src/index.tsx
new file mode 100644
index 0000000000..4cc6a551ed
--- /dev/null
+++ b/samples/layouts/accordion/styling/src/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function AccordionStyling() {
+ return (
+ Accordion Tailwind Styling
+
+
+
+
+
+
+
diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json
new file mode 100644
index 0000000000..24d204ed97
--- /dev/null
+++ b/samples/layouts/accordion/tailwind-styling/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "react-accordion-tailwind-styling",
+ "description": "This project provides example of Accordion 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": {
+ "@tailwindcss/vite": "^4.3.3",
+ "@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",
+ "tailwindcss": "^4.3.3",
+ "typescript": "^4.8.4",
+ "vite": "^7.1.9",
+ "vitest": "^3.2.4",
+ "vitest-canvas-mock": "^0.3.3",
+ "worker-loader": "^3.0.8"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ]
+}
diff --git a/samples/layouts/accordion/tailwind-styling/sandbox.config.json b/samples/layouts/accordion/tailwind-styling/sandbox.config.json
new file mode 100644
index 0000000000..f8b5562bd6
--- /dev/null
+++ b/samples/layouts/accordion/tailwind-styling/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+ "infiniteLoopProtection": false,
+ "hardReloadOnChange": false,
+ "view": "browser"
+}
diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css
new file mode 100644
index 0000000000..eec79f37d7
--- /dev/null
+++ b/samples/layouts/accordion/tailwind-styling/src/index.css
@@ -0,0 +1,8 @@
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+@source "./index.tsx";
+
+.accordion-tailwind-sample {
+ max-height: 100%;
+ overflow-y: auto;
+}
diff --git a/samples/layouts/accordion/tailwind-styling/src/index.tsx b/samples/layouts/accordion/tailwind-styling/src/index.tsx
new file mode 100644
index 0000000000..5bec513a06
--- /dev/null
+++ b/samples/layouts/accordion/tailwind-styling/src/index.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const panelClassName = [
+ 'rounded',
+ 'bg-[var(--ig-gray-50)]',
+ 'text-[var(--ig-gray-900)]',
+ '[&::part(header)]:bg-[var(--ig-gray-100)]',
+ '[&[open]::part(header)]:bg-[var(--ig-primary-50)]',
+ '[&::part(indicator)]:text-[var(--ig-primary-500)]',
+ '[&::part(title)]:font-semibold',
+ '[&::part(title)]:text-[var(--ig-gray-900)]',
+ '[&[open]::part(title)]:text-[var(--ig-primary-700)]',
+ '[&[open]::part(subtitle)]:text-[var(--ig-primary-700)]',
+ '[&::part(content)]:text-[var(--ig-gray-700)]'
+].join(' ');
+
+export default function AccordionTailwindStyling() {
+ return (
+
+
+
+ Account
+ Profile and security settings
+
+
+ Notifications
+ Email and product updates
+
+
+ Billing
+ Payment and invoice settings
+
+
-
);
}
-// rendering above component to the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
+
+ Single Expand
+
+
+ Update your profile details, password, and sign-in preferences.
+Choose which notifications you receive and how often they are delivered.
+Manage payment methods, billing contacts, and invoice delivery options.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/accordion/programmatic-expansion
+```
+
+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/accordion/programmatic-expansion/index.html b/samples/layouts/accordion/programmatic-expansion/index.html
new file mode 100644
index 0000000000..050be7adb0
--- /dev/null
+++ b/samples/layouts/accordion/programmatic-expansion/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+ Billing
+ Invoices and payment settings
+
+
+
+ Security
+ Password and access controls
+
+
+
+ Notifications
+ Product updates and account alerts
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+ accordionRef.current?.showAll()}
+ >
+ Show All
+
+ accordionRef.current?.hideAll()}
+ >
+ Hide All
+
+
+
+ Review invoices, update payment methods, and manage billing contacts.
+Configure password rules, multi-factor authentication, and recovery options.
+Choose which product updates and account alerts are sent to your team.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/accordion/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/accordion/styling/index.html b/samples/layouts/accordion/styling/index.html
new file mode 100644
index 0000000000..a658e62846
--- /dev/null
+++ b/samples/layouts/accordion/styling/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+ Getting Started
+ Setup and onboarding
+
+
+
+ Billing
+ Invoices and payment methods
+
+
+
+ Security
+ Access and authentication
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(+ Find installation steps, project setup guidance, and resources for building your first application. +
++ Review invoices, update payment methods, and manage billing contacts for your account. +
++ Configure password rules, multi-factor authentication, and recovery options for your team. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 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/accordion/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/accordion/tailwind-styling/index.html b/samples/layouts/accordion/tailwind-styling/index.html
new file mode 100644
index 0000000000..d21cb0e1c3
--- /dev/null
+++ b/samples/layouts/accordion/tailwind-styling/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+ Getting Started
+ Setup and onboarding
+
+
+
+ Billing
+ Invoices and payment methods
+
+
+
+ Security
+ Access and authentication
+
+
+
+ );
+}
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(+ Find installation steps, project setup guidance, and resources for building your first application. +
++ Review invoices, update payment methods, and manage billing contacts for your account. +
++ Configure password rules, multi-factor authentication, and recovery options for your team. +
+