diff --git a/live-editing/configs/ButtonConfigGenerator.ts b/live-editing/configs/ButtonConfigGenerator.ts
index 3ae3e22d3..d9af0969d 100644
--- a/live-editing/configs/ButtonConfigGenerator.ts
+++ b/live-editing/configs/ButtonConfigGenerator.ts
@@ -86,6 +86,8 @@ export class ButtonConfigGenerator implements IConfigGenerator {
         // button tailwind styling
         configs.push(new Config({
             component: 'ButtonTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/button/"
         }));
diff --git a/live-editing/configs/ButtonGroupConfigGenerator.ts b/live-editing/configs/ButtonGroupConfigGenerator.ts
index 64aeafcbc..5716e6ad5 100644
--- a/live-editing/configs/ButtonGroupConfigGenerator.ts
+++ b/live-editing/configs/ButtonGroupConfigGenerator.ts
@@ -76,6 +76,8 @@ export class ButtonGroupConfigGenerator implements IConfigGenerator {
         // button group tailwind styling
         configs.push(new Config({
             component: 'ButtonGroupTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/buttonGroup/"
         }));
diff --git a/live-editing/configs/CardConfigGenerator.ts b/live-editing/configs/CardConfigGenerator.ts
index 26ec0aa60..24ea65ce7 100644
--- a/live-editing/configs/CardConfigGenerator.ts
+++ b/live-editing/configs/CardConfigGenerator.ts
@@ -56,9 +56,11 @@ export class CardConfigGenerator implements IConfigGenerator {
         // card tailwind styling
         configs.push(new Config({
             component: 'CardTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
             appConfig: BaseAppConfig,
             additionalFiles: [
-                "/src/app/layouts/card/card-tailwind-styling/icons.ts"
+                "/src/app/layouts/card/card-tailwind-styling/icons.ts",
+                ".postcssrc.json"
             ],
             shortenComponentPathBy: "/layouts/card/"
         }));
diff --git a/live-editing/configs/CheckboxConfigGenerator.ts b/live-editing/configs/CheckboxConfigGenerator.ts
index 54a993563..fadff6643 100644
--- a/live-editing/configs/CheckboxConfigGenerator.ts
+++ b/live-editing/configs/CheckboxConfigGenerator.ts
@@ -31,6 +31,8 @@ export class CheckboxConfigGenerator implements IConfigGenerator {
         // checkbox tailwind styling
         configs.push(new Config({
             component: 'CheckboxTailwindStylingComponent',
+            additionalDependencies: ["tailwindcss", "@tailwindcss/postcss"],
+            additionalFiles: [".postcssrc.json"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/checkbox/"
         }));
diff --git a/live-editing/configs/RatingConfigGenerator.ts b/live-editing/configs/RatingConfigGenerator.ts
new file mode 100644
index 000000000..d8b7c2112
--- /dev/null
+++ b/live-editing/configs/RatingConfigGenerator.ts
@@ -0,0 +1,67 @@
+import { Config, IConfigGenerator } from 'igniteui-live-editing'
+import { BaseAppConfig } from './BaseConfig';
+export class RatingConfigGenerator implements IConfigGenerator {
+
+    public generateConfigs(): Config[] {
+        const configs = new Array<Config>();
+
+        // rating overview
+        configs.push(new Config({
+            component: 'RatingOverviewComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating layout
+        configs.push(new Config({
+            component: 'RatingLayoutComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating interaction states
+        configs.push(new Config({
+            component: 'RatingInteractionStatesComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating states
+        configs.push(new Config({
+            component: 'RatingStatesComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating size
+        configs.push(new Config({
+            component: 'RatingSizeComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating styling
+        configs.push(new Config({
+            component: 'RatingStylingComponent',
+            additionalDependencies: ['igniteui-webcomponents'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        // rating tailwind styling
+        configs.push(new Config({
+            component: 'RatingTailwindStylingComponent',
+            additionalDependencies: ['igniteui-webcomponents', 'tailwindcss', '@tailwindcss/postcss'],
+            additionalFiles: ['.postcssrc.json'],
+            appConfig: BaseAppConfig,
+            shortenComponentPathBy: "/data-entries/rating/"
+        }));
+
+        return configs;
+    }
+}
diff --git a/live-editing/generators/ConfigGenerators.ts b/live-editing/generators/ConfigGenerators.ts
index 858d004a3..b615fa159 100644
--- a/live-editing/generators/ConfigGenerators.ts
+++ b/live-editing/generators/ConfigGenerators.ts
@@ -44,6 +44,7 @@ import { NavbarConfigGenerator } from '../configs/NavbarConfigGenerator';
 import { NavdrawerConfigGenerator } from '../configs/NavDrawerConfigGenerator';
 import { OverlayConfigGenerator } from '../configs/OverlayConfigGenerator';
 import { RadioConfigGenerator } from '../configs/RadioConfigGenerator';
+import { RatingConfigGenerator } from '../configs/RatingConfigGenerator';
 import { RippleConfigGenerator } from '../configs/RippleConfigGenerator';
 import { SelectConfigGenerator } from '../configs/SelectConfigGenerator';
 import { SliderConfigGenerator } from '../configs/SliderConfigGenerator';
@@ -115,6 +116,7 @@ export const CONFIG_GENERATORS =
         MaskConfigGenerator,
         MonthPickerConfigGenerator,
         RadioConfigGenerator,
+        RatingConfigGenerator,
         SelectConfigGenerator,
         SliderConfigGenerator,
         SwitchConfigGenerator,
diff --git a/src/app/data-entries/data-entries-routes-data.ts b/src/app/data-entries/data-entries-routes-data.ts
index c60900ec6..1505eaa8f 100644
--- a/src/app/data-entries/data-entries-routes-data.ts
+++ b/src/app/data-entries/data-entries-routes-data.ts
@@ -78,6 +78,13 @@ export const dataEntriesRoutesData = {
     "radio-styling-sample": { displayName: "Styling Radio Buttons", parentName: "Radio" },
     "radio-tailwind-styling-sample": { displayName: "Tailwind Styling Radio Buttons", parentName: "Radio" },
     "rating-form": { displayName: "Rating in Form", parentName: "Rating" },
+    "rating-overview": { displayName: "Rating Overview", parentName: "Rating" },
+    "rating-layout": { displayName: "Rating Layout", parentName: "Rating" },
+    "rating-interaction-states": { displayName: "Rating Interaction States", parentName: "Rating" },
+    "rating-states": { displayName: "Rating States", parentName: "Rating" },
+    "rating-size": { displayName: "Rating Size", parentName: "Rating" },
+    "rating-styling": { displayName: "Rating Styling", parentName: "Rating" },
+    "rating-tailwind-styling": { displayName: "Rating Tailwind Styling", parentName: "Rating" },
     "switch-overview": { displayName: "Switch Overview", parentName: "Switch" },
     "switch-enabled": { displayName: "Enabled Switches", parentName: "Switch" },
     "switch-disabled": { displayName: "Disabled Switches", parentName: "Switch" },
diff --git a/src/app/data-entries/data-entries.routes.ts b/src/app/data-entries/data-entries.routes.ts
index 1219ec653..12b4d0558 100644
--- a/src/app/data-entries/data-entries.routes.ts
+++ b/src/app/data-entries/data-entries.routes.ts
@@ -85,6 +85,13 @@ import { SwitchLayoutComponent } from './switch/switch-layout/switch-layout.comp
 import { SwitchStylingComponent } from './switch/switch-styling/switch-styling.component';
 import { SwitchTailwindStylingComponent } from './switch/switch-tailwind-styling/switch-tailwind-styling.component';
 import { RatingInFormComponent } from './rating/rating-form/rating-form.component';
+import { RatingOverviewComponent } from './rating/rating-overview/rating-overview.component';
+import { RatingLayoutComponent } from './rating/rating-layout/rating-layout.component';
+import { RatingInteractionStatesComponent } from './rating/rating-interaction-states/rating-interaction-states.component';
+import { RatingStatesComponent } from './rating/rating-states/rating-states.component';
+import { RatingSizeComponent } from './rating/rating-size/rating-size.component';
+import { RatingStylingComponent } from './rating/rating-styling/rating-styling.component';
+import { RatingTailwindStylingComponent } from './rating/rating-tailwind-styling/rating-tailwind-styling.component';
 import { TemplateDrivenFormValidationComponent } from './input-group/template-driven-form-validation/template-driven-form-validation.component';
 import { ReactiveFormValidationComponent } from './input-group/reactive-form-validation/reactive-form-validation.component';
 import { ReactiveFormCustomValidationComponent } from './input-group/reactive-form-custom-validation/reactive-form-custom-validation.component';
@@ -489,6 +496,41 @@ export const DataEntriesRoutes: Routes = [
         data: dataEntriesRoutesData['rating-in-form'],
         path: 'rating-form'
     },
+    {
+        component: RatingOverviewComponent,
+        data: dataEntriesRoutesData['rating-overview'],
+        path: 'rating-overview'
+    },
+    {
+        component: RatingLayoutComponent,
+        data: dataEntriesRoutesData['rating-layout'],
+        path: 'rating-layout'
+    },
+    {
+        component: RatingInteractionStatesComponent,
+        data: dataEntriesRoutesData['rating-interaction-states'],
+        path: 'rating-interaction-states'
+    },
+    {
+        component: RatingStatesComponent,
+        data: dataEntriesRoutesData['rating-states'],
+        path: 'rating-states'
+    },
+    {
+        component: RatingSizeComponent,
+        data: dataEntriesRoutesData['rating-size'],
+        path: 'rating-size'
+    },
+    {
+        component: RatingStylingComponent,
+        data: dataEntriesRoutesData['rating-styling'],
+        path: 'rating-styling'
+    },
+    {
+        component: RatingTailwindStylingComponent,
+        data: dataEntriesRoutesData['rating-tailwind-styling'],
+        path: 'rating-tailwind-styling'
+    },
     {
         component: SwitchOverviewComponent,
         data: dataEntriesRoutesData['switch-overview'],
diff --git a/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html
new file mode 100644
index 000000000..9cd71900b
--- /dev/null
+++ b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.html
@@ -0,0 +1,10 @@
+<div class="states">
+    <div class="state">
+        <span class="state-label">Enabled</span>
+        <igc-rating label="Rate your experience" [value]="1"></igc-rating>
+    </div>
+    <div class="state">
+        <span class="state-label">Disabled</span>
+        <igc-rating label="Rate your experience" [value]="1" [disabled]="true"></igc-rating>
+    </div>
+</div>
diff --git a/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss
new file mode 100644
index 000000000..b9b8ed01f
--- /dev/null
+++ b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.scss
@@ -0,0 +1,37 @@
+:host {
+    /* styles.scss asks the page for the large size; the ratings keep their own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.state {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.state-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+    --ig-rating-disabled-label-color: var(--ig-gray-500);
+}
diff --git a/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts
new file mode 100644
index 000000000..1a353b80f
--- /dev/null
+++ b/src/app/data-entries/rating/rating-interaction-states/rating-interaction-states.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-interaction-states',
+    styleUrls: ['./rating-interaction-states.component.scss'],
+    templateUrl: './rating-interaction-states.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingInteractionStatesComponent { }
diff --git a/src/app/data-entries/rating/rating-layout/rating-layout.component.html b/src/app/data-entries/rating/rating-layout/rating-layout.component.html
new file mode 100644
index 000000000..8563d85ab
--- /dev/null
+++ b/src/app/data-entries/rating/rating-layout/rating-layout.component.html
@@ -0,0 +1,10 @@
+<div class="layouts">
+    <div class="layout">
+        <span class="layout-label">Label / On</span>
+        <igc-rating label="Rate your experience" [value]="3"></igc-rating>
+    </div>
+    <div class="layout">
+        <span class="layout-label">Label / Off</span>
+        <igc-rating aria-label="Rate your experience" [value]="3"></igc-rating>
+    </div>
+</div>
diff --git a/src/app/data-entries/rating/rating-layout/rating-layout.component.scss b/src/app/data-entries/rating/rating-layout/rating-layout.component.scss
new file mode 100644
index 000000000..a74c7b1f8
--- /dev/null
+++ b/src/app/data-entries/rating/rating-layout/rating-layout.component.scss
@@ -0,0 +1,36 @@
+:host {
+    /* styles.scss asks the page for the large size; the ratings keep their own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.layouts {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.layout {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.layout-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}
diff --git a/src/app/data-entries/rating/rating-layout/rating-layout.component.ts b/src/app/data-entries/rating/rating-layout/rating-layout.component.ts
new file mode 100644
index 000000000..8ebbf93fc
--- /dev/null
+++ b/src/app/data-entries/rating/rating-layout/rating-layout.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-layout',
+    styleUrls: ['./rating-layout.component.scss'],
+    templateUrl: './rating-layout.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingLayoutComponent { }
diff --git a/src/app/data-entries/rating/rating-overview/rating-overview.component.html b/src/app/data-entries/rating/rating-overview/rating-overview.component.html
new file mode 100644
index 000000000..5143ca37a
--- /dev/null
+++ b/src/app/data-entries/rating/rating-overview/rating-overview.component.html
@@ -0,0 +1,9 @@
+<igx-card class="rating-card">
+    <igx-card-header>
+        <span igxCardHeaderTitle>Rate this product</span>
+        <span igxCardHeaderSubtitle>Your opinion matters to us!</span>
+    </igx-card-header>
+    <igx-card-content>
+        <igc-rating aria-label="Rate this product" [hoverPreview]="true"></igc-rating>
+    </igx-card-content>
+</igx-card>
diff --git a/src/app/data-entries/rating/rating-overview/rating-overview.component.scss b/src/app/data-entries/rating/rating-overview/rating-overview.component.scss
new file mode 100644
index 000000000..446a5d05e
--- /dev/null
+++ b/src/app/data-entries/rating/rating-overview/rating-overview.component.scss
@@ -0,0 +1,21 @@
+:host {
+    /* styles.scss asks the page for the large size; the rating keeps its own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.rating-card {
+    width: 15rem;
+    box-shadow: var(--ig-elevation-2);
+}
+
+.rating-card igx-card-content {
+    display: flex;
+    padding-bottom: 0.5rem;
+}
diff --git a/src/app/data-entries/rating/rating-overview/rating-overview.component.ts b/src/app/data-entries/rating/rating-overview/rating-overview.component.ts
new file mode 100644
index 000000000..a10465601
--- /dev/null
+++ b/src/app/data-entries/rating/rating-overview/rating-overview.component.ts
@@ -0,0 +1,20 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective } from 'igniteui-angular/card';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-overview',
+    styleUrls: ['./rating-overview.component.scss'],
+    templateUrl: './rating-overview.component.html',
+    imports: [
+        IgxCardComponent,
+        IgxCardHeaderComponent,
+        IgxCardHeaderTitleDirective,
+        IgxCardHeaderSubtitleDirective,
+        IgxCardContentDirective
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingOverviewComponent { }
diff --git a/src/app/data-entries/rating/rating-size/rating-size.component.html b/src/app/data-entries/rating/rating-size/rating-size.component.html
new file mode 100644
index 000000000..e38e1dd61
--- /dev/null
+++ b/src/app/data-entries/rating/rating-size/rating-size.component.html
@@ -0,0 +1,14 @@
+<div class="sizes">
+    <div class="size">
+        <span class="size-label">Small</span>
+        <igc-rating class="size-small" label="Rate your experience" [value]="5"></igc-rating>
+    </div>
+    <div class="size">
+        <span class="size-label">Medium</span>
+        <igc-rating class="size-medium" label="Rate your experience" [value]="5"></igc-rating>
+    </div>
+    <div class="size">
+        <span class="size-label">Large</span>
+        <igc-rating class="size-large" label="Rate your experience" [value]="5"></igc-rating>
+    </div>
+</div>
diff --git a/src/app/data-entries/rating/rating-size/rating-size.component.scss b/src/app/data-entries/rating/rating-size/rating-size.component.scss
new file mode 100644
index 000000000..da476f618
--- /dev/null
+++ b/src/app/data-entries/rating/rating-size/rating-size.component.scss
@@ -0,0 +1,44 @@
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.sizes {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.size {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.size-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}
+
+.size-small {
+    --ig-size: var(--ig-size-small);
+}
+
+.size-medium {
+    --ig-size: var(--ig-size-medium);
+}
+
+.size-large {
+    --ig-size: var(--ig-size-large);
+}
diff --git a/src/app/data-entries/rating/rating-size/rating-size.component.ts b/src/app/data-entries/rating/rating-size/rating-size.component.ts
new file mode 100644
index 000000000..627dcd2f8
--- /dev/null
+++ b/src/app/data-entries/rating/rating-size/rating-size.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-size',
+    styleUrls: ['./rating-size.component.scss'],
+    templateUrl: './rating-size.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingSizeComponent { }
diff --git a/src/app/data-entries/rating/rating-states/rating-states.component.html b/src/app/data-entries/rating/rating-states/rating-states.component.html
new file mode 100644
index 000000000..bcdd9be75
--- /dev/null
+++ b/src/app/data-entries/rating/rating-states/rating-states.component.html
@@ -0,0 +1,10 @@
+<div class="states">
+    <div class="state">
+        <span class="state-label">Empty State</span>
+        <igc-rating label="Rate your experience" [value]="0" [readOnly]="true"></igc-rating>
+    </div>
+    <div class="state">
+        <span class="state-label">Full State</span>
+        <igc-rating label="Rate your experience" [value]="5" [readOnly]="true"></igc-rating>
+    </div>
+</div>
diff --git a/src/app/data-entries/rating/rating-states/rating-states.component.scss b/src/app/data-entries/rating/rating-states/rating-states.component.scss
new file mode 100644
index 000000000..e3a64700f
--- /dev/null
+++ b/src/app/data-entries/rating/rating-states/rating-states.component.scss
@@ -0,0 +1,36 @@
+:host {
+    /* styles.scss asks the page for the large size; the ratings keep their own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.states {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.state {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.state-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: var(--ig-gray-600);
+}
+
+igc-rating {
+    --ig-rating-label-color: var(--ig-gray-700);
+}
diff --git a/src/app/data-entries/rating/rating-states/rating-states.component.ts b/src/app/data-entries/rating/rating-states/rating-states.component.ts
new file mode 100644
index 000000000..9b3ebf7e0
--- /dev/null
+++ b/src/app/data-entries/rating/rating-states/rating-states.component.ts
@@ -0,0 +1,13 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-states',
+    styleUrls: ['./rating-states.component.scss'],
+    templateUrl: './rating-states.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingStatesComponent { }
diff --git a/src/app/data-entries/rating/rating-styling/rating-styling.component.html b/src/app/data-entries/rating/rating-styling/rating-styling.component.html
new file mode 100644
index 000000000..73a98ab6e
--- /dev/null
+++ b/src/app/data-entries/rating/rating-styling/rating-styling.component.html
@@ -0,0 +1,17 @@
+<div class="examples">
+    <div class="example">
+        <span class="example-label">Custom icon and color</span>
+        <igc-rating class="heart-rating" aria-label="Rate your experience" [value]="3">
+            @for (symbol of symbols; track symbol) {
+                <igc-rating-symbol>
+                    <igc-icon name="favorite" collection="material"></igc-icon>
+                    <igc-icon slot="empty" name="favorite_border" collection="material"></igc-icon>
+                </igc-rating-symbol>
+            }
+        </igc-rating>
+    </div>
+    <div class="example">
+        <span class="example-label">10 stars</span>
+        <igc-rating class="star-rating" aria-label="Rate your experience" [max]="10" [value]="5"></igc-rating>
+    </div>
+</div>
diff --git a/src/app/data-entries/rating/rating-styling/rating-styling.component.scss b/src/app/data-entries/rating/rating-styling/rating-styling.component.scss
new file mode 100644
index 000000000..e9921a60b
--- /dev/null
+++ b/src/app/data-entries/rating/rating-styling/rating-styling.component.scss
@@ -0,0 +1,45 @@
+@use "sass:meta";
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-rating-styling {
+    /* styles.scss asks the page for the large size; the ratings keep their own
+       default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+.examples {
+    display: flex;
+    align-items: center;
+    gap: 3.75rem;
+}
+
+.example {
+    display: flex;
+    align-items: center;
+    gap: 1.875rem;
+}
+
+.example-label {
+    font-family: "Aktiv Grotesk", sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0.1px;
+    color: #556c86;
+}
+
+.heart-rating {
+    --ig-rating-symbol-full-color: #d9357f;
+    --ig-rating-symbol-empty-color: #d9357f;
+}
+
+.star-rating {
+    --ig-rating-symbol-full-color: #faa419;
+    --ig-rating-symbol-empty-color: #8a8a8a;
+}
diff --git a/src/app/data-entries/rating/rating-styling/rating-styling.component.ts b/src/app/data-entries/rating/rating-styling/rating-styling.component.ts
new file mode 100644
index 000000000..0eb95791b
--- /dev/null
+++ b/src/app/data-entries/rating/rating-styling/rating-styling.component.ts
@@ -0,0 +1,29 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
+import { configureTheme, defineComponents, IgcIconComponent, IgcRatingComponent, IgcRatingSymbolComponent, registerIconFromText } from 'igniteui-webcomponents';
+
+defineComponents(IgcRatingComponent, IgcRatingSymbolComponent, IgcIconComponent);
+
+const icons = [
+    { name: 'favorite', text: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>' },
+    { name: 'favorite_border', text: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z"/></svg>' }
+];
+
+@Component({
+    selector: 'app-rating-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./rating-styling.component.scss'],
+    templateUrl: './rating-styling.component.html',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingStylingComponent {
+    public symbols = [1, 2, 3, 4, 5];
+
+    constructor() {
+        // The sample loads the Bootstrap light theme in its styles, so the
+        // ratings take the matching shadow DOM styles regardless of the theme
+        // the documentation posts down before the sample renders.
+        configureTheme('bootstrap', 'light');
+        icons.forEach((icon) => registerIconFromText(icon.name, icon.text, 'material'));
+    }
+}
diff --git a/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html
new file mode 100644
index 000000000..84a114cb8
--- /dev/null
+++ b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.html
@@ -0,0 +1,23 @@
+<div class="w-[328px] rounded-xl border border-[#d2dbe8] bg-white p-2 font-[aktiv-grotesk,sans-serif] [--ig-font-family:aktiv-grotesk,sans-serif]">
+    <div class="flex items-center gap-4 px-4 py-2">
+        <img class="size-10 shrink-0 rounded-lg object-cover" src="https://dl.infragistics.com/x/img/rating/rating-headphones.png" alt="Wireless headphones" />
+        <div class="flex-1">
+            <span class="block text-sm leading-5 font-medium text-[#00142b]">Wireless Headphones</span>
+            <span class="block max-w-36 text-xs leading-4 font-semibold text-[#556c86]">Great sound quality and battery life!</span>
+        </div>
+        <span class="text-xl text-[#0176ff]">$89</span>
+    </div>
+    <div class="flex items-end justify-between border-t border-[#d2dbe8] p-2">
+        <igc-rating
+            class="[--ig-rating-label-color:#616161] [--ig-rating-symbol-empty-color:#8a8a8a] [--ig-rating-symbol-full-color:#faa419] [&::part(label)]:font-['Titillium_Web',sans-serif] [&::part(label)]:text-xs [&::part(label)]:leading-4 [&::part(label)]:font-normal [&::part(label)]:tracking-[0.4px]"
+            label="Rate this product"
+            [hoverPreview]="true">
+        </igc-rating>
+        <button
+            igxButton="contained"
+            type="button"
+            class="submit-review [--ig-contained-button-active-background:#004699] [--ig-contained-button-background:#0176ff] [--ig-contained-button-border-radius:0.375rem] [--ig-contained-button-focus-background:#004699] [--ig-contained-button-focus-hover-background:#005dcc] [--ig-contained-button-focus-visible-background:#0176ff] [--ig-contained-button-hover-background:#005dcc] [--ig-contained-button-size:1.875rem]">
+            Submit review
+        </button>
+    </div>
+</div>
diff --git a/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss
new file mode 100644
index 000000000..2802b276f
--- /dev/null
+++ b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.scss
@@ -0,0 +1,26 @@
+@use "sass:meta";
+@import url("https://use.typekit.net/bng2zgw.css");
+@include meta.load-css("igniteui-angular/lib/core/styles/themes/presets/igniteui-bootstrap-light");
+
+app-rating-tailwind-styling {
+    /* styles.scss asks the page for the large size; the rating and the button
+       keep their own default medium size here. */
+    --ig-size: var(--ig-size-medium);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 1rem;
+}
+
+/* The theme sets the button's padding and typography in a later layer than
+   Tailwind's utilities, so the design's values are set here instead. */
+.submit-review {
+    padding-inline: 1rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    letter-spacing: 0.1px;
+    text-transform: none;
+}
diff --git a/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts
new file mode 100644
index 000000000..90215c81c
--- /dev/null
+++ b/src/app/data-entries/rating/rating-tailwind-styling/rating-tailwind-styling.component.ts
@@ -0,0 +1,22 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, ViewEncapsulation } from '@angular/core';
+import { configureTheme, defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
+import { IgxButtonDirective } from 'igniteui-angular/directives';
+
+defineComponents(IgcRatingComponent);
+
+@Component({
+    selector: 'app-rating-tailwind-styling',
+    encapsulation: ViewEncapsulation.None,
+    styleUrls: ['./rating-tailwind-styling.component.scss'],
+    templateUrl: './rating-tailwind-styling.component.html',
+    imports: [IgxButtonDirective],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class RatingTailwindStylingComponent {
+    constructor() {
+        // The sample loads the Bootstrap light theme in its styles, so the
+        // rating takes the matching shadow DOM styles regardless of the theme
+        // the documentation posts down before the sample renders.
+        configureTheme('bootstrap', 'light');
+    }
+}
diff --git a/src/app/services/theme.service.ts b/src/app/services/theme.service.ts
index 03f2ef9c8..ae0edac8f 100644
--- a/src/app/services/theme.service.ts
+++ b/src/app/services/theme.service.ts
@@ -1,6 +1,7 @@
 import { isPlatformBrowser } from '@angular/common';
 import { DOCUMENT, Injectable, PLATFORM_ID, inject, signal } from '@angular/core';
 import { THEME_TOKEN, type IgxTheme } from 'igniteui-angular/core';
+import { configureTheme, type Theme, type ThemeVariant } from 'igniteui-webcomponents';
 
 /**
  * Message type posted by the documentation site's theming widget into the
@@ -163,7 +164,10 @@ export class ThemeService {
         const link = this.themeLink();
 
         if (!link.getAttribute('href')?.endsWith(href)) {
-            link.addEventListener('load', () => this.loadTypeface(), { once: true });
+            link.addEventListener('load', () => {
+                this.syncWebComponentsTheme();
+                this.loadTypeface();
+            }, { once: true });
             link.href = href;
         }
 
@@ -197,6 +201,26 @@ export class ThemeService {
         return link;
     }
 
+    /**
+     * Web components such as igc-rating adopt a stylesheet per theme in their
+     * shadow DOM, and they read the theme off `--ig-theme` only once, when the
+     * first of them connects. Once a theme stylesheet is in place, hand them
+     * the theme it declares. It is read back from the page rather than taken
+     * from the selection, so samples that load a theme of their own keep it.
+     */
+    private syncWebComponentsTheme(): void {
+        const styles = this.document.defaultView?.getComputedStyle(this.document.documentElement);
+
+        if (!styles) {
+            return;
+        }
+
+        configureTheme(
+            styles.getPropertyValue('--ig-theme').trim() as Theme,
+            styles.getPropertyValue('--ig-theme-variant').trim() as ThemeVariant
+        );
+    }
+
     /**
      * Each theme comes with its own typeface. Once a theme stylesheet is in
      * place, take the first family off `--ig-font-family` and pick it up from