From e7af9f7ab894eedee79be5f75870f4ca4d4fb8ea Mon Sep 17 00:00:00 2001
From: Konstantin Dinev <kdinev@infragistics.com>
Date: Wed, 13 May 2026 15:15:22 +0300
Subject: [PATCH 01/10] feat(storybook): adding Blazing Story storybook

---
 .agents/skills/blazing-story-story/SKILL.md   | 147 +++++++++++++++
 IgniteUI.Blazor.Lite.csproj                   |  15 +-
 IgniteUI.Blazor.Lite.sln                      |  17 ++
 package-lock.json                             | 171 ++++++++++--------
 package.json                                  |  18 +-
 stories/Components/App.razor                  |   2 +
 stories/Components/Pages/IFramePage.razor     |  41 +++++
 stories/Components/Pages/IndexPage.razor      |  36 ++++
 .../Stories/Accordion.stories.razor           |  42 +++++
 .../Components/Stories/Avatar.stories.razor   |  48 +++++
 .../Components/Stories/Badge.stories.razor    |  44 +++++
 .../Components/Stories/Banner.stories.razor   |  21 +++
 .../Components/Stories/Button.stories.razor   |  54 ++++++
 .../Stories/ButtonGroup.stories.razor         |  47 +++++
 .../Components/Stories/Calendar.stories.razor |  58 ++++++
 stories/Components/Stories/Card.stories.razor |  40 ++++
 .../Components/Stories/Carousel.stories.razor |  68 +++++++
 .../Components/Stories/Checkbox.stories.razor |  65 +++++++
 stories/Components/Stories/Chip.stories.razor |  44 +++++
 .../Stories/CircularProgress.stories.razor    |  29 +++
 .../Stories/DatePicker.stories.razor          |  40 ++++
 .../Stories/DateRangePicker.stories.razor     |  39 ++++
 .../Stories/DateTimeInput.stories.razor       |  15 ++
 .../Components/Stories/Dialog.stories.razor   |  44 +++++
 .../Components/Stories/Divider.stories.razor  |  48 +++++
 .../Components/Stories/Dropdown.stories.razor |  28 +++
 .../Stories/ExpansionPanel.stories.razor      |  46 +++++
 stories/Components/Stories/Icon.stories.razor |  27 +++
 .../Stories/IconButton.stories.razor          |  41 +++++
 .../Components/Stories/Input.stories.razor    |  54 ++++++
 .../Stories/LinearProgress.stories.razor      |  47 +++++
 stories/Components/Stories/List.stories.razor |  31 ++++
 .../Stories/MaskInput.stories.razor           |  28 +++
 .../Stories/NavDrawer.stories.razor           |  35 ++++
 .../Components/Stories/Navbar.stories.razor   |  20 ++
 .../Components/Stories/Radio.stories.razor    |  35 ++++
 .../Stories/RangeSlider.stories.razor         |  37 ++++
 .../Components/Stories/Rating.stories.razor   |  54 ++++++
 .../Components/Stories/Ripple.stories.razor   |  14 ++
 .../Components/Stories/Select.stories.razor   |  52 ++++++
 .../Components/Stories/Slider.stories.razor   |  51 ++++++
 .../Components/Stories/Snackbar.stories.razor |  25 +++
 .../Components/Stories/Stepper.stories.razor  |  58 ++++++
 .../Components/Stories/Switch.stories.razor   |  44 +++++
 stories/Components/Stories/Tabs.stories.razor |  37 ++++
 .../Components/Stories/Textarea.stories.razor |  42 +++++
 .../Stories/TileManager.stories.razor         |  74 ++++++++
 .../Components/Stories/Toast.stories.razor    |  24 +++
 .../Stories/ToggleButton.stories.razor        |  40 ++++
 .../Components/Stories/Tooltip.stories.razor  |  26 +++
 stories/Components/Stories/Tree.stories.razor |  42 +++++
 stories/Components/Stories/Welcome.md         |  35 ++++
 stories/Components/_Imports.razor             |  15 ++
 stories/IgniteUI.Blazor.Stories.csproj        |  25 +++
 stories/IgniteUI.Blazor.Stories.csproj.user   |   6 +
 stories/Program.cs                            |  33 ++++
 stories/Properties/launchSettings.json        |  22 +++
 stories/appsettings.Development.json          |   8 +
 stories/appsettings.json                      |   9 +
 59 files changed, 2269 insertions(+), 89 deletions(-)
 create mode 100644 .agents/skills/blazing-story-story/SKILL.md
 create mode 100644 stories/Components/App.razor
 create mode 100644 stories/Components/Pages/IFramePage.razor
 create mode 100644 stories/Components/Pages/IndexPage.razor
 create mode 100644 stories/Components/Stories/Accordion.stories.razor
 create mode 100644 stories/Components/Stories/Avatar.stories.razor
 create mode 100644 stories/Components/Stories/Badge.stories.razor
 create mode 100644 stories/Components/Stories/Banner.stories.razor
 create mode 100644 stories/Components/Stories/Button.stories.razor
 create mode 100644 stories/Components/Stories/ButtonGroup.stories.razor
 create mode 100644 stories/Components/Stories/Calendar.stories.razor
 create mode 100644 stories/Components/Stories/Card.stories.razor
 create mode 100644 stories/Components/Stories/Carousel.stories.razor
 create mode 100644 stories/Components/Stories/Checkbox.stories.razor
 create mode 100644 stories/Components/Stories/Chip.stories.razor
 create mode 100644 stories/Components/Stories/CircularProgress.stories.razor
 create mode 100644 stories/Components/Stories/DatePicker.stories.razor
 create mode 100644 stories/Components/Stories/DateRangePicker.stories.razor
 create mode 100644 stories/Components/Stories/DateTimeInput.stories.razor
 create mode 100644 stories/Components/Stories/Dialog.stories.razor
 create mode 100644 stories/Components/Stories/Divider.stories.razor
 create mode 100644 stories/Components/Stories/Dropdown.stories.razor
 create mode 100644 stories/Components/Stories/ExpansionPanel.stories.razor
 create mode 100644 stories/Components/Stories/Icon.stories.razor
 create mode 100644 stories/Components/Stories/IconButton.stories.razor
 create mode 100644 stories/Components/Stories/Input.stories.razor
 create mode 100644 stories/Components/Stories/LinearProgress.stories.razor
 create mode 100644 stories/Components/Stories/List.stories.razor
 create mode 100644 stories/Components/Stories/MaskInput.stories.razor
 create mode 100644 stories/Components/Stories/NavDrawer.stories.razor
 create mode 100644 stories/Components/Stories/Navbar.stories.razor
 create mode 100644 stories/Components/Stories/Radio.stories.razor
 create mode 100644 stories/Components/Stories/RangeSlider.stories.razor
 create mode 100644 stories/Components/Stories/Rating.stories.razor
 create mode 100644 stories/Components/Stories/Ripple.stories.razor
 create mode 100644 stories/Components/Stories/Select.stories.razor
 create mode 100644 stories/Components/Stories/Slider.stories.razor
 create mode 100644 stories/Components/Stories/Snackbar.stories.razor
 create mode 100644 stories/Components/Stories/Stepper.stories.razor
 create mode 100644 stories/Components/Stories/Switch.stories.razor
 create mode 100644 stories/Components/Stories/Tabs.stories.razor
 create mode 100644 stories/Components/Stories/Textarea.stories.razor
 create mode 100644 stories/Components/Stories/TileManager.stories.razor
 create mode 100644 stories/Components/Stories/Toast.stories.razor
 create mode 100644 stories/Components/Stories/ToggleButton.stories.razor
 create mode 100644 stories/Components/Stories/Tooltip.stories.razor
 create mode 100644 stories/Components/Stories/Tree.stories.razor
 create mode 100644 stories/Components/Stories/Welcome.md
 create mode 100644 stories/Components/_Imports.razor
 create mode 100644 stories/IgniteUI.Blazor.Stories.csproj
 create mode 100644 stories/IgniteUI.Blazor.Stories.csproj.user
 create mode 100644 stories/Program.cs
 create mode 100644 stories/Properties/launchSettings.json
 create mode 100644 stories/appsettings.Development.json
 create mode 100644 stories/appsettings.json

diff --git a/.agents/skills/blazing-story-story/SKILL.md b/.agents/skills/blazing-story-story/SKILL.md
new file mode 100644
index 0000000..53a62db
--- /dev/null
+++ b/.agents/skills/blazing-story-story/SKILL.md
@@ -0,0 +1,147 @@
+---
+allowed-tools: Glob Grep Read Write
+compatibility: Designed for Blazing Story projects (a Blazor-based Storybook clone for .NET). Requires a .Stories project referencing BlazingStory NuGet packages.
+description: Implement a Blazing Story story file (.stories.razor) for a Blazor UI component. Use when the user says "create a story for component X", "add stories for X", or similar requests in a Blazing Story (.NET / Blazor / Storybook) project.
+license: Unlicense
+metadata:
+    author: jsakamoto
+    github-path: skills/blazing-story-story
+    github-ref: refs/tags/v1.0.2
+    github-repo: https://github.com/BlazingStory/agent-skills
+    github-tree-sha: 36d13a0943547a646a3d91de27c9d8870b951cbd
+name: blazing-story-story
+---
+# Blazing Story — Story Implementation
+
+Create a `.stories.razor` file for a Blazor component in the currently open Blazing Story project.
+
+## Investigation policy
+
+The main goal of this policy is to free the developer from the hassle of approving "may I run this command?" prompts one by one. Many of those prompts come from operations that poke around outside the project — and most of the knowledge needed to write a story file is already available without them.
+
+Implement the story relying primarily on:
+
+- The guidance in this skill file
+- Your own knowledge of C#, .NET, Blazor, and general web/UI development
+- Other relevant skills available in this environment
+- Already-configured MCP servers and tools
+- Read-only exploration of the current project (`ls`, `Glob`, `Grep`, `Read`)
+
+**Avoid** operations that inspect the NuGet package cache folder, decompile Blazing Story DLLs, or otherwise probe the installed package contents. These are slow, require the developer's per-command approval, and disrupt the flow of work.
+
+If implementation details that are not covered above become necessary, consult the published source code on GitHub at https://github.com/jsakamoto/BlazingStory **instead of** digging into the local NuGet cache or decompiling DLLs.
+
+This policy may be relaxed only when strictly unavoidable.
+
+## Step 1: Identify the target component
+
+From `$ARGUMENTS` or the user's message, determine the component name (e.g., `Button`, `Rating`).
+
+## Step 2: Locate the component file
+
+Search the workspace for a `.razor` file matching the component name (e.g., `Button.razor`). Read it to understand:
+
+- All `[Parameter]` properties and their types
+- Any `RenderFragment` parameters (e.g., `ChildContent`)
+- Enum types used by parameters
+
+## Step 3: Locate the stories project
+
+Find the stories project directory — it is typically a separate project named `*.Stories` or containing a `Stories/` subfolder. Look for existing `.stories.razor` files to confirm the correct location and the `@using` conventions used.
+
+## Step 4: Determine the story file path
+
+Place the new file inside the `Stories/` folder of the stories project, mirroring the category structure if one already exists. Name the file `ComponentName.stories.razor`.
+
+Example: `MyApp.Stories/Stories/Components/Button.stories.razor`
+
+## Step 5: Write the story file
+
+Use the following structure:
+
+```razor
+@attribute [Stories("Category/ComponentName")]
+
+<Stories TComponent="ComponentName" Layout="typeof(Centered)">
+
+    <ArgType For="_ => _.EnumParam" Control="ControlType.Radio" />
+    <ArgType For="_ => _.ColorParam" Control="ControlType.Color" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _.SomeParam" Value="someValue" />
+        </Arguments>
+        <Template>
+            <ComponentName @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Label</text>;
+}
+```
+
+### Rules
+
+**File naming**
+- Must end in `.stories.razor` to enable the "Show code" feature in Blazing Story.
+
+**`[Stories("...")]` path**
+- Use `/` as separator. The path becomes the sidebar navigation tree.
+- Mirror the folder path under `Stories/` (e.g., file at `Stories/Components/Button.stories.razor` → `[Stories("Components/Button")]`).
+
+**`<Stories TComponent="...">`**
+- `TComponent` is the Blazor component type.
+- `Layout` is optional. Common choices:
+  - `Centered` — centers the component horizontally and vertically (good default for most UI components).
+  - `FullScreen` — fills the entire canvas (good for page-level components).
+  - `MarginedFrame` — adds a margin around the component.
+  - Omit `Layout` entirely if you are unsure or if the project has no custom layouts.
+
+**`<ArgType>`**
+- Controls how a parameter appears in the Controls panel.
+- Available `ControlType` values:
+  - `ControlType.Default` — auto-detected from the parameter type (no need to specify explicitly).
+  - `ControlType.Radio` — radio buttons; good for enums with 2–4 values.
+  - `ControlType.Select` — dropdown; good for enums with 5+ values.
+  - `ControlType.Color` — color picker; use for `string` or `Color` parameters representing a color.
+
+**`<Story Name="...">`**
+- Each `<Story>` represents one variant shown in the sidebar.
+- Always include a `"Default"` story as the baseline.
+- Add further stories for meaningful parameter combinations (e.g., `"Large"`, `"Disabled"`, `"With Icon"`).
+
+**`<Arguments>` and `<Arg>`**
+- Use `<Arg For="_ => _.ParamName" Value="..." />` to set initial parameter values for a story.
+- For `RenderFragment` parameters, define the value in the `@code` block and reference it via `<Arg>`:
+  ```razor
+  <Arg For="_ => _.ChildContent" Value="_content" />
+
+  @code {
+      private RenderFragment _content = @<text>Click me</text>;
+  }
+  ```
+- Do **not** hardcode `RenderFragment` content directly in the `<Template>` markup — this prevents runtime modification via the Controls panel.
+
+**`<Template>`**
+- Always add `@attributes="context.Args"` to the component tag to wire up the Controls panel.
+- Pass only parameters that cannot be handled via `@attributes` (e.g., event callbacks, non-parameter child content) directly in the markup.
+
+**Null-forgiving operator**
+- When the component type is nullable, use `_=>_!.PropertyName` in `For` lambdas:
+  ```razor
+  <ArgType For="_=>_!.Color" Control="ControlType.Color" />
+  ```
+
+**`@using` directives**
+- Check whether the component namespace is already imported globally (e.g., via `_Imports.razor`). Add `@using` only if needed.
+
+## Step 6: Verify
+
+After writing the file, briefly summarize:
+- The file path created
+- The stories added and which parameter variants they cover
+- Any `ArgType` customizations applied
+- Any assumptions made (e.g., chosen `Layout`, omitted optional parameters)
diff --git a/IgniteUI.Blazor.Lite.csproj b/IgniteUI.Blazor.Lite.csproj
index 49f7b7b..d4145e1 100644
--- a/IgniteUI.Blazor.Lite.csproj
+++ b/IgniteUI.Blazor.Lite.csproj
@@ -2,7 +2,6 @@
 
   <PropertyGroup>
     <PackageIdSuffix>.Lite</PackageIdSuffix>
-    
   </PropertyGroup>
 	
   <!-- Removed as pinning the language to an older version prevents building in net10 where global usings files are autogenerated  -->
@@ -40,11 +39,11 @@
   </PropertyGroup>
 
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
-      <DocumentationFile>bin\Debug\$(TargetFramework)\IgniteUI.Blazor.xml</DocumentationFile>
+      <DocumentationFile>bin\Debug\$(TargetFramework)\IgniteUI.Blazor.Lite.xml</DocumentationFile>
   </PropertyGroup>
 
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
-      <DocumentationFile>bin\Release\$(TargetFramework)\IgniteUI.Blazor.xml</DocumentationFile>
+      <DocumentationFile>bin\Release\$(TargetFramework)\IgniteUI.Blazor.Lite.xml</DocumentationFile>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(TargetFramework)' == 'net8.0'">
@@ -59,10 +58,12 @@
   
   <ItemGroup>
     <Compile Remove="dist\**" />
+    <Compile Remove="stories\**" />
     <Compile Remove="tests\**" />
     <Content Remove="dist\**" />
     <Content Remove="src\**" />
     <Content Remove="node_modules\**" />
+    <Content Remove="stories\**" />
     <Content Remove="tests\**" />
     <Content Remove="*.json" />
     <EmbeddedResource Remove="dist\**" />
@@ -87,5 +88,13 @@
       <PackagePath></PackagePath>
     </None>
   </ItemGroup>
+  
+  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
+    <Exec Command="npm run build&#xD;&#xA;" />
+  </Target>
+  
+  <Target Name="PostBuild" AfterTargets="PostBuildEvent">
+    <Exec Command="xcopy /y /s /r /i &quot;./node_modules/igniteui-webcomponents/themes&quot; &quot;./wwwroot/themes&quot;" />
+  </Target>
 
 </Project>
diff --git a/IgniteUI.Blazor.Lite.sln b/IgniteUI.Blazor.Lite.sln
index 2f08bab..50a23d2 100644
--- a/IgniteUI.Blazor.Lite.sln
+++ b/IgniteUI.Blazor.Lite.sln
@@ -9,6 +9,10 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "tests", "tests", "{0AB3BF05
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "IgniteUI.Blazor.Tests", "tests\IgniteUI.Blazor.Tests\IgniteUI.Blazor.Tests.csproj", "{71037C73-544F-4D40-A7FA-10951682034B}"
 EndProject
+Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "stories", "stories", "{EB5D65CF-FD37-16C0-3293-5E9FB153C94C}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "IgniteUI.Blazor.Stories", "stories\IgniteUI.Blazor.Stories.csproj", "{6A7088DF-1BB1-4951-A477-EEFB6076D14A}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -43,12 +47,25 @@ Global
 		{71037C73-544F-4D40-A7FA-10951682034B}.Release|x64.Build.0 = Release|Any CPU
 		{71037C73-544F-4D40-A7FA-10951682034B}.Release|x86.ActiveCfg = Release|Any CPU
 		{71037C73-544F-4D40-A7FA-10951682034B}.Release|x86.Build.0 = Release|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Debug|x64.Build.0 = Debug|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Debug|x86.Build.0 = Debug|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Release|x64.ActiveCfg = Release|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Release|x64.Build.0 = Release|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Release|x86.ActiveCfg = Release|Any CPU
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
 		{71037C73-544F-4D40-A7FA-10951682034B} = {0AB3BF05-4346-4AA6-1389-037BE0695223}
+		{6A7088DF-1BB1-4951-A477-EEFB6076D14A} = {EB5D65CF-FD37-16C0-3293-5E9FB153C94C}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {FBFD4BB8-45F8-4876-9E53-6245DB0FA00A}
diff --git a/package-lock.json b/package-lock.json
index e5430d9..9a3fbf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,12 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@floating-ui/core": "^1.7.2",
-        "@floating-ui/dom": "^1.7.2",
-        "@lit-labs/virtualizer": "^2.0.12",
-        "@lit/context": "^1.1.3",
-        "core-js": "^3.1.4",
-        "igniteui-webcomponents": "~6.3.6",
-        "lit": "^3.1.2",
-        "lit-html": "^3.1.2"
+        "@floating-ui/dom": "^1.7.6",
+        "@lit-labs/virtualizer": "^2.1.1",
+        "@lit/context": "^1.1.6",
+        "igniteui-webcomponents": "~7.1.3",
+        "lit": "^3.3.2",
+        "lit-html": "^3.3.2"
       },
       "devDependencies": {
         "copy-webpack-plugin": "^14.0.0",
@@ -236,29 +234,29 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
-      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
       }
     },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
-      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+    "node_modules/@floating-ui/dom/node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/core": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/utils": "^0.2.11"
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
       "license": "MIT"
     },
     "node_modules/@gulpjs/messages": {
@@ -429,11 +427,12 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "node_modules/@lit/context": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.3.tgz",
-      "integrity": "sha512-Auh37F4S0PZM93HTDfZWs97mmzaQ7M3vnTc9YvxAGyP3UItSK/8Fs0vTOGT+njuvOwbKio/l8Cx/zWL4vkutpQ==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz",
+      "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==",
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@lit/reactive-element": "^1.6.2 || ^2.0.0"
+        "@lit/reactive-element": "^1.6.2 || ^2.1.0"
       }
     },
     "node_modules/@lit/reactive-element": {
@@ -1840,11 +1839,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/core-js": {
-      "version": "3.2.1",
-      "hasInstallScript": true,
-      "license": "MIT"
-    },
     "node_modules/core-util-is": {
       "version": "1.0.2",
       "dev": true,
@@ -3933,30 +3927,49 @@
         }
       ]
     },
+    "node_modules/igniteui-i18n-core": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz",
+      "integrity": "sha512-CO5Rqo5uqgyAfIHbFVuBEmo+fYXgLQ7zxRShqAu+ng8kDS5uwWjKeSGWVZjKMBgxmc6ZWMMbdcWIpGZUSOkPsw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "igniteui-i18n-resources": "1.0.5"
+      },
+      "peerDependenciesMeta": {
+        "igniteui-i18n-resources": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/igniteui-webcomponents": {
-      "version": "6.3.6",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.3.6.tgz",
-      "integrity": "sha512-MRCCD204AE/0H2WRWiZHdRnpuldn/pjzk+3VGAtOvJ03+22HlmE3/7sMhnfNqsxqn/SHFTTFzBV56f3FEFu1+w==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz",
+      "integrity": "sha512-iG4xBzooIOxtnAG8VIg39zKVWoo9jy2iEK3CDLGZYb9hU1LZx+4SAOPFkB9FSp15dgR4ql6kGKYf93T8oK0sdw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.7.0",
         "@lit-labs/virtualizer": "^2.1.0",
         "@lit/context": "^1.1.0",
+        "igniteui-i18n-core": "^1.0.1",
         "lit": "^3.3.0"
       },
       "engines": {
-        "node": ">=20"
+        "node": ">=22"
       },
       "peerDependencies": {
-        "dompurify": "^3.2.0",
-        "marked": "^16.3.0",
+        "dompurify": "^3.3.0",
+        "igniteui-i18n-resources": "^1.0.1",
+        "marked": "^17.0.0",
         "marked-shiki": "^1.2.0",
-        "shiki": "^3.12.0"
+        "shiki": "^3.20.0"
       },
       "peerDependenciesMeta": {
         "dompurify": {
           "optional": true
         },
+        "igniteui-i18n-resources": {
+          "optional": true
+        },
         "marked": {
           "optional": true
         },
@@ -4445,9 +4458,9 @@
       }
     },
     "node_modules/lit": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz",
-      "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz",
+      "integrity": "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@lit/reactive-element": "^2.1.0",
@@ -4467,9 +4480,9 @@
       }
     },
     "node_modules/lit-html": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.1.tgz",
-      "integrity": "sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.2.tgz",
+      "integrity": "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
@@ -8417,27 +8430,29 @@
         "levn": "^0.4.1"
       }
     },
-    "@floating-ui/core": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
-      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
-      "requires": {
-        "@floating-ui/utils": "^0.2.10"
-      }
-    },
     "@floating-ui/dom": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.3.tgz",
-      "integrity": "sha512-uZA413QEpNuhtb3/iIKoYMSK07keHPYeXF02Zhd6e213j+d1NamLix/mCLxBUDW/Gx52sPH2m+chlUsyaBs/Ag==",
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
       "requires": {
-        "@floating-ui/core": "^1.7.3",
-        "@floating-ui/utils": "^0.2.10"
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      },
+      "dependencies": {
+        "@floating-ui/core": {
+          "version": "1.7.5",
+          "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+          "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+          "requires": {
+            "@floating-ui/utils": "^0.2.11"
+          }
+        }
       }
     },
     "@floating-ui/utils": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
-      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="
     },
     "@gulpjs/messages": {
       "version": "1.1.0",
@@ -8569,11 +8584,11 @@
       }
     },
     "@lit/context": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.3.tgz",
-      "integrity": "sha512-Auh37F4S0PZM93HTDfZWs97mmzaQ7M3vnTc9YvxAGyP3UItSK/8Fs0vTOGT+njuvOwbKio/l8Cx/zWL4vkutpQ==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz",
+      "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==",
       "requires": {
-        "@lit/reactive-element": "^1.6.2 || ^2.0.0"
+        "@lit/reactive-element": "^1.6.2 || ^2.1.0"
       }
     },
     "@lit/reactive-element": {
@@ -9635,9 +9650,6 @@
         }
       }
     },
-    "core-js": {
-      "version": "3.2.1"
-    },
     "core-util-is": {
       "version": "1.0.2",
       "dev": true
@@ -11152,14 +11164,21 @@
       "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
       "dev": true
     },
+    "igniteui-i18n-core": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz",
+      "integrity": "sha512-CO5Rqo5uqgyAfIHbFVuBEmo+fYXgLQ7zxRShqAu+ng8kDS5uwWjKeSGWVZjKMBgxmc6ZWMMbdcWIpGZUSOkPsw==",
+      "requires": {}
+    },
     "igniteui-webcomponents": {
-      "version": "6.3.6",
-      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-6.3.6.tgz",
-      "integrity": "sha512-MRCCD204AE/0H2WRWiZHdRnpuldn/pjzk+3VGAtOvJ03+22HlmE3/7sMhnfNqsxqn/SHFTTFzBV56f3FEFu1+w==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz",
+      "integrity": "sha512-iG4xBzooIOxtnAG8VIg39zKVWoo9jy2iEK3CDLGZYb9hU1LZx+4SAOPFkB9FSp15dgR4ql6kGKYf93T8oK0sdw==",
       "requires": {
         "@floating-ui/dom": "^1.7.0",
         "@lit-labs/virtualizer": "^2.1.0",
         "@lit/context": "^1.1.0",
+        "igniteui-i18n-core": "^1.0.1",
         "lit": "^3.3.0"
       }
     },
@@ -11495,9 +11514,9 @@
       }
     },
     "lit": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.1.tgz",
-      "integrity": "sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz",
+      "integrity": "sha512-NF9zbsP79l4ao2SNrH3NkfmFgN/hBYSQo90saIVI1o5GpjAdCPVstVzO1MrLOakHoEhYkrtRjPK6Ob521aoYWQ==",
       "requires": {
         "@lit/reactive-element": "^2.1.0",
         "lit-element": "^4.2.0",
@@ -11515,9 +11534,9 @@
       }
     },
     "lit-html": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.1.tgz",
-      "integrity": "sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.3.2.tgz",
+      "integrity": "sha512-Qy9hU88zcmaxBXcc10ZpdK7cOLXvXpRoBxERdtqV9QOrfpMZZ6pSYP91LhpPtap3sFMUiL7Tw2RImbe0Al2/kw==",
       "requires": {
         "@types/trusted-types": "^2.0.2"
       }
diff --git a/package.json b/package.json
index 1798a47..35a099f 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "cross-env NODE_ENV=production node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --mode production --config ./webpack.config.js  --color --bail",
-    "build:dev": "cross-env NODE_ENV=development node --max-old-space-size=8192 node_modules/webpack/bin/webpack.js --mode development --config ./webpack.config.js  --color --bail",
+    "build": "cross-env NODE_ENV=production node node_modules/webpack/bin/webpack.js --mode production --config ./webpack.config.js  --color --bail",
+    "build:dev": "cross-env NODE_ENV=development node node_modules/webpack/bin/webpack.js --mode development --config ./webpack.config.js  --color --bail",
     "ingest": "gulp"
   },
   "author": "",
@@ -39,13 +39,11 @@
     "yargs": "^17.2.1"
   },
   "dependencies": {
-    "@floating-ui/core": "^1.7.2",
-    "@floating-ui/dom": "^1.7.2",
-    "@lit-labs/virtualizer": "^2.0.12",
-    "@lit/context": "^1.1.3",
-    "core-js": "^3.1.4",
-    "igniteui-webcomponents": "~6.3.6",
-    "lit": "^3.1.2",
-    "lit-html": "^3.1.2"
+    "@floating-ui/dom": "^1.7.6",
+    "@lit-labs/virtualizer": "^2.1.1",
+    "@lit/context": "^1.1.6",
+    "igniteui-webcomponents": "~7.1.3",
+    "lit": "^3.3.2",
+    "lit-html": "^3.3.2"
   }
 }
diff --git a/stories/Components/App.razor b/stories/Components/App.razor
new file mode 100644
index 0000000..c8519da
--- /dev/null
+++ b/stories/Components/App.razor
@@ -0,0 +1,2 @@
+<BlazingStoryApp Assemblies="[typeof(App).Assembly]">
+</BlazingStoryApp>
\ No newline at end of file
diff --git a/stories/Components/Pages/IFramePage.razor b/stories/Components/Pages/IFramePage.razor
new file mode 100644
index 0000000..cd30c8f
--- /dev/null
+++ b/stories/Components/Pages/IFramePage.razor
@@ -0,0 +1,41 @@
+@inject NavigationManager NavigationManager
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IgniteUI.Blazor.Stories</title>
+    <base href="@(new Uri(NavigationManager.BaseUri).AbsolutePath)" />
+    <ResourcePreloader />
+    <ImportMap />
+    <!--
+    If you need to add <link> or <script> elements to include CSS 
+    or JavaScript files for canvas views of your Stories,
+    YOU SHOULD PLACE THEM HERE, not in the "IndexPage.razor" file.
+    -->
+    <link rel="stylesheet" href="@Assets["css/blazor-ui.css"]" />
+    <link rel="stylesheet" href="@Assets["IgniteUI.Blazor.Stories.styles.css"]" />
+    <link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/dark/bootstrap.css" />
+    <HeadOutlet @rendermode="@InteractiveServer" />
+</head>
+
+<body style="margin: 0; min-height: 100vh;">
+    <IgniteUI.Blazor.Stories.Components.App @rendermode="@InteractiveServer" />
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <!--
+    If you need to add <script> elements to include 
+    JavaScript files for canvas views of your Stories,
+    YOU SHOULD PLACE THEM HERE, not in the "IndexPage.razor" file.
+    -->
+    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+</body>
+
+</html>
diff --git a/stories/Components/Pages/IndexPage.razor b/stories/Components/Pages/IndexPage.razor
new file mode 100644
index 0000000..8932417
--- /dev/null
+++ b/stories/Components/Pages/IndexPage.razor
@@ -0,0 +1,36 @@
+@inject NavigationManager NavigationManager
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>IgniteUI.Blazor.Stories</title>
+    <base href="@(new Uri(NavigationManager.BaseUri).AbsolutePath)" />
+    <ResourcePreloader />
+    <ImportMap />
+    <!--
+    DON'T PUT ANY ADDITIONAL CSS OR JAVASCRIPT LINKS IN THIS FILE.
+    Please do that in the "IFramePage.razor" instead.
+    -->
+    <link rel="stylesheet" href="@Assets["css/blazor-ui.css"]" />
+    <HeadOutlet @rendermode="@InteractiveServer" />
+</head>
+
+<body>
+    <IgniteUI.Blazor.Stories.Components.App @rendermode="@InteractiveServer" />
+
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+
+    <!--
+    DON'T PUT ANY ADDITIONAL JAVASCRIPT LINKS IN THIS FILE.
+    Please do that in the "IFramePage.razor" instead.
+    -->
+    <script src="@Assets["_framework/blazor.web.js"]"></script>
+</body>
+
+</html>
diff --git a/stories/Components/Stories/Accordion.stories.razor b/stories/Components/Stories/Accordion.stories.razor
new file mode 100644
index 0000000..0623a14
--- /dev/null
+++ b/stories/Components/Stories/Accordion.stories.razor
@@ -0,0 +1,42 @@
+@attribute [Stories("Layout/Accordion")]
+
+<Stories TComponent="IgbAccordion">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.SingleExpand" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbAccordion @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Single Expand">
+        <Arguments>
+            <Arg For="_ => _!.SingleExpand" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbAccordion @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbExpansionPanel>
+            <span slot="title">Panel 1</span>
+            <p>Content for panel 1. This is some descriptive text.</p>
+        </IgbExpansionPanel>
+        <IgbExpansionPanel>
+            <span slot="title">Panel 2</span>
+            <p>Content for panel 2. More information here.</p>
+        </IgbExpansionPanel>
+        <IgbExpansionPanel>
+            <span slot="title">Panel 3</span>
+            <p>Content for panel 3. Additional details.</p>
+        </IgbExpansionPanel>
+    </text>;
+}
diff --git a/stories/Components/Stories/Avatar.stories.razor b/stories/Components/Stories/Avatar.stories.razor
new file mode 100644
index 0000000..36c59cf
--- /dev/null
+++ b/stories/Components/Stories/Avatar.stories.razor
@@ -0,0 +1,48 @@
+@attribute [Stories("Data Display/Avatar")]
+
+<Stories TComponent="IgbAvatar">
+
+    <ArgType For="_ => _!.Shape" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Initials" Value='"AB"' />
+            <Arg For="_ => _!.Shape" Value="AvatarShape.Circle" />
+        </Arguments>
+        <Template>
+            <IgbAvatar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="With Image">
+        <Arguments>
+            <Arg For="_ => _!.Src" Value='"https://via.placeholder.com/150"' />
+            <Arg For="_ => _!.Alt" Value='"User avatar"' />
+            <Arg For="_ => _!.Shape" Value="AvatarShape.Circle" />
+        </Arguments>
+        <Template>
+            <IgbAvatar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Square">
+        <Arguments>
+            <Arg For="_ => _!.Initials" Value='"AB"' />
+            <Arg For="_ => _!.Shape" Value="AvatarShape.Square" />
+        </Arguments>
+        <Template>
+            <IgbAvatar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Rounded">
+        <Arguments>
+            <Arg For="_ => _!.Initials" Value='"AB"' />
+            <Arg For="_ => _!.Shape" Value="AvatarShape.Rounded" />
+        </Arguments>
+        <Template>
+            <IgbAvatar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Badge.stories.razor b/stories/Components/Stories/Badge.stories.razor
new file mode 100644
index 0000000..9516485
--- /dev/null
+++ b/stories/Components/Stories/Badge.stories.razor
@@ -0,0 +1,44 @@
+@attribute [Stories("Data Display/Badge")]
+
+<Stories TComponent="IgbBadge">
+
+    <ArgType For="_ => _!.Variant" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.Shape" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="StyleVariant.Primary" />
+            <Arg For="_ => _!.Shape" Value="BadgeShape.Rounded" />
+            <Arg For="_ => _!.Outlined" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbBadge @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Outlined" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbBadge @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Square">
+        <Arguments>
+            <Arg For="_ => _!.Shape" Value="BadgeShape.Square" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbBadge @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>1</text>;
+}
diff --git a/stories/Components/Stories/Banner.stories.razor b/stories/Components/Stories/Banner.stories.razor
new file mode 100644
index 0000000..db7f1ff
--- /dev/null
+++ b/stories/Components/Stories/Banner.stories.razor
@@ -0,0 +1,21 @@
+@attribute [Stories("Feedback/Banner")]
+
+<Stories TComponent="IgbBanner">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbBanner @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <span>This is an important notification banner message.</span>
+    </text>;
+}
diff --git a/stories/Components/Stories/Button.stories.razor b/stories/Components/Stories/Button.stories.razor
new file mode 100644
index 0000000..e132024
--- /dev/null
+++ b/stories/Components/Stories/Button.stories.razor
@@ -0,0 +1,54 @@
+@attribute [Stories("Actions/Button")]
+
+<Stories TComponent="IgbButton">
+
+    <ArgType For="_ => _!.Variant" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.DisplayType" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="ButtonVariant.Contained" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="ButtonVariant.Outlined" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Flat">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="ButtonVariant.Flat" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="ButtonVariant.Contained" />
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Click Me</text>;
+}
\ No newline at end of file
diff --git a/stories/Components/Stories/ButtonGroup.stories.razor b/stories/Components/Stories/ButtonGroup.stories.razor
new file mode 100644
index 0000000..7410c3e
--- /dev/null
+++ b/stories/Components/Stories/ButtonGroup.stories.razor
@@ -0,0 +1,47 @@
+@attribute [Stories("Actions/ButtonGroup")]
+
+<Stories TComponent="IgbButtonGroup">
+
+    <ArgType For="_ => _!.Selection" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.Alignment" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="ButtonGroupSelection.Single" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButtonGroup @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Multiple Selection">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="ButtonGroupSelection.Multiple" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButtonGroup @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbButtonGroup @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbToggleButton>Bold</IgbToggleButton>
+        <IgbToggleButton>Italic</IgbToggleButton>
+        <IgbToggleButton>Underline</IgbToggleButton>
+    </text>;
+}
diff --git a/stories/Components/Stories/Calendar.stories.razor b/stories/Components/Stories/Calendar.stories.razor
new file mode 100644
index 0000000..aebf68f
--- /dev/null
+++ b/stories/Components/Stories/Calendar.stories.razor
@@ -0,0 +1,58 @@
+@attribute [Stories("Forms/Calendar")]
+
+<Stories TComponent="IgbCalendar">
+
+    <ArgType For="_ => _!.Selection" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.HeaderOrientation" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.ActiveView" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="CalendarSelection.Single" />
+            <Arg For="_ => _!.ShowWeekNumbers" Value="false" />
+            <Arg For="_ => _!.HideHeader" Value="false" />
+            <Arg For="_ => _!.HideOutsideDays" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbCalendar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Multiple Selection">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="CalendarSelection.Multiple" />
+        </Arguments>
+        <Template>
+            <IgbCalendar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Range Selection">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="CalendarSelection.Range" />
+        </Arguments>
+        <Template>
+            <IgbCalendar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="With Week Numbers">
+        <Arguments>
+            <Arg For="_ => _!.ShowWeekNumbers" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbCalendar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Multiple Months">
+        <Arguments>
+            <Arg For="_ => _!.VisibleMonths" Value="2" />
+            <Arg For="_ => _!.Orientation" Value="ContentOrientation.Horizontal" />
+        </Arguments>
+        <Template>
+            <IgbCalendar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Card.stories.razor b/stories/Components/Stories/Card.stories.razor
new file mode 100644
index 0000000..47860d6
--- /dev/null
+++ b/stories/Components/Stories/Card.stories.razor
@@ -0,0 +1,40 @@
+@attribute [Stories("Data Display/Card")]
+
+<Stories TComponent="IgbCard">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Elevated" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCard @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Elevated">
+        <Arguments>
+            <Arg For="_ => _!.Elevated" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCard @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbCardHeader>
+            <h3 slot="title">Card Title</h3>
+            <h5 slot="subtitle">Card Subtitle</h5>
+        </IgbCardHeader>
+        <IgbCardContent>
+            <p>This is some card content. You can put any information here.</p>
+        </IgbCardContent>
+        <IgbCardActions>
+            <IgbButton Variant="ButtonVariant.Flat">Action</IgbButton>
+        </IgbCardActions>
+    </text>;
+}
diff --git a/stories/Components/Stories/Carousel.stories.razor b/stories/Components/Stories/Carousel.stories.razor
new file mode 100644
index 0000000..4e31b9f
--- /dev/null
+++ b/stories/Components/Stories/Carousel.stories.razor
@@ -0,0 +1,68 @@
+@attribute [Stories("Layout/Carousel")]
+
+<Stories TComponent="IgbCarousel">
+
+    <ArgType For="_ => _!.AnimationType" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.IndicatorsOrientation" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.DisableLoop" Value="false" />
+            <Arg For="_ => _!.HideNavigation" Value="false" />
+            <Arg For="_ => _!.HideIndicators" Value="false" />
+            <Arg For="_ => _!.Vertical" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="width: 400px; height: 250px;">
+                <IgbCarousel @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Vertical">
+        <Arguments>
+            <Arg For="_ => _!.Vertical" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="width: 400px; height: 250px;">
+                <IgbCarousel @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="No Navigation">
+        <Arguments>
+            <Arg For="_ => _!.HideNavigation" Value="true" />
+            <Arg For="_ => _!.Interval" Value="3000" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="width: 400px; height: 250px;">
+                <IgbCarousel @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbCarouselSlide>
+            <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e3f2fd;">
+                <h3>Slide 1</h3>
+            </div>
+        </IgbCarouselSlide>
+        <IgbCarouselSlide>
+            <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f3e5f5;">
+                <h3>Slide 2</h3>
+            </div>
+        </IgbCarouselSlide>
+        <IgbCarouselSlide>
+            <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e8f5e9;">
+                <h3>Slide 3</h3>
+            </div>
+        </IgbCarouselSlide>
+    </text>;
+}
diff --git a/stories/Components/Stories/Checkbox.stories.razor b/stories/Components/Stories/Checkbox.stories.razor
new file mode 100644
index 0000000..61c7444
--- /dev/null
+++ b/stories/Components/Stories/Checkbox.stories.razor
@@ -0,0 +1,65 @@
+@attribute [Stories("Forms/Checkbox")]
+
+<Stories TComponent="IgbCheckbox">
+
+    <ArgType For="_ => _!.LabelPosition" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Checked" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.Indeterminate" Value="false" />
+            <Arg For="_ => _!.LabelPosition" Value="ToggleLabelPosition.After" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCheckbox @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Checked">
+        <Arguments>
+            <Arg For="_ => _!.Checked" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCheckbox @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Indeterminate">
+        <Arguments>
+            <Arg For="_ => _!.Indeterminate" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCheckbox @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.Checked" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCheckbox @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Label Before">
+        <Arguments>
+            <Arg For="_ => _!.LabelPosition" Value="ToggleLabelPosition.Before" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbCheckbox @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Accept terms</text>;
+}
diff --git a/stories/Components/Stories/Chip.stories.razor b/stories/Components/Stories/Chip.stories.razor
new file mode 100644
index 0000000..7b1c39b
--- /dev/null
+++ b/stories/Components/Stories/Chip.stories.razor
@@ -0,0 +1,44 @@
+@attribute [Stories("Actions/Chip")]
+
+<Stories TComponent="IgbChip">
+
+    <ArgType For="_ => _!.Variant" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="StyleVariant.Primary" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.Selectable" Value="false" />
+            <Arg For="_ => _!.Removable" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbChip @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Selectable">
+        <Arguments>
+            <Arg For="_ => _!.Selectable" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbChip @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Removable">
+        <Arguments>
+            <Arg For="_ => _!.Removable" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbChip @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Chip</text>;
+}
diff --git a/stories/Components/Stories/CircularProgress.stories.razor b/stories/Components/Stories/CircularProgress.stories.razor
new file mode 100644
index 0000000..97bd5ee
--- /dev/null
+++ b/stories/Components/Stories/CircularProgress.stories.razor
@@ -0,0 +1,29 @@
+@attribute [Stories("Feedback/CircularProgress")]
+
+<Stories TComponent="IgbCircularProgress">
+
+    <ArgType For="_ => _!.Variant" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="65" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.Variant" Value="StyleVariant.Primary" />
+            <Arg For="_ => _!.Indeterminate" Value="false" />
+            <Arg For="_ => _!.HideLabel" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbCircularProgress @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Indeterminate">
+        <Arguments>
+            <Arg For="_ => _!.Indeterminate" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbCircularProgress @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/DatePicker.stories.razor b/stories/Components/Stories/DatePicker.stories.razor
new file mode 100644
index 0000000..886b336
--- /dev/null
+++ b/stories/Components/Stories/DatePicker.stories.razor
@@ -0,0 +1,40 @@
+@attribute [Stories("Forms/DatePicker")]
+
+<Stories TComponent="IgbDatePicker">
+
+    <ArgType For="_ => _!.Mode" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.HeaderOrientation" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Date"' />
+            <Arg For="_ => _!.Mode" Value="PickerMode.Dropdown" />
+            <Arg For="_ => _!.Outlined" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbDatePicker @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Dialog Mode">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Select Date"' />
+            <Arg For="_ => _!.Mode" Value="PickerMode.Dialog" />
+        </Arguments>
+        <Template>
+            <IgbDatePicker @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Date"' />
+            <Arg For="_ => _!.Outlined" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbDatePicker @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/DateRangePicker.stories.razor b/stories/Components/Stories/DateRangePicker.stories.razor
new file mode 100644
index 0000000..78af732
--- /dev/null
+++ b/stories/Components/Stories/DateRangePicker.stories.razor
@@ -0,0 +1,39 @@
+@attribute [Stories("Forms/DateRangePicker")]
+
+<Stories TComponent="IgbDateRangePicker">
+
+    <ArgType For="_ => _!.Mode" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Date Range"' />
+            <Arg For="_ => _!.Mode" Value="PickerMode.Dropdown" />
+            <Arg For="_ => _!.Outlined" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbDateRangePicker @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Two Inputs">
+        <Arguments>
+            <Arg For="_ => _!.LabelStart" Value='"Start Date"' />
+            <Arg For="_ => _!.LabelEnd" Value='"End Date"' />
+            <Arg For="_ => _!.UseTwoInputs" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbDateRangePicker @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Dialog Mode">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Date Range"' />
+            <Arg For="_ => _!.Mode" Value="PickerMode.Dialog" />
+        </Arguments>
+        <Template>
+            <IgbDateRangePicker @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/DateTimeInput.stories.razor b/stories/Components/Stories/DateTimeInput.stories.razor
new file mode 100644
index 0000000..48c389b
--- /dev/null
+++ b/stories/Components/Stories/DateTimeInput.stories.razor
@@ -0,0 +1,15 @@
+@attribute [Stories("Forms/DateTimeInput")]
+
+<Stories TComponent="IgbDateTimeInput">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Date/Time"' />
+            <Arg For="_ => _!.SpinLoop" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbDateTimeInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Dialog.stories.razor b/stories/Components/Stories/Dialog.stories.razor
new file mode 100644
index 0000000..1fb7bc0
--- /dev/null
+++ b/stories/Components/Stories/Dialog.stories.razor
@@ -0,0 +1,44 @@
+@attribute [Stories("Feedback/Dialog")]
+
+<Stories TComponent="IgbDialog">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.Title" Value='"Confirmation"' />
+            <Arg For="_ => _!.CloseOnOutsideClick" Value="false" />
+            <Arg For="_ => _!.KeepOpenOnEscape" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbDialog @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Without Default Action">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.Title" Value='"Custom Dialog"' />
+            <Arg For="_ => _!.HideDefaultAction" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_customContent" />
+        </Arguments>
+        <Template>
+            <IgbDialog @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <p>Are you sure you want to proceed?</p>
+    </text>;
+
+    private RenderFragment _customContent = @<text>
+        <p>This dialog has custom actions.</p>
+        <div slot="footer">
+            <IgbButton Variant="ButtonVariant.Flat">Cancel</IgbButton>
+            <IgbButton>Confirm</IgbButton>
+        </div>
+    </text>;
+}
diff --git a/stories/Components/Stories/Divider.stories.razor b/stories/Components/Stories/Divider.stories.razor
new file mode 100644
index 0000000..eb005ef
--- /dev/null
+++ b/stories/Components/Stories/Divider.stories.razor
@@ -0,0 +1,48 @@
+@attribute [Stories("Data Display/Divider")]
+
+<Stories TComponent="IgbDivider">
+
+    <ArgType For="_ => _!.LineType" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Vertical" Value="false" />
+            <Arg For="_ => _!.Middle" Value="false" />
+            <Arg For="_ => _!.LineType" Value="DividerType.Solid" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px;">
+                <p>Content above</p>
+                <IgbDivider @attributes="context.Args" />
+                <p>Content below</p>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Dashed">
+        <Arguments>
+            <Arg For="_ => _!.LineType" Value="DividerType.Dashed" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px;">
+                <p>Content above</p>
+                <IgbDivider @attributes="context.Args" />
+                <p>Content below</p>
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Vertical">
+        <Arguments>
+            <Arg For="_ => _!.Vertical" Value="true" />
+        </Arguments>
+        <Template>
+            <div style="display: flex; align-items: center; height: 100px;">
+                <span>Left</span>
+                <IgbDivider @attributes="context.Args" />
+                <span>Right</span>
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Dropdown.stories.razor b/stories/Components/Stories/Dropdown.stories.razor
new file mode 100644
index 0000000..1b132c4
--- /dev/null
+++ b/stories/Components/Stories/Dropdown.stories.razor
@@ -0,0 +1,28 @@
+@attribute [Stories("Navigation/Dropdown")]
+
+<Stories TComponent="IgbDropdown">
+
+    <ArgType For="_ => _!.Placement" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="padding: 60px;">
+                <IgbButton id="dropdown-target">Open Dropdown</IgbButton>
+                <IgbDropdown @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbDropdownItem>Option 1</IgbDropdownItem>
+        <IgbDropdownItem>Option 2</IgbDropdownItem>
+        <IgbDropdownItem>Option 3</IgbDropdownItem>
+        <IgbDropdownItem Disabled="true">Disabled Option</IgbDropdownItem>
+    </text>;
+}
diff --git a/stories/Components/Stories/ExpansionPanel.stories.razor b/stories/Components/Stories/ExpansionPanel.stories.razor
new file mode 100644
index 0000000..119b1f8
--- /dev/null
+++ b/stories/Components/Stories/ExpansionPanel.stories.razor
@@ -0,0 +1,46 @@
+@attribute [Stories("Layout/ExpansionPanel")]
+
+<Stories TComponent="IgbExpansionPanel">
+
+    <ArgType For="_ => _!.IndicatorPosition" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.IndicatorPosition" Value="ExpansionPanelIndicatorPosition.Start" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbExpansionPanel @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Open">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbExpansionPanel @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbExpansionPanel @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <span slot="title">Expansion Panel Title</span>
+        <p>This is the content of the expansion panel. It can contain any markup.</p>
+    </text>;
+}
diff --git a/stories/Components/Stories/Icon.stories.razor b/stories/Components/Stories/Icon.stories.razor
new file mode 100644
index 0000000..f7c5f8a
--- /dev/null
+++ b/stories/Components/Stories/Icon.stories.razor
@@ -0,0 +1,27 @@
+@attribute [Stories("Data Display/Icon")]
+
+<Stories TComponent="IgbIcon">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.IconName" Value='"home"' />
+            <Arg For="_ => _!.Collection" Value='"default"' />
+            <Arg For="_ => _!.Mirrored" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbIcon @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Mirrored">
+        <Arguments>
+            <Arg For="_ => _!.IconName" Value='"home"' />
+            <Arg For="_ => _!.Collection" Value='"default"' />
+            <Arg For="_ => _!.Mirrored" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbIcon @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/IconButton.stories.razor b/stories/Components/Stories/IconButton.stories.razor
new file mode 100644
index 0000000..42eb18e
--- /dev/null
+++ b/stories/Components/Stories/IconButton.stories.razor
@@ -0,0 +1,41 @@
+@attribute [Stories("Actions/IconButton")]
+
+<Stories TComponent="IgbIconButton">
+
+    <ArgType For="_ => _!.Variant" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="IconButtonVariant.Contained" />
+            <Arg For="_ => _!.IconName" Value='"home"' />
+            <Arg For="_ => _!.Collection" Value='"default"' />
+            <Arg For="_ => _!.Disabled" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbIconButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="IconButtonVariant.Outlined" />
+            <Arg For="_ => _!.IconName" Value='"home"' />
+            <Arg For="_ => _!.Collection" Value='"default"' />
+        </Arguments>
+        <Template>
+            <IgbIconButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Flat">
+        <Arguments>
+            <Arg For="_ => _!.Variant" Value="IconButtonVariant.Flat" />
+            <Arg For="_ => _!.IconName" Value='"home"' />
+            <Arg For="_ => _!.Collection" Value='"default"' />
+        </Arguments>
+        <Template>
+            <IgbIconButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Input.stories.razor b/stories/Components/Stories/Input.stories.razor
new file mode 100644
index 0000000..bed28d2
--- /dev/null
+++ b/stories/Components/Stories/Input.stories.razor
@@ -0,0 +1,54 @@
+@attribute [Stories("Forms/Input")]
+
+<Stories TComponent="IgbInput">
+
+    <ArgType For="_ => _!.DisplayType" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Username"' />
+            <Arg For="_ => _!.Placeholder" Value='"Enter username"' />
+            <Arg For="_ => _!.Outlined" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.Required" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Email"' />
+            <Arg For="_ => _!.Placeholder" Value='"Enter email"' />
+            <Arg For="_ => _!.Outlined" Value="true" />
+            <Arg For="_ => _!.DisplayType" Value="InputType.Email" />
+        </Arguments>
+        <Template>
+            <IgbInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Password">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Password"' />
+            <Arg For="_ => _!.DisplayType" Value="InputType.Password" />
+            <Arg For="_ => _!.Required" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Disabled"' />
+            <Arg For="_ => _!.Value" Value='"Disabled input"' />
+            <Arg For="_ => _!.Disabled" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/LinearProgress.stories.razor b/stories/Components/Stories/LinearProgress.stories.razor
new file mode 100644
index 0000000..6e87f78
--- /dev/null
+++ b/stories/Components/Stories/LinearProgress.stories.razor
@@ -0,0 +1,47 @@
+@attribute [Stories("Feedback/LinearProgress")]
+
+<Stories TComponent="IgbLinearProgress">
+
+    <ArgType For="_ => _!.Variant" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.LabelAlign" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="65" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.Variant" Value="StyleVariant.Primary" />
+            <Arg For="_ => _!.Indeterminate" Value="false" />
+            <Arg For="_ => _!.Striped" Value="false" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px;">
+                <IgbLinearProgress @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Striped">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="50" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.Striped" Value="true" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px;">
+                <IgbLinearProgress @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Indeterminate">
+        <Arguments>
+            <Arg For="_ => _!.Indeterminate" Value="true" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px;">
+                <IgbLinearProgress @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/List.stories.razor b/stories/Components/Stories/List.stories.razor
new file mode 100644
index 0000000..f729731
--- /dev/null
+++ b/stories/Components/Stories/List.stories.razor
@@ -0,0 +1,31 @@
+@attribute [Stories("Data Display/List")]
+
+<Stories TComponent="IgbList">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbList @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbListHeader>
+            <span>Contacts</span>
+        </IgbListHeader>
+        <IgbListItem>
+            <span>Item 1</span>
+        </IgbListItem>
+        <IgbListItem>
+            <span>Item 2</span>
+        </IgbListItem>
+        <IgbListItem>
+            <span>Item 3</span>
+        </IgbListItem>
+    </text>;
+}
diff --git a/stories/Components/Stories/MaskInput.stories.razor b/stories/Components/Stories/MaskInput.stories.razor
new file mode 100644
index 0000000..237b4ab
--- /dev/null
+++ b/stories/Components/Stories/MaskInput.stories.razor
@@ -0,0 +1,28 @@
+@attribute [Stories("Forms/MaskInput")]
+
+<Stories TComponent="IgbMaskInput">
+
+    <ArgType For="_ => _!.ValueMode" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Mask" Value='"(000) 000-0000"' />
+            <Arg For="_ => _!.Label" Value='"Phone Number"' />
+            <Arg For="_ => _!.Placeholder" Value='"(___) ___-____"' />
+        </Arguments>
+        <Template>
+            <IgbMaskInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Social Security">
+        <Arguments>
+            <Arg For="_ => _!.Mask" Value='"000-00-0000"' />
+            <Arg For="_ => _!.Label" Value='"SSN"' />
+        </Arguments>
+        <Template>
+            <IgbMaskInput @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/NavDrawer.stories.razor b/stories/Components/Stories/NavDrawer.stories.razor
new file mode 100644
index 0000000..013bbb8
--- /dev/null
+++ b/stories/Components/Stories/NavDrawer.stories.razor
@@ -0,0 +1,35 @@
+@attribute [Stories("Navigation/NavDrawer")]
+
+<Stories TComponent="IgbNavDrawer">
+
+    <ArgType For="_ => _!.Position" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.Position" Value="NavDrawerPosition.Start" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="position: relative; height: 400px; overflow: hidden;">
+                <IgbNavDrawer @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbNavDrawerHeaderItem>Navigation</IgbNavDrawerHeaderItem>
+        <IgbNavDrawerItem>
+            <span slot="content">Home</span>
+        </IgbNavDrawerItem>
+        <IgbNavDrawerItem>
+            <span slot="content">About</span>
+        </IgbNavDrawerItem>
+        <IgbNavDrawerItem>
+            <span slot="content">Settings</span>
+        </IgbNavDrawerItem>
+    </text>;
+}
diff --git a/stories/Components/Stories/Navbar.stories.razor b/stories/Components/Stories/Navbar.stories.razor
new file mode 100644
index 0000000..55c7241
--- /dev/null
+++ b/stories/Components/Stories/Navbar.stories.razor
@@ -0,0 +1,20 @@
+@attribute [Stories("Navigation/Navbar")]
+
+<Stories TComponent="IgbNavbar">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbNavbar @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <h5>Application Title</h5>
+    </text>;
+}
diff --git a/stories/Components/Stories/Radio.stories.razor b/stories/Components/Stories/Radio.stories.razor
new file mode 100644
index 0000000..8afcf24
--- /dev/null
+++ b/stories/Components/Stories/Radio.stories.razor
@@ -0,0 +1,35 @@
+@attribute [Stories("Forms/Radio")]
+
+<Stories TComponent="IgbRadioGroup">
+
+    <ArgType For="_ => _!.Alignment" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Alignment" Value="ContentOrientation.Vertical" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbRadioGroup @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Horizontal">
+        <Arguments>
+            <Arg For="_ => _!.Alignment" Value="ContentOrientation.Horizontal" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbRadioGroup @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbRadio Value="option1">Option 1</IgbRadio>
+        <IgbRadio Value="option2">Option 2</IgbRadio>
+        <IgbRadio Value="option3">Option 3</IgbRadio>
+    </text>;
+}
diff --git a/stories/Components/Stories/RangeSlider.stories.razor b/stories/Components/Stories/RangeSlider.stories.razor
new file mode 100644
index 0000000..89bf4c0
--- /dev/null
+++ b/stories/Components/Stories/RangeSlider.stories.razor
@@ -0,0 +1,37 @@
+@attribute [Stories("Forms/RangeSlider")]
+
+<Stories TComponent="IgbRangeSlider">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Lower" Value="20" />
+            <Arg For="_ => _!.Upper" Value="80" />
+            <Arg For="_ => _!.Min" Value="0" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.Step" Value="1" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px; padding: 20px;">
+                <IgbRangeSlider @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="With Ticks">
+        <Arguments>
+            <Arg For="_ => _!.Lower" Value="20" />
+            <Arg For="_ => _!.Upper" Value="80" />
+            <Arg For="_ => _!.Min" Value="0" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.DiscreteTrack" Value="true" />
+            <Arg For="_ => _!.PrimaryTicks" Value="5" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px; padding: 20px;">
+                <IgbRangeSlider @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Rating.stories.razor b/stories/Components/Stories/Rating.stories.razor
new file mode 100644
index 0000000..1fe86c1
--- /dev/null
+++ b/stories/Components/Stories/Rating.stories.razor
@@ -0,0 +1,54 @@
+@attribute [Stories("Forms/Rating")]
+
+<Stories TComponent="IgbRating">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="3" />
+            <Arg For="_ => _!.Max" Value="5" />
+            <Arg For="_ => _!.Step" Value="1" />
+            <Arg For="_ => _!.ReadOnly" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.HoverPreview" Value="true" />
+            <Arg For="_ => _!.AllowReset" Value="true" />
+            <Arg For="_ => _!.Label" Value='"Rate this"' />
+        </Arguments>
+        <Template>
+            <IgbRating @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Read Only">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="4" />
+            <Arg For="_ => _!.Max" Value="5" />
+            <Arg For="_ => _!.ReadOnly" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbRating @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Single Selection">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="3" />
+            <Arg For="_ => _!.Max" Value="5" />
+            <Arg For="_ => _!.Single" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbRating @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="2" />
+            <Arg For="_ => _!.Max" Value="5" />
+            <Arg For="_ => _!.Disabled" Value="true" />
+        </Arguments>
+        <Template>
+            <IgbRating @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Ripple.stories.razor b/stories/Components/Stories/Ripple.stories.razor
new file mode 100644
index 0000000..b62c535
--- /dev/null
+++ b/stories/Components/Stories/Ripple.stories.razor
@@ -0,0 +1,14 @@
+@attribute [Stories("Actions/Ripple")]
+
+<Stories TComponent="IgbRipple">
+
+    <Story Name="Default">
+        <Template>
+            <div style="position: relative; width: 200px; height: 100px; background: #eee; display: flex; align-items: center; justify-content: center;">
+                Click here
+                <IgbRipple @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Select.stories.razor b/stories/Components/Stories/Select.stories.razor
new file mode 100644
index 0000000..59a37a8
--- /dev/null
+++ b/stories/Components/Stories/Select.stories.razor
@@ -0,0 +1,52 @@
+@attribute [Stories("Forms/Select")]
+
+<Stories TComponent="IgbSelect">
+
+    <ArgType For="_ => _!.Placement" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Country"' />
+            <Arg For="_ => _!.Placeholder" Value='"Select a country"' />
+            <Arg For="_ => _!.Outlined" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbSelect @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Country"' />
+            <Arg For="_ => _!.Outlined" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbSelect @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.Label" Value='"Disabled"' />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbSelect @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbSelectItem Value="us">United States</IgbSelectItem>
+        <IgbSelectItem Value="uk">United Kingdom</IgbSelectItem>
+        <IgbSelectItem Value="de">Germany</IgbSelectItem>
+        <IgbSelectItem Value="fr">France</IgbSelectItem>
+        <IgbSelectItem Value="jp">Japan</IgbSelectItem>
+    </text>;
+}
diff --git a/stories/Components/Stories/Slider.stories.razor b/stories/Components/Stories/Slider.stories.razor
new file mode 100644
index 0000000..e05f7d8
--- /dev/null
+++ b/stories/Components/Stories/Slider.stories.razor
@@ -0,0 +1,51 @@
+@attribute [Stories("Forms/Slider")]
+
+<Stories TComponent="IgbSlider">
+
+    <ArgType For="_ => _!.TickOrientation" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="50" />
+            <Arg For="_ => _!.Min" Value="0" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.Step" Value="1" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px; padding: 20px;">
+                <IgbSlider @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="With Ticks">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="50" />
+            <Arg For="_ => _!.Min" Value="0" />
+            <Arg For="_ => _!.Max" Value="100" />
+            <Arg For="_ => _!.Step" Value="10" />
+            <Arg For="_ => _!.DiscreteTrack" Value="true" />
+            <Arg For="_ => _!.PrimaryTicks" Value="5" />
+            <Arg For="_ => _!.SecondaryTicks" Value="2" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px; padding: 20px;">
+                <IgbSlider @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Value" Value="30" />
+            <Arg For="_ => _!.Disabled" Value="true" />
+        </Arguments>
+        <Template>
+            <div style="width: 300px; padding: 20px;">
+                <IgbSlider @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/Snackbar.stories.razor b/stories/Components/Stories/Snackbar.stories.razor
new file mode 100644
index 0000000..7904a51
--- /dev/null
+++ b/stories/Components/Stories/Snackbar.stories.razor
@@ -0,0 +1,25 @@
+@attribute [Stories("Feedback/Snackbar")]
+
+<Stories TComponent="IgbSnackbar">
+
+    <ArgType For="_ => _!.Position" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.KeepOpen" Value="true" />
+            <Arg For="_ => _!.ActionText" Value='"UNDO"' />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="position: relative; height: 200px;">
+                <IgbSnackbar @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Item deleted successfully</text>;
+}
diff --git a/stories/Components/Stories/Stepper.stories.razor b/stories/Components/Stories/Stepper.stories.razor
new file mode 100644
index 0000000..b554c3b
--- /dev/null
+++ b/stories/Components/Stories/Stepper.stories.razor
@@ -0,0 +1,58 @@
+@attribute [Stories("Layout/Stepper")]
+
+<Stories TComponent="IgbStepper">
+
+    <ArgType For="_ => _!.Orientation" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.StepType" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.TitlePosition" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Orientation" Value="StepperOrientation.Horizontal" />
+            <Arg For="_ => _!.StepType" Value="StepperStepType.Full" />
+            <Arg For="_ => _!.Linear" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbStepper @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Vertical">
+        <Arguments>
+            <Arg For="_ => _!.Orientation" Value="StepperOrientation.Vertical" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbStepper @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Linear">
+        <Arguments>
+            <Arg For="_ => _!.Linear" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbStepper @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbStep>
+            <span slot="title">Step 1</span>
+            <p>Personal Information</p>
+        </IgbStep>
+        <IgbStep>
+            <span slot="title">Step 2</span>
+            <p>Address Details</p>
+        </IgbStep>
+        <IgbStep>
+            <span slot="title">Step 3</span>
+            <p>Confirmation</p>
+        </IgbStep>
+    </text>;
+}
diff --git a/stories/Components/Stories/Switch.stories.razor b/stories/Components/Stories/Switch.stories.razor
new file mode 100644
index 0000000..3e1bdf3
--- /dev/null
+++ b/stories/Components/Stories/Switch.stories.razor
@@ -0,0 +1,44 @@
+@attribute [Stories("Forms/Switch")]
+
+<Stories TComponent="IgbSwitch">
+
+    <ArgType For="_ => _!.LabelPosition" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Checked" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.LabelPosition" Value="ToggleLabelPosition.After" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbSwitch @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Checked">
+        <Arguments>
+            <Arg For="_ => _!.Checked" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_enabledContent" />
+        </Arguments>
+        <Template>
+            <IgbSwitch @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbSwitch @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Dark Mode</text>;
+    private RenderFragment _enabledContent = @<text>Enabled</text>;
+}
diff --git a/stories/Components/Stories/Tabs.stories.razor b/stories/Components/Stories/Tabs.stories.razor
new file mode 100644
index 0000000..0489c72
--- /dev/null
+++ b/stories/Components/Stories/Tabs.stories.razor
@@ -0,0 +1,37 @@
+@attribute [Stories("Layout/Tabs")]
+
+<Stories TComponent="IgbTabs">
+
+    <ArgType For="_ => _!.Alignment" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.Activation" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Alignment" Value="TabsAlignment.Start" />
+            <Arg For="_ => _!.Activation" Value="TabsActivation.Auto" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbTabs @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Justified">
+        <Arguments>
+            <Arg For="_ => _!.Alignment" Value="TabsAlignment.Justify" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbTabs @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbTab Panel="panel1">Tab 1</IgbTab>
+        <IgbTab Panel="panel2">Tab 2</IgbTab>
+        <IgbTab Panel="panel3">Tab 3</IgbTab>
+    </text>;
+}
diff --git a/stories/Components/Stories/Textarea.stories.razor b/stories/Components/Stories/Textarea.stories.razor
new file mode 100644
index 0000000..dc4231b
--- /dev/null
+++ b/stories/Components/Stories/Textarea.stories.razor
@@ -0,0 +1,42 @@
+@attribute [Stories("Forms/Textarea")]
+
+<Stories TComponent="IgbTextarea">
+
+    <ArgType For="_ => _!.Resize" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Description"' />
+            <Arg For="_ => _!.Placeholder" Value='"Enter description..."' />
+            <Arg For="_ => _!.Rows" Value="4" />
+            <Arg For="_ => _!.Outlined" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+        </Arguments>
+        <Template>
+            <IgbTextarea @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Outlined">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Notes"' />
+            <Arg For="_ => _!.Outlined" Value="true" />
+            <Arg For="_ => _!.Rows" Value="4" />
+        </Arguments>
+        <Template>
+            <IgbTextarea @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Non-Resizable">
+        <Arguments>
+            <Arg For="_ => _!.Label" Value='"Fixed Size"' />
+            <Arg For="_ => _!.Resize" Value="TextareaResize.None" />
+            <Arg For="_ => _!.Rows" Value="4" />
+        </Arguments>
+        <Template>
+            <IgbTextarea @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
diff --git a/stories/Components/Stories/TileManager.stories.razor b/stories/Components/Stories/TileManager.stories.razor
new file mode 100644
index 0000000..db5eea8
--- /dev/null
+++ b/stories/Components/Stories/TileManager.stories.razor
@@ -0,0 +1,74 @@
+@attribute [Stories("Layout/TileManager")]
+
+<Stories TComponent="IgbTileManager">
+
+    <ArgType For="_ => _!.ResizeMode" Control="ControlType.Radio" />
+    <ArgType For="_ => _!.DragMode" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.ColumnCount" Value="3" />
+            <Arg For="_ => _!.MinColumnWidth" Value='"200px"' />
+            <Arg For="_ => _!.MinRowHeight" Value='"150px"' />
+            <Arg For="_ => _!.Gap" Value='"8px"' />
+            <Arg For="_ => _!.ResizeMode" Value="TileManagerResizeMode.None" />
+            <Arg For="_ => _!.DragMode" Value="TileManagerDragMode.None" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="width: 100%; height: 500px;">
+                <IgbTileManager @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Draggable">
+        <Arguments>
+            <Arg For="_ => _!.DragMode" Value="TileManagerDragMode.Tile" />
+            <Arg For="_ => _!.ColumnCount" Value="3" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="width: 100%; height: 500px;">
+                <IgbTileManager @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+    <Story Name="Resizable">
+        <Arguments>
+            <Arg For="_ => _!.ResizeMode" Value="TileManagerResizeMode.Hover" />
+            <Arg For="_ => _!.ColumnCount" Value="3" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="width: 100%; height: 500px;">
+                <IgbTileManager @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbTile>
+            <div style="padding: 16px;"><h4>Tile 1</h4><p>Content</p></div>
+        </IgbTile>
+        <IgbTile>
+            <div style="padding: 16px;"><h4>Tile 2</h4><p>Content</p></div>
+        </IgbTile>
+        <IgbTile>
+            <div style="padding: 16px;"><h4>Tile 3</h4><p>Content</p></div>
+        </IgbTile>
+        <IgbTile>
+            <div style="padding: 16px;"><h4>Tile 4</h4><p>Content</p></div>
+        </IgbTile>
+        <IgbTile>
+            <div style="padding: 16px;"><h4>Tile 5</h4><p>Content</p></div>
+        </IgbTile>
+        <IgbTile>
+            <div style="padding: 16px;"><h4>Tile 6</h4><p>Content</p></div>
+        </IgbTile>
+    </text>;
+}
diff --git a/stories/Components/Stories/Toast.stories.razor b/stories/Components/Stories/Toast.stories.razor
new file mode 100644
index 0000000..6b77134
--- /dev/null
+++ b/stories/Components/Stories/Toast.stories.razor
@@ -0,0 +1,24 @@
+@attribute [Stories("Feedback/Toast")]
+
+<Stories TComponent="IgbToast">
+
+    <ArgType For="_ => _!.Position" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.KeepOpen" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="position: relative; height: 200px;">
+                <IgbToast @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Operation completed</text>;
+}
diff --git a/stories/Components/Stories/ToggleButton.stories.razor b/stories/Components/Stories/ToggleButton.stories.razor
new file mode 100644
index 0000000..992b726
--- /dev/null
+++ b/stories/Components/Stories/ToggleButton.stories.razor
@@ -0,0 +1,40 @@
+@attribute [Stories("Actions/ToggleButton")]
+
+<Stories TComponent="IgbToggleButton">
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Selected" Value="false" />
+            <Arg For="_ => _!.Disabled" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbToggleButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Selected">
+        <Arguments>
+            <Arg For="_ => _!.Selected" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbToggleButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="Disabled">
+        <Arguments>
+            <Arg For="_ => _!.Disabled" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbToggleButton @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>Toggle</text>;
+}
diff --git a/stories/Components/Stories/Tooltip.stories.razor b/stories/Components/Stories/Tooltip.stories.razor
new file mode 100644
index 0000000..b6e3477
--- /dev/null
+++ b/stories/Components/Stories/Tooltip.stories.razor
@@ -0,0 +1,26 @@
+@attribute [Stories("Feedback/Tooltip")]
+
+<Stories TComponent="IgbTooltip">
+
+    <ArgType For="_ => _!.Placement" Control="ControlType.Select" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Open" Value="true" />
+            <Arg For="_ => _!.Placement" Value="PopoverPlacement.Top" />
+            <Arg For="_ => _!.WithArrow" Value="true" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <div style="padding: 60px; display: flex; justify-content: center;">
+                <IgbButton id="tooltip-target">Hover me</IgbButton>
+                <IgbTooltip Anchor="tooltip-target" @attributes="context.Args" />
+            </div>
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>This is a tooltip</text>;
+}
diff --git a/stories/Components/Stories/Tree.stories.razor b/stories/Components/Stories/Tree.stories.razor
new file mode 100644
index 0000000..6db2a68
--- /dev/null
+++ b/stories/Components/Stories/Tree.stories.razor
@@ -0,0 +1,42 @@
+@attribute [Stories("Data Display/Tree")]
+
+<Stories TComponent="IgbTree">
+
+    <ArgType For="_ => _!.Selection" Control="ControlType.Radio" />
+
+    <Story Name="Default">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="TreeSelection.None" />
+            <Arg For="_ => _!.SingleBranchExpand" Value="false" />
+            <Arg For="_ => _!.ToggleNodeOnClick" Value="false" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbTree @attributes="context.Args" />
+        </Template>
+    </Story>
+
+    <Story Name="With Selection">
+        <Arguments>
+            <Arg For="_ => _!.Selection" Value="TreeSelection.Multiple" />
+            <Arg For="_ => _!.ChildContent" Value="_content" />
+        </Arguments>
+        <Template>
+            <IgbTree @attributes="context.Args" />
+        </Template>
+    </Story>
+
+</Stories>
+
+@code {
+    private RenderFragment _content = @<text>
+        <IgbTreeItem Label="Node 1">
+            <IgbTreeItem Label="Child 1.1" />
+            <IgbTreeItem Label="Child 1.2" />
+        </IgbTreeItem>
+        <IgbTreeItem Label="Node 2">
+            <IgbTreeItem Label="Child 2.1" />
+        </IgbTreeItem>
+        <IgbTreeItem Label="Node 3" />
+    </text>;
+}
diff --git a/stories/Components/Stories/Welcome.md b/stories/Components/Stories/Welcome.md
new file mode 100644
index 0000000..a446683
--- /dev/null
+++ b/stories/Components/Stories/Welcome.md
@@ -0,0 +1,35 @@
+---
+$attribute: CustomPage("Welcome")
+---
+
+# Ignite UI for Blazor
+
+Welcome to the **Ignite UI for Blazor** component library stories.
+
+Browse the sidebar to explore each component with interactive demos and documentation.
+
+## Getting Started
+
+Install the NuGet package:
+
+```bash
+dotnet add package IgniteUI.Blazor.Lite
+```
+
+Register the services in your `Program.cs`:
+
+```csharp
+builder.Services.AddIgniteUIBlazor();
+```
+
+Add the required stylesheet and script to your `App.razor`:
+
+```html
+<link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" />
+<script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
+```
+
+## Resources
+
+- [Documentation](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started)
+- [GitHub Repository](https://github.com/IgniteUI/igniteui-blazor)
\ No newline at end of file
diff --git a/stories/Components/_Imports.razor b/stories/Components/_Imports.razor
new file mode 100644
index 0000000..0121474
--- /dev/null
+++ b/stories/Components/_Imports.razor
@@ -0,0 +1,15 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using BlazingStory.Components
+@using BlazingStory.Configurations
+@using BlazingStory.Types
+@using static BlazingStory.Types.RenderMode
+@using IgniteUI.Blazor.Controls
+@using IgniteUI.Blazor.Stories.Components
+@using IgniteUI.Blazor.Stories.Components.Pages
diff --git a/stories/IgniteUI.Blazor.Stories.csproj b/stories/IgniteUI.Blazor.Stories.csproj
new file mode 100644
index 0000000..36eed1e
--- /dev/null
+++ b/stories/IgniteUI.Blazor.Stories.csproj
@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <GenerateDocumentationFile>True</GenerateDocumentationFile>
+    <MD2RazorDefaultBaseClass>global::BlazingStory.Internals.Pages.MarkdownPageBase</MD2RazorDefaultBaseClass>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BlazingStory" Version="1.0.0-preview.78" />
+    <PackageReference Include="MD2RazorGenerator" Version="1.2.4">
+      <PrivateAssets>all</PrivateAssets>
+      <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
+    </PackageReference>
+  </ItemGroup>
+
+  <ItemGroup>
+	  <ProjectReference Include="..\IgniteUI.Blazor.Lite.csproj">
+		  <PrivateAssets>none</PrivateAssets>
+	  </ProjectReference>
+  </ItemGroup>
+
+</Project>
\ No newline at end of file
diff --git a/stories/IgniteUI.Blazor.Stories.csproj.user b/stories/IgniteUI.Blazor.Stories.csproj.user
new file mode 100644
index 0000000..9ff5820
--- /dev/null
+++ b/stories/IgniteUI.Blazor.Stories.csproj.user
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <ActiveDebugProfile>https</ActiveDebugProfile>
+  </PropertyGroup>
+</Project>
\ No newline at end of file
diff --git a/stories/Program.cs b/stories/Program.cs
new file mode 100644
index 0000000..d09ba89
--- /dev/null
+++ b/stories/Program.cs
@@ -0,0 +1,33 @@
+using BlazingStory.Components;
+using Microsoft.Extensions.DependencyInjection.Extensions;
+using IgniteUI.Blazor.Stories.Components.Pages;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+
+builder.Services.AddIgniteUIBlazor();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseStatusCodePagesWithReExecute("/not-found", createScopeForStatusCodePages: true);
+app.UseHttpsRedirection();
+
+app.MapStaticAssets();
+app.UseRouting();
+app.UseAntiforgery();
+
+app.MapRazorComponents<BlazingStoryServerComponent<IndexPage, IFramePage>>()
+    .AddInteractiveServerRenderMode();
+
+app.Run();
diff --git a/stories/Properties/launchSettings.json b/stories/Properties/launchSettings.json
new file mode 100644
index 0000000..d11ddb9
--- /dev/null
+++ b/stories/Properties/launchSettings.json
@@ -0,0 +1,22 @@
+{
+  "profiles": {
+    "http": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "http://localhost:5162",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "applicationUrl": "https://localhost:7231;http://localhost:5162",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/stories/appsettings.Development.json b/stories/appsettings.Development.json
new file mode 100644
index 0000000..0c208ae
--- /dev/null
+++ b/stories/appsettings.Development.json
@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}
diff --git a/stories/appsettings.json b/stories/appsettings.json
new file mode 100644
index 0000000..10f68b8
--- /dev/null
+++ b/stories/appsettings.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "AllowedHosts": "*"
+}

From 723e8ff276a3957909fb56ef6e8287ac41584e76 Mon Sep 17 00:00:00 2001
From: Konstantin Dinev <kdinev@infragistics.com>
Date: Wed, 13 May 2026 15:16:56 +0300
Subject: [PATCH 02/10] chore(*): updating node to 22

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bd9b515..a986c4f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: npm
 
       - name: Install npm dependencies

From fe18125e1490568f1844f580c220fd2c173fcfca Mon Sep 17 00:00:00 2001
From: Konstantin Dinev <kdinev@infragistics.com>
Date: Wed, 13 May 2026 16:29:43 +0300
Subject: [PATCH 03/10] chore(*): leaving copythemes as a manual step

---
 IgniteUI.Blazor.Lite.csproj | 6 +-----
 package-lock.json           | 7 +------
 package.json                | 8 ++------
 3 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/IgniteUI.Blazor.Lite.csproj b/IgniteUI.Blazor.Lite.csproj
index d4145e1..4af1803 100644
--- a/IgniteUI.Blazor.Lite.csproj
+++ b/IgniteUI.Blazor.Lite.csproj
@@ -90,11 +90,7 @@
   </ItemGroup>
   
   <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
-    <Exec Command="npm run build&#xD;&#xA;" />
-  </Target>
-  
-  <Target Name="PostBuild" AfterTargets="PostBuildEvent">
-    <Exec Command="xcopy /y /s /r /i &quot;./node_modules/igniteui-webcomponents/themes&quot; &quot;./wwwroot/themes&quot;" />
+    <Exec Command="npm run build" />
   </Target>
 
 </Project>
diff --git a/package-lock.json b/package-lock.json
index 9a3fbf9..789e8be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "@floating-ui/dom": "^1.7.6",
-        "@lit-labs/virtualizer": "^2.1.1",
-        "@lit/context": "^1.1.6",
-        "igniteui-webcomponents": "~7.1.3",
-        "lit": "^3.3.2",
-        "lit-html": "^3.3.2"
+        "igniteui-webcomponents": "~7.1.3"
       },
       "devDependencies": {
         "copy-webpack-plugin": "^14.0.0",
diff --git a/package.json b/package.json
index 35a099f..29a3372 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "cross-env NODE_ENV=production node node_modules/webpack/bin/webpack.js --mode production --config ./webpack.config.js  --color --bail",
     "build:dev": "cross-env NODE_ENV=development node node_modules/webpack/bin/webpack.js --mode development --config ./webpack.config.js  --color --bail",
+    "copythemes": "cp -r node_modules/igniteui-webcomponents/themes ./wwwroot",
     "ingest": "gulp"
   },
   "author": "",
@@ -39,11 +40,6 @@
     "yargs": "^17.2.1"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.7.6",
-    "@lit-labs/virtualizer": "^2.1.1",
-    "@lit/context": "^1.1.6",
-    "igniteui-webcomponents": "~7.1.3",
-    "lit": "^3.3.2",
-    "lit-html": "^3.3.2"
+    "igniteui-webcomponents": "~7.1.3"
   }
 }

From be4bd23970e62aa598e7802bad62316cdfecc3cc Mon Sep 17 00:00:00 2001
From: Konstantin Dinev <kdinev@infragistics.com>
Date: Wed, 13 May 2026 16:36:45 +0300
Subject: [PATCH 04/10] build(*): returning copythemes

---
 IgniteUI.Blazor.Lite.csproj |  2 +-
 package-lock.json           | 17 +++++++++++++++++
 package.json                |  3 ++-
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/IgniteUI.Blazor.Lite.csproj b/IgniteUI.Blazor.Lite.csproj
index 4af1803..cf0712c 100644
--- a/IgniteUI.Blazor.Lite.csproj
+++ b/IgniteUI.Blazor.Lite.csproj
@@ -90,7 +90,7 @@
   </ItemGroup>
   
   <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
-    <Exec Command="npm run build" />
+    <Exec Command="npm run build &amp;&amp; npm run copythemes" />
   </Target>
 
 </Project>
diff --git a/package-lock.json b/package-lock.json
index 789e8be..f3a9bcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "gulp-flatten": "^0.4.0",
         "html-loader": "^0.5.5",
         "html-webpack-plugin": "^5.5.0",
+        "ncp": "^2.0.0",
         "rimraf": "^2.6.1",
         "source-map-loader": "^0.2.1",
         "style-loader": "^0.22.1",
@@ -5231,6 +5232,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ncp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
+      "integrity": "sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "ncp": "bin/ncp"
+      }
+    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -11976,6 +11987,12 @@
       "version": "1.4.0",
       "dev": true
     },
+    "ncp": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ncp/-/ncp-2.0.0.tgz",
+      "integrity": "sha512-zIdGUrPRFTUELUvr3Gmc7KZ2Sw/h1PiVM0Af/oHB6zgnV1ikqSfRk+TOufi79aHYCW3NiOXmr1BP5nWbzojLaA==",
+      "dev": true
+    },
     "negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
diff --git a/package.json b/package.json
index 29a3372..147f629 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "cross-env NODE_ENV=production node node_modules/webpack/bin/webpack.js --mode production --config ./webpack.config.js  --color --bail",
     "build:dev": "cross-env NODE_ENV=development node node_modules/webpack/bin/webpack.js --mode development --config ./webpack.config.js  --color --bail",
-    "copythemes": "cp -r node_modules/igniteui-webcomponents/themes ./wwwroot",
+    "copythemes": "ncp node_modules/igniteui-webcomponents/themes ./wwwroot/themes",
     "ingest": "gulp"
   },
   "author": "",
@@ -25,6 +25,7 @@
     "gulp-flatten": "^0.4.0",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^5.5.0",
+    "ncp": "^2.0.0",
     "rimraf": "^2.6.1",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.22.1",

From a28976bf6b8ea0f975392e210a3b3b34bc369d3e Mon Sep 17 00:00:00 2001
From: Konstantin Dinev <kdinev@infragistics.com>
Date: Thu, 14 May 2026 13:50:40 +0300
Subject: [PATCH 05/10] feat|(stories): updating all composite component
 stories

---
 stories/Components/Shared/IconRegistrar.razor | 39 ++++++++
 .../Stories/Accordion.stories.razor           | 49 +++++-----
 .../Stories/ButtonGroup.stories.razor         | 29 +++---
 stories/Components/Stories/Card.stories.razor | 43 +++++----
 .../Components/Stories/Carousel.stories.razor | 77 ++++++++++------
 .../Components/Stories/Dialog.stories.razor   | 17 ++--
 .../Components/Stories/Dropdown.stories.razor | 19 ++--
 stories/Components/Stories/Icon.stories.razor |  2 +
 .../Stories/IconButton.stories.razor          |  3 +
 stories/Components/Stories/List.stories.razor | 35 +++-----
 .../Stories/NavDrawer.stories.razor           | 29 +++---
 .../Components/Stories/Radio.stories.razor    | 22 +++--
 .../Components/Stories/Select.stories.razor   | 37 ++++----
 .../Components/Stories/Stepper.stories.razor  | 65 +++++++++-----
 stories/Components/Stories/Tabs.stories.razor | 22 +++--
 .../Stories/TileManager.stories.razor         | 89 +++++++++++++------
 stories/Components/Stories/Tree.stories.razor | 37 ++++----
 stories/Components/_Imports.razor             |  1 +
 18 files changed, 365 insertions(+), 250 deletions(-)
 create mode 100644 stories/Components/Shared/IconRegistrar.razor

diff --git a/stories/Components/Shared/IconRegistrar.razor b/stories/Components/Shared/IconRegistrar.razor
new file mode 100644
index 0000000..8fb6a3a
--- /dev/null
+++ b/stories/Components/Shared/IconRegistrar.razor
@@ -0,0 +1,39 @@
+@* Renders a hidden IgbIcon and registers common Material Design icons on first render. *@
+@* Include this component in story templates that use IgbIcon or IgbIconButton. *@
+<IgbIcon @ref="_icon" style="display: none;" />
+
+@code {
+    private IgbIcon? _icon;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && _icon is not null)
+        {
+            await _icon.EnsureReady();
+            await _icon.RegisterIconFromTextAsync("home", HomeSvg, "default");
+            await _icon.RegisterIconFromTextAsync("search", SearchSvg, "default");
+            await _icon.RegisterIconFromTextAsync("favorite", FavoriteSvg, "default");
+            await _icon.RegisterIconFromTextAsync("settings", SettingsSvg, "default");
+            await _icon.RegisterIconFromTextAsync("delete", DeleteSvg, "default");
+            await _icon.RegisterIconFromTextAsync("menu", MenuSvg, "default");
+        }
+    }
+
+    private const string HomeSvg =
+        """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>""";
+
+    private const string SearchSvg =
+        """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>""";
+
+    private const string FavoriteSvg =
+        """<svg xmlns="http://www.w3.org/2000/svg" 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>""";
+
+    private const string SettingsSvg =
+        """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>""";
+
+    private const string DeleteSvg =
+        """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>""";
+
+    private const string MenuSvg =
+        """<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>""";
+}
diff --git a/stories/Components/Stories/Accordion.stories.razor b/stories/Components/Stories/Accordion.stories.razor
index 0623a14..6fe1f91 100644
--- a/stories/Components/Stories/Accordion.stories.razor
+++ b/stories/Components/Stories/Accordion.stories.razor
@@ -5,38 +5,45 @@
     <Story Name="Default">
         <Arguments>
             <Arg For="_ => _!.SingleExpand" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbAccordion @attributes="context.Args" />
+            <IgbAccordion @attributes="context.Args">
+                <IgbExpansionPanel>
+                    <span slot="title">Panel 1</span>
+                    <p>Content for panel 1. This is some descriptive text.</p>
+                </IgbExpansionPanel>
+                <IgbExpansionPanel>
+                    <span slot="title">Panel 2</span>
+                    <p>Content for panel 2. More information here.</p>
+                </IgbExpansionPanel>
+                <IgbExpansionPanel>
+                    <span slot="title">Panel 3</span>
+                    <p>Content for panel 3. Additional details.</p>
+                </IgbExpansionPanel>
+            </IgbAccordion>
         </Template>
     </Story>
 
     <Story Name="Single Expand">
         <Arguments>
             <Arg For="_ => _!.SingleExpand" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbAccordion @attributes="context.Args" />
+            <IgbAccordion @attributes="context.Args">
+                <IgbExpansionPanel>
+                    <span slot="title">Panel 1</span>
+                    <p>Content for panel 1. This is some descriptive text.</p>
+                </IgbExpansionPanel>
+                <IgbExpansionPanel>
+                    <span slot="title">Panel 2</span>
+                    <p>Content for panel 2. More information here.</p>
+                </IgbExpansionPanel>
+                <IgbExpansionPanel>
+                    <span slot="title">Panel 3</span>
+                    <p>Content for panel 3. Additional details.</p>
+                </IgbExpansionPanel>
+            </IgbAccordion>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbExpansionPanel>
-            <span slot="title">Panel 1</span>
-            <p>Content for panel 1. This is some descriptive text.</p>
-        </IgbExpansionPanel>
-        <IgbExpansionPanel>
-            <span slot="title">Panel 2</span>
-            <p>Content for panel 2. More information here.</p>
-        </IgbExpansionPanel>
-        <IgbExpansionPanel>
-            <span slot="title">Panel 3</span>
-            <p>Content for panel 3. Additional details.</p>
-        </IgbExpansionPanel>
-    </text>;
-}
diff --git a/stories/Components/Stories/ButtonGroup.stories.razor b/stories/Components/Stories/ButtonGroup.stories.razor
index 7410c3e..1b64214 100644
--- a/stories/Components/Stories/ButtonGroup.stories.razor
+++ b/stories/Components/Stories/ButtonGroup.stories.razor
@@ -9,39 +9,40 @@
         <Arguments>
             <Arg For="_ => _!.Selection" Value="ButtonGroupSelection.Single" />
             <Arg For="_ => _!.Disabled" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbButtonGroup @attributes="context.Args" />
+            <IgbButtonGroup @attributes="context.Args">
+                <IgbToggleButton>Bold</IgbToggleButton>
+                <IgbToggleButton>Italic</IgbToggleButton>
+                <IgbToggleButton>Underline</IgbToggleButton>
+            </IgbButtonGroup>
         </Template>
     </Story>
 
     <Story Name="Multiple Selection">
         <Arguments>
             <Arg For="_ => _!.Selection" Value="ButtonGroupSelection.Multiple" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbButtonGroup @attributes="context.Args" />
+            <IgbButtonGroup @attributes="context.Args">
+                <IgbToggleButton>Bold</IgbToggleButton>
+                <IgbToggleButton>Italic</IgbToggleButton>
+                <IgbToggleButton>Underline</IgbToggleButton>
+            </IgbButtonGroup>
         </Template>
     </Story>
 
     <Story Name="Disabled">
         <Arguments>
             <Arg For="_ => _!.Disabled" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbButtonGroup @attributes="context.Args" />
+            <IgbButtonGroup @attributes="context.Args">
+                <IgbToggleButton>Bold</IgbToggleButton>
+                <IgbToggleButton>Italic</IgbToggleButton>
+                <IgbToggleButton>Underline</IgbToggleButton>
+            </IgbButtonGroup>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbToggleButton>Bold</IgbToggleButton>
-        <IgbToggleButton>Italic</IgbToggleButton>
-        <IgbToggleButton>Underline</IgbToggleButton>
-    </text>;
-}
diff --git a/stories/Components/Stories/Card.stories.razor b/stories/Components/Stories/Card.stories.razor
index 47860d6..6da5afc 100644
--- a/stories/Components/Stories/Card.stories.razor
+++ b/stories/Components/Stories/Card.stories.razor
@@ -5,36 +5,41 @@
     <Story Name="Default">
         <Arguments>
             <Arg For="_ => _!.Elevated" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbCard @attributes="context.Args" />
+            <IgbCard @attributes="context.Args">
+                <IgbCardHeader>
+                    <h3 slot="title">Card Title</h3>
+                    <h5 slot="subtitle">Card Subtitle</h5>
+                </IgbCardHeader>
+                <IgbCardContent>
+                    <p>This is some card content. You can put any information here.</p>
+                </IgbCardContent>
+                <IgbCardActions>
+                    <IgbButton Variant="ButtonVariant.Flat">Action</IgbButton>
+                </IgbCardActions>
+            </IgbCard>
         </Template>
     </Story>
 
     <Story Name="Elevated">
         <Arguments>
             <Arg For="_ => _!.Elevated" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbCard @attributes="context.Args" />
+            <IgbCard @attributes="context.Args">
+                <IgbCardHeader>
+                    <h3 slot="title">Card Title</h3>
+                    <h5 slot="subtitle">Card Subtitle</h5>
+                </IgbCardHeader>
+                <IgbCardContent>
+                    <p>This is some card content. You can put any information here.</p>
+                </IgbCardContent>
+                <IgbCardActions>
+                    <IgbButton Variant="ButtonVariant.Flat">Action</IgbButton>
+                </IgbCardActions>
+            </IgbCard>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbCardHeader>
-            <h3 slot="title">Card Title</h3>
-            <h5 slot="subtitle">Card Subtitle</h5>
-        </IgbCardHeader>
-        <IgbCardContent>
-            <p>This is some card content. You can put any information here.</p>
-        </IgbCardContent>
-        <IgbCardActions>
-            <IgbButton Variant="ButtonVariant.Flat">Action</IgbButton>
-        </IgbCardActions>
-    </text>;
-}
diff --git a/stories/Components/Stories/Carousel.stories.razor b/stories/Components/Stories/Carousel.stories.razor
index 4e31b9f..76f6eef 100644
--- a/stories/Components/Stories/Carousel.stories.razor
+++ b/stories/Components/Stories/Carousel.stories.razor
@@ -11,11 +11,26 @@
             <Arg For="_ => _!.HideNavigation" Value="false" />
             <Arg For="_ => _!.HideIndicators" Value="false" />
             <Arg For="_ => _!.Vertical" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="width: 400px; height: 250px;">
-                <IgbCarousel @attributes="context.Args" />
+                <IgbCarousel @attributes="context.Args">
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e3f2fd;">
+                            <h3>Slide 1</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f3e5f5;">
+                            <h3>Slide 2</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e8f5e9;">
+                            <h3>Slide 3</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                </IgbCarousel>
             </div>
         </Template>
     </Story>
@@ -23,11 +38,26 @@
     <Story Name="Vertical">
         <Arguments>
             <Arg For="_ => _!.Vertical" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="width: 400px; height: 250px;">
-                <IgbCarousel @attributes="context.Args" />
+                <IgbCarousel @attributes="context.Args">
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e3f2fd;">
+                            <h3>Slide 1</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f3e5f5;">
+                            <h3>Slide 2</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e8f5e9;">
+                            <h3>Slide 3</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                </IgbCarousel>
             </div>
         </Template>
     </Story>
@@ -36,33 +66,28 @@
         <Arguments>
             <Arg For="_ => _!.HideNavigation" Value="true" />
             <Arg For="_ => _!.Interval" Value="3000" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="width: 400px; height: 250px;">
-                <IgbCarousel @attributes="context.Args" />
+                <IgbCarousel @attributes="context.Args">
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e3f2fd;">
+                            <h3>Slide 1</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f3e5f5;">
+                            <h3>Slide 2</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                    <IgbCarouselSlide>
+                        <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e8f5e9;">
+                            <h3>Slide 3</h3>
+                        </div>
+                    </IgbCarouselSlide>
+                </IgbCarousel>
             </div>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbCarouselSlide>
-            <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e3f2fd;">
-                <h3>Slide 1</h3>
-            </div>
-        </IgbCarouselSlide>
-        <IgbCarouselSlide>
-            <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #f3e5f5;">
-                <h3>Slide 2</h3>
-            </div>
-        </IgbCarouselSlide>
-        <IgbCarouselSlide>
-            <div style="display: flex; align-items: center; justify-content: center; height: 100%; background: #e8f5e9;">
-                <h3>Slide 3</h3>
-            </div>
-        </IgbCarouselSlide>
-    </text>;
-}
diff --git a/stories/Components/Stories/Dialog.stories.razor b/stories/Components/Stories/Dialog.stories.razor
index 1fb7bc0..b54f1a9 100644
--- a/stories/Components/Stories/Dialog.stories.razor
+++ b/stories/Components/Stories/Dialog.stories.razor
@@ -20,10 +20,15 @@
             <Arg For="_ => _!.Open" Value="true" />
             <Arg For="_ => _!.Title" Value='"Custom Dialog"' />
             <Arg For="_ => _!.HideDefaultAction" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_customContent" />
         </Arguments>
         <Template>
-            <IgbDialog @attributes="context.Args" />
+            <IgbDialog @attributes="context.Args">
+                <p>This dialog has custom actions.</p>
+                <div slot="footer">
+                    <IgbButton Variant="ButtonVariant.Flat">Cancel</IgbButton>
+                    <IgbButton>Confirm</IgbButton>
+                </div>
+            </IgbDialog>
         </Template>
     </Story>
 
@@ -33,12 +38,4 @@
     private RenderFragment _content = @<text>
         <p>Are you sure you want to proceed?</p>
     </text>;
-
-    private RenderFragment _customContent = @<text>
-        <p>This dialog has custom actions.</p>
-        <div slot="footer">
-            <IgbButton Variant="ButtonVariant.Flat">Cancel</IgbButton>
-            <IgbButton>Confirm</IgbButton>
-        </div>
-    </text>;
 }
diff --git a/stories/Components/Stories/Dropdown.stories.razor b/stories/Components/Stories/Dropdown.stories.razor
index 1b132c4..bf39150 100644
--- a/stories/Components/Stories/Dropdown.stories.razor
+++ b/stories/Components/Stories/Dropdown.stories.razor
@@ -5,24 +5,17 @@
     <ArgType For="_ => _!.Placement" Control="ControlType.Select" />
 
     <Story Name="Default">
-        <Arguments>
-            <Arg For="_ => _!.ChildContent" Value="_content" />
-        </Arguments>
         <Template>
             <div style="padding: 60px;">
                 <IgbButton id="dropdown-target">Open Dropdown</IgbButton>
-                <IgbDropdown @attributes="context.Args" />
+                <IgbDropdown @attributes="context.Args">
+                    <IgbDropdownItem>Option 1</IgbDropdownItem>
+                    <IgbDropdownItem>Option 2</IgbDropdownItem>
+                    <IgbDropdownItem>Option 3</IgbDropdownItem>
+                    <IgbDropdownItem Disabled="true">Disabled Option</IgbDropdownItem>
+                </IgbDropdown>
             </div>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbDropdownItem>Option 1</IgbDropdownItem>
-        <IgbDropdownItem>Option 2</IgbDropdownItem>
-        <IgbDropdownItem>Option 3</IgbDropdownItem>
-        <IgbDropdownItem Disabled="true">Disabled Option</IgbDropdownItem>
-    </text>;
-}
diff --git a/stories/Components/Stories/Icon.stories.razor b/stories/Components/Stories/Icon.stories.razor
index f7c5f8a..b34295b 100644
--- a/stories/Components/Stories/Icon.stories.razor
+++ b/stories/Components/Stories/Icon.stories.razor
@@ -9,6 +9,7 @@
             <Arg For="_ => _!.Mirrored" Value="false" />
         </Arguments>
         <Template>
+            <IconRegistrar />
             <IgbIcon @attributes="context.Args" />
         </Template>
     </Story>
@@ -20,6 +21,7 @@
             <Arg For="_ => _!.Mirrored" Value="true" />
         </Arguments>
         <Template>
+            <IconRegistrar />
             <IgbIcon @attributes="context.Args" />
         </Template>
     </Story>
diff --git a/stories/Components/Stories/IconButton.stories.razor b/stories/Components/Stories/IconButton.stories.razor
index 42eb18e..825821b 100644
--- a/stories/Components/Stories/IconButton.stories.razor
+++ b/stories/Components/Stories/IconButton.stories.razor
@@ -12,6 +12,7 @@
             <Arg For="_ => _!.Disabled" Value="false" />
         </Arguments>
         <Template>
+            <IconRegistrar />
             <IgbIconButton @attributes="context.Args" />
         </Template>
     </Story>
@@ -23,6 +24,7 @@
             <Arg For="_ => _!.Collection" Value='"default"' />
         </Arguments>
         <Template>
+            <IconRegistrar />
             <IgbIconButton @attributes="context.Args" />
         </Template>
     </Story>
@@ -34,6 +36,7 @@
             <Arg For="_ => _!.Collection" Value='"default"' />
         </Arguments>
         <Template>
+            <IconRegistrar />
             <IgbIconButton @attributes="context.Args" />
         </Template>
     </Story>
diff --git a/stories/Components/Stories/List.stories.razor b/stories/Components/Stories/List.stories.razor
index f729731..6cb1970 100644
--- a/stories/Components/Stories/List.stories.razor
+++ b/stories/Components/Stories/List.stories.razor
@@ -3,29 +3,22 @@
 <Stories TComponent="IgbList">
 
     <Story Name="Default">
-        <Arguments>
-            <Arg For="_ => _!.ChildContent" Value="_content" />
-        </Arguments>
         <Template>
-            <IgbList @attributes="context.Args" />
+            <IgbList @attributes="context.Args">
+                <IgbListHeader>
+                    <span>Contacts</span>
+                </IgbListHeader>
+                <IgbListItem>
+                    <span>Item 1</span>
+                </IgbListItem>
+                <IgbListItem>
+                    <span>Item 2</span>
+                </IgbListItem>
+                <IgbListItem>
+                    <span>Item 3</span>
+                </IgbListItem>
+            </IgbList>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbListHeader>
-            <span>Contacts</span>
-        </IgbListHeader>
-        <IgbListItem>
-            <span>Item 1</span>
-        </IgbListItem>
-        <IgbListItem>
-            <span>Item 2</span>
-        </IgbListItem>
-        <IgbListItem>
-            <span>Item 3</span>
-        </IgbListItem>
-    </text>;
-}
diff --git a/stories/Components/Stories/NavDrawer.stories.razor b/stories/Components/Stories/NavDrawer.stories.razor
index 013bbb8..4ad5ecb 100644
--- a/stories/Components/Stories/NavDrawer.stories.razor
+++ b/stories/Components/Stories/NavDrawer.stories.razor
@@ -8,28 +8,23 @@
         <Arguments>
             <Arg For="_ => _!.Open" Value="true" />
             <Arg For="_ => _!.Position" Value="NavDrawerPosition.Start" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="position: relative; height: 400px; overflow: hidden;">
-                <IgbNavDrawer @attributes="context.Args" />
+                <IgbNavDrawer @attributes="context.Args">
+                    <IgbNavDrawerHeaderItem>Navigation</IgbNavDrawerHeaderItem>
+                    <IgbNavDrawerItem>
+                        <span slot="content">Home</span>
+                    </IgbNavDrawerItem>
+                    <IgbNavDrawerItem>
+                        <span slot="content">About</span>
+                    </IgbNavDrawerItem>
+                    <IgbNavDrawerItem>
+                        <span slot="content">Settings</span>
+                    </IgbNavDrawerItem>
+                </IgbNavDrawer>
             </div>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbNavDrawerHeaderItem>Navigation</IgbNavDrawerHeaderItem>
-        <IgbNavDrawerItem>
-            <span slot="content">Home</span>
-        </IgbNavDrawerItem>
-        <IgbNavDrawerItem>
-            <span slot="content">About</span>
-        </IgbNavDrawerItem>
-        <IgbNavDrawerItem>
-            <span slot="content">Settings</span>
-        </IgbNavDrawerItem>
-    </text>;
-}
diff --git a/stories/Components/Stories/Radio.stories.razor b/stories/Components/Stories/Radio.stories.razor
index 8afcf24..ce184b2 100644
--- a/stories/Components/Stories/Radio.stories.razor
+++ b/stories/Components/Stories/Radio.stories.razor
@@ -7,29 +7,27 @@
     <Story Name="Default">
         <Arguments>
             <Arg For="_ => _!.Alignment" Value="ContentOrientation.Vertical" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbRadioGroup @attributes="context.Args" />
+            <IgbRadioGroup @attributes="context.Args">
+                <IgbRadio Value="option1">Option 1</IgbRadio>
+                <IgbRadio Value="option2">Option 2</IgbRadio>
+                <IgbRadio Value="option3">Option 3</IgbRadio>
+            </IgbRadioGroup>
         </Template>
     </Story>
 
     <Story Name="Horizontal">
         <Arguments>
             <Arg For="_ => _!.Alignment" Value="ContentOrientation.Horizontal" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbRadioGroup @attributes="context.Args" />
+            <IgbRadioGroup @attributes="context.Args">
+                <IgbRadio Value="option1">Option 1</IgbRadio>
+                <IgbRadio Value="option2">Option 2</IgbRadio>
+                <IgbRadio Value="option3">Option 3</IgbRadio>
+            </IgbRadioGroup>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbRadio Value="option1">Option 1</IgbRadio>
-        <IgbRadio Value="option2">Option 2</IgbRadio>
-        <IgbRadio Value="option3">Option 3</IgbRadio>
-    </text>;
-}
diff --git a/stories/Components/Stories/Select.stories.razor b/stories/Components/Stories/Select.stories.razor
index 59a37a8..6e558ad 100644
--- a/stories/Components/Stories/Select.stories.razor
+++ b/stories/Components/Stories/Select.stories.razor
@@ -10,10 +10,15 @@
             <Arg For="_ => _!.Placeholder" Value='"Select a country"' />
             <Arg For="_ => _!.Outlined" Value="false" />
             <Arg For="_ => _!.Disabled" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbSelect @attributes="context.Args" />
+            <IgbSelect @attributes="context.Args">
+                <IgbSelectItem Value="us">United States</IgbSelectItem>
+                <IgbSelectItem Value="uk">United Kingdom</IgbSelectItem>
+                <IgbSelectItem Value="de">Germany</IgbSelectItem>
+                <IgbSelectItem Value="fr">France</IgbSelectItem>
+                <IgbSelectItem Value="jp">Japan</IgbSelectItem>
+            </IgbSelect>
         </Template>
     </Story>
 
@@ -21,10 +26,15 @@
         <Arguments>
             <Arg For="_ => _!.Label" Value='"Country"' />
             <Arg For="_ => _!.Outlined" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbSelect @attributes="context.Args" />
+            <IgbSelect @attributes="context.Args">
+                <IgbSelectItem Value="us">United States</IgbSelectItem>
+                <IgbSelectItem Value="uk">United Kingdom</IgbSelectItem>
+                <IgbSelectItem Value="de">Germany</IgbSelectItem>
+                <IgbSelectItem Value="fr">France</IgbSelectItem>
+                <IgbSelectItem Value="jp">Japan</IgbSelectItem>
+            </IgbSelect>
         </Template>
     </Story>
 
@@ -32,21 +42,16 @@
         <Arguments>
             <Arg For="_ => _!.Disabled" Value="true" />
             <Arg For="_ => _!.Label" Value='"Disabled"' />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbSelect @attributes="context.Args" />
+            <IgbSelect @attributes="context.Args">
+                <IgbSelectItem Value="us">United States</IgbSelectItem>
+                <IgbSelectItem Value="uk">United Kingdom</IgbSelectItem>
+                <IgbSelectItem Value="de">Germany</IgbSelectItem>
+                <IgbSelectItem Value="fr">France</IgbSelectItem>
+                <IgbSelectItem Value="jp">Japan</IgbSelectItem>
+            </IgbSelect>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbSelectItem Value="us">United States</IgbSelectItem>
-        <IgbSelectItem Value="uk">United Kingdom</IgbSelectItem>
-        <IgbSelectItem Value="de">Germany</IgbSelectItem>
-        <IgbSelectItem Value="fr">France</IgbSelectItem>
-        <IgbSelectItem Value="jp">Japan</IgbSelectItem>
-    </text>;
-}
diff --git a/stories/Components/Stories/Stepper.stories.razor b/stories/Components/Stories/Stepper.stories.razor
index b554c3b..d96a0bf 100644
--- a/stories/Components/Stories/Stepper.stories.razor
+++ b/stories/Components/Stories/Stepper.stories.razor
@@ -11,48 +11,67 @@
             <Arg For="_ => _!.Orientation" Value="StepperOrientation.Horizontal" />
             <Arg For="_ => _!.StepType" Value="StepperStepType.Full" />
             <Arg For="_ => _!.Linear" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbStepper @attributes="context.Args" />
+            <IgbStepper @attributes="context.Args">
+                <IgbStep>
+                    <span slot="title">Step 1</span>
+                    <p>Personal Information</p>
+                </IgbStep>
+                <IgbStep>
+                    <span slot="title">Step 2</span>
+                    <p>Address Details</p>
+                </IgbStep>
+                <IgbStep>
+                    <span slot="title">Step 3</span>
+                    <p>Confirmation</p>
+                </IgbStep>
+            </IgbStepper>
         </Template>
     </Story>
 
     <Story Name="Vertical">
         <Arguments>
             <Arg For="_ => _!.Orientation" Value="StepperOrientation.Vertical" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbStepper @attributes="context.Args" />
+            <IgbStepper @attributes="context.Args">
+                <IgbStep>
+                    <span slot="title">Step 1</span>
+                    <p>Personal Information</p>
+                </IgbStep>
+                <IgbStep>
+                    <span slot="title">Step 2</span>
+                    <p>Address Details</p>
+                </IgbStep>
+                <IgbStep>
+                    <span slot="title">Step 3</span>
+                    <p>Confirmation</p>
+                </IgbStep>
+            </IgbStepper>
         </Template>
     </Story>
 
     <Story Name="Linear">
         <Arguments>
             <Arg For="_ => _!.Linear" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbStepper @attributes="context.Args" />
+            <IgbStepper @attributes="context.Args">
+                <IgbStep>
+                    <span slot="title">Step 1</span>
+                    <p>Personal Information</p>
+                </IgbStep>
+                <IgbStep>
+                    <span slot="title">Step 2</span>
+                    <p>Address Details</p>
+                </IgbStep>
+                <IgbStep>
+                    <span slot="title">Step 3</span>
+                    <p>Confirmation</p>
+                </IgbStep>
+            </IgbStepper>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbStep>
-            <span slot="title">Step 1</span>
-            <p>Personal Information</p>
-        </IgbStep>
-        <IgbStep>
-            <span slot="title">Step 2</span>
-            <p>Address Details</p>
-        </IgbStep>
-        <IgbStep>
-            <span slot="title">Step 3</span>
-            <p>Confirmation</p>
-        </IgbStep>
-    </text>;
-}
diff --git a/stories/Components/Stories/Tabs.stories.razor b/stories/Components/Stories/Tabs.stories.razor
index 0489c72..4e2f7f3 100644
--- a/stories/Components/Stories/Tabs.stories.razor
+++ b/stories/Components/Stories/Tabs.stories.razor
@@ -9,29 +9,27 @@
         <Arguments>
             <Arg For="_ => _!.Alignment" Value="TabsAlignment.Start" />
             <Arg For="_ => _!.Activation" Value="TabsActivation.Auto" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbTabs @attributes="context.Args" />
+            <IgbTabs @attributes="context.Args">
+                <IgbTab Label="Tab 1">Home panel content</IgbTab>
+                <IgbTab Label="Tab 2">Search panel content</IgbTab>
+                <IgbTab Label="Tab 3">Favorites panel content</IgbTab>
+            </IgbTabs>
         </Template>
     </Story>
 
     <Story Name="Justified">
         <Arguments>
             <Arg For="_ => _!.Alignment" Value="TabsAlignment.Justify" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbTabs @attributes="context.Args" />
+            <IgbTabs @attributes="context.Args">
+                <IgbTab Label="Tab 1">Home panel content</IgbTab>
+                <IgbTab Label="Tab 2">Search panel content</IgbTab>
+                <IgbTab Label="Tab 3">Favorites panel content</IgbTab>
+            </IgbTabs>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbTab Panel="panel1">Tab 1</IgbTab>
-        <IgbTab Panel="panel2">Tab 2</IgbTab>
-        <IgbTab Panel="panel3">Tab 3</IgbTab>
-    </text>;
-}
diff --git a/stories/Components/Stories/TileManager.stories.razor b/stories/Components/Stories/TileManager.stories.razor
index db5eea8..0708470 100644
--- a/stories/Components/Stories/TileManager.stories.razor
+++ b/stories/Components/Stories/TileManager.stories.razor
@@ -13,11 +13,29 @@
             <Arg For="_ => _!.Gap" Value='"8px"' />
             <Arg For="_ => _!.ResizeMode" Value="TileManagerResizeMode.None" />
             <Arg For="_ => _!.DragMode" Value="TileManagerDragMode.None" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="width: 100%; height: 500px;">
-                <IgbTileManager @attributes="context.Args" />
+                <IgbTileManager @attributes="context.Args">
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 1</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 2</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 3</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 4</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 5</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 6</h4><p>Content</p></div>
+                    </IgbTile>
+                </IgbTileManager>
             </div>
         </Template>
     </Story>
@@ -26,11 +44,29 @@
         <Arguments>
             <Arg For="_ => _!.DragMode" Value="TileManagerDragMode.Tile" />
             <Arg For="_ => _!.ColumnCount" Value="3" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="width: 100%; height: 500px;">
-                <IgbTileManager @attributes="context.Args" />
+                <IgbTileManager @attributes="context.Args">
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 1</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 2</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 3</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 4</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 5</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 6</h4><p>Content</p></div>
+                    </IgbTile>
+                </IgbTileManager>
             </div>
         </Template>
     </Story>
@@ -39,36 +75,31 @@
         <Arguments>
             <Arg For="_ => _!.ResizeMode" Value="TileManagerResizeMode.Hover" />
             <Arg For="_ => _!.ColumnCount" Value="3" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
             <div style="width: 100%; height: 500px;">
-                <IgbTileManager @attributes="context.Args" />
+                <IgbTileManager @attributes="context.Args">
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 1</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 2</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 3</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 4</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 5</h4><p>Content</p></div>
+                    </IgbTile>
+                    <IgbTile>
+                        <div style="padding: 16px;"><h4>Tile 6</h4><p>Content</p></div>
+                    </IgbTile>
+                </IgbTileManager>
             </div>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbTile>
-            <div style="padding: 16px;"><h4>Tile 1</h4><p>Content</p></div>
-        </IgbTile>
-        <IgbTile>
-            <div style="padding: 16px;"><h4>Tile 2</h4><p>Content</p></div>
-        </IgbTile>
-        <IgbTile>
-            <div style="padding: 16px;"><h4>Tile 3</h4><p>Content</p></div>
-        </IgbTile>
-        <IgbTile>
-            <div style="padding: 16px;"><h4>Tile 4</h4><p>Content</p></div>
-        </IgbTile>
-        <IgbTile>
-            <div style="padding: 16px;"><h4>Tile 5</h4><p>Content</p></div>
-        </IgbTile>
-        <IgbTile>
-            <div style="padding: 16px;"><h4>Tile 6</h4><p>Content</p></div>
-        </IgbTile>
-    </text>;
-}
diff --git a/stories/Components/Stories/Tree.stories.razor b/stories/Components/Stories/Tree.stories.razor
index 6db2a68..0f85f97 100644
--- a/stories/Components/Stories/Tree.stories.razor
+++ b/stories/Components/Stories/Tree.stories.razor
@@ -9,34 +9,37 @@
             <Arg For="_ => _!.Selection" Value="TreeSelection.None" />
             <Arg For="_ => _!.SingleBranchExpand" Value="false" />
             <Arg For="_ => _!.ToggleNodeOnClick" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbTree @attributes="context.Args" />
+            <IgbTree @attributes="context.Args">
+                <IgbTreeItem Label="Node 1">
+                    <IgbTreeItem Label="Child 1.1" />
+                    <IgbTreeItem Label="Child 1.2" />
+                </IgbTreeItem>
+                <IgbTreeItem Label="Node 2">
+                    <IgbTreeItem Label="Child 2.1" />
+                </IgbTreeItem>
+                <IgbTreeItem Label="Node 3" />
+            </IgbTree>
         </Template>
     </Story>
 
     <Story Name="With Selection">
         <Arguments>
             <Arg For="_ => _!.Selection" Value="TreeSelection.Multiple" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbTree @attributes="context.Args" />
+            <IgbTree @attributes="context.Args">
+                <IgbTreeItem Label="Node 1">
+                    <IgbTreeItem Label="Child 1.1" />
+                    <IgbTreeItem Label="Child 1.2" />
+                </IgbTreeItem>
+                <IgbTreeItem Label="Node 2">
+                    <IgbTreeItem Label="Child 2.1" />
+                </IgbTreeItem>
+                <IgbTreeItem Label="Node 3" />
+            </IgbTree>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>
-        <IgbTreeItem Label="Node 1">
-            <IgbTreeItem Label="Child 1.1" />
-            <IgbTreeItem Label="Child 1.2" />
-        </IgbTreeItem>
-        <IgbTreeItem Label="Node 2">
-            <IgbTreeItem Label="Child 2.1" />
-        </IgbTreeItem>
-        <IgbTreeItem Label="Node 3" />
-    </text>;
-}
diff --git a/stories/Components/_Imports.razor b/stories/Components/_Imports.razor
index 0121474..29e991f 100644
--- a/stories/Components/_Imports.razor
+++ b/stories/Components/_Imports.razor
@@ -13,3 +13,4 @@
 @using IgniteUI.Blazor.Controls
 @using IgniteUI.Blazor.Stories.Components
 @using IgniteUI.Blazor.Stories.Components.Pages
+@using IgniteUI.Blazor.Stories.Components.Shared

From f62f24862bb850b3328b4627a3699c46f653e7b7 Mon Sep 17 00:00:00 2001
From: Konstantin Dinev <kdinev@infragistics.com>
Date: Thu, 14 May 2026 15:10:33 +0300
Subject: [PATCH 06/10] fix(skills): removing wrong doc from the tabs skill

---
 .../references/layout.md                      | 24 +++++--------------
 .../references/gotchas.md                     |  9 -------
 stories/Components/Pages/IFramePage.razor     |  4 ++--
 .../Stories/ToggleButton.stories.razor        | 13 +++-------
 4 files changed, 11 insertions(+), 39 deletions(-)

diff --git a/skills/igniteui-blazor-components/references/layout.md b/skills/igniteui-blazor-components/references/layout.md
index 6cc6122..bf98a20 100644
--- a/skills/igniteui-blazor-components/references/layout.md
+++ b/skills/igniteui-blazor-components/references/layout.md
@@ -23,18 +23,7 @@ This reference gives high-level guidance on layout and navigation components, th
 > **Docs:** [Tabs](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs)
 
 ```csharp
-builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule), typeof(IgbTabModule));
-```
-
-```razor
-<IgbTabs>
-    <IgbTab Panel="home">Home</IgbTab>
-    <IgbTab Panel="search">Search</IgbTab>
-    <IgbTab Panel="favorites" Disabled="true">Favorites</IgbTab>
-    <IgbTabPanel Id="home">Home panel content</IgbTabPanel>
-    <IgbTabPanel Id="search">Search panel content</IgbTabPanel>
-    <IgbTabPanel Id="favorites">Favorites panel content</IgbTabPanel>
-</IgbTabs>
+builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule));
 ```
 
 For icon tabs, use the `label` slot inside `IgbTab`:
@@ -46,7 +35,7 @@ For icon tabs, use the `label` slot inside `IgbTab`:
 </IgbTab>
 ```
 
-Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Panel` (must match `IgbTabPanel.Id`), `Disabled`, `Selected`.
+Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Label`, `Disabled`, `Selected`.
 
 Events on `IgbTabs`: `Change` - fires when the selected tab changes.
 
@@ -311,8 +300,7 @@ Events on `IgbTree`: `NodeSelectionChanging` (cancellable), `NodeSelectionChange
 
 ## Key Rules
 
-1. **`IgbTab.Panel` must match `IgbTabPanel.Id`** - mismatched IDs cause the panel to never display.
-2. **Stepper with `Linear="true"` prevents users from skipping steps.** Do not set `Linear` if free navigation is intended.
-3. **Activate/deactivate `IgbNavDrawerItem` programmatically** by setting `item.Active` - there is no automatic selection tracking.
-4. **Register icons via `RegisterIconFromTextAsync` in `OnAfterRenderAsync(bool firstRender)`**, and always call `await component.EnsureReady()` first.
-5. **`IgbAccordion` with `SingleExpand="true"` closes other panels when one is opened.** This is the most common use case for accordions.
+1. **Stepper with `Linear="true"` prevents users from skipping steps.** Do not set `Linear` if free navigation is intended.
+2. **Activate/deactivate `IgbNavDrawerItem` programmatically** by setting `item.Active` - there is no automatic selection tracking.
+3. **Register icons via `RegisterIconFromTextAsync` in `OnAfterRenderAsync(bool firstRender)`**, and always call `await component.EnsureReady()` first.
+4. **`IgbAccordion` with `SingleExpand="true"` closes other panels when one is opened.** This is the most common use case for accordions.
diff --git a/skills/igniteui-blazor-generate-from-image-design/references/gotchas.md b/skills/igniteui-blazor-generate-from-image-design/references/gotchas.md
index e646a2b..9be4281 100644
--- a/skills/igniteui-blazor-generate-from-image-design/references/gotchas.md
+++ b/skills/igniteui-blazor-generate-from-image-design/references/gotchas.md
@@ -236,15 +236,6 @@ The component's `::part(base)` is always `position: fixed; transform: translateX
 
 To make the drawer occupy real layout space (pinned sidebar), override the parts in **global CSS**: set explicit width on the host, `position: relative; transform: none` on `::part(base)`, hide `::part(overlay)`, and strip `inert` from `::part(base)` via JS in `OnAfterRenderAsync`. See `layout.md` for the full pattern.
 
-### IgbTabs: Panel and Id pairing
-Each `IgbTab` must reference an `IgbTabPanel` via the `Panel` property matching the panel's `Id`:
-```razor
-<IgbTabs>
-    <IgbTab Panel="panel-1">Tab A</IgbTab>
-    <IgbTabPanel Id="panel-1">Content A</IgbTabPanel>
-</IgbTabs>
-```
-
 ### IgbTileManager: drag and resize modes
 Set `DragMode` and `ResizeMode` for interactive dashboards:
 ```razor
diff --git a/stories/Components/Pages/IFramePage.razor b/stories/Components/Pages/IFramePage.razor
index cd30c8f..210b2de 100644
--- a/stories/Components/Pages/IFramePage.razor
+++ b/stories/Components/Pages/IFramePage.razor
@@ -16,11 +16,11 @@
     -->
     <link rel="stylesheet" href="@Assets["css/blazor-ui.css"]" />
     <link rel="stylesheet" href="@Assets["IgniteUI.Blazor.Stories.styles.css"]" />
-    <link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/dark/bootstrap.css" />
+    <link rel="stylesheet" href="@Assets["_content/IgniteUI.Blazor/themes/dark/bootstrap.css"]" />
     <HeadOutlet @rendermode="@InteractiveServer" />
 </head>
 
-<body style="margin: 0; min-height: 100vh;">
+<body style="margin: 0; min-height: 100vh;" class="ig-typography">
     <IgniteUI.Blazor.Stories.Components.App @rendermode="@InteractiveServer" />
 
     <div id="blazor-error-ui">
diff --git a/stories/Components/Stories/ToggleButton.stories.razor b/stories/Components/Stories/ToggleButton.stories.razor
index 992b726..f23d35d 100644
--- a/stories/Components/Stories/ToggleButton.stories.razor
+++ b/stories/Components/Stories/ToggleButton.stories.razor
@@ -6,35 +6,28 @@
         <Arguments>
             <Arg For="_ => _!.Selected" Value="false" />
             <Arg For="_ => _!.Disabled" Value="false" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbToggleButton @attributes="context.Args" />
+            <IgbToggleButton @attributes="context.Args">Toggle</IgbToggleButton>
         </Template>
     </Story>
 
     <Story Name="Selected">
         <Arguments>
             <Arg For="_ => _!.Selected" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbToggleButton @attributes="context.Args" />
+            <IgbToggleButton @attributes="context.Args">Toggle</IgbToggleButton>
         </Template>
     </Story>
 
     <Story Name="Disabled">
         <Arguments>
             <Arg For="_ => _!.Disabled" Value="true" />
-            <Arg For="_ => _!.ChildContent" Value="_content" />
         </Arguments>
         <Template>
-            <IgbToggleButton @attributes="context.Args" />
+            <IgbToggleButton @attributes="context.Args">Toggle</IgbToggleButton>
         </Template>
     </Story>
 
 </Stories>
-
-@code {
-    private RenderFragment _content = @<text>Toggle</text>;
-}

From e70897ca1278fa0c700c2b5b41f2d1ce88da8f4e Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Thu, 14 May 2026 16:02:23 +0300
Subject: [PATCH 07/10] chore(stories): fix dropdown story button target

---
 stories/Components/Stories/Dropdown.stories.razor | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/Components/Stories/Dropdown.stories.razor b/stories/Components/Stories/Dropdown.stories.razor
index bf39150..85b82bd 100644
--- a/stories/Components/Stories/Dropdown.stories.razor
+++ b/stories/Components/Stories/Dropdown.stories.razor
@@ -7,8 +7,8 @@
     <Story Name="Default">
         <Template>
             <div style="padding: 60px;">
-                <IgbButton id="dropdown-target">Open Dropdown</IgbButton>
                 <IgbDropdown @attributes="context.Args">
+                    <IgbButton slot="target">Open Dropdown</IgbButton>
                     <IgbDropdownItem>Option 1</IgbDropdownItem>
                     <IgbDropdownItem>Option 2</IgbDropdownItem>
                     <IgbDropdownItem>Option 3</IgbDropdownItem>

From 082420576dc5aedd46ddbf828d7559497c68f512 Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Thu, 14 May 2026 16:04:09 +0300
Subject: [PATCH 08/10] chore: disable build script for now

---
 IgniteUI.Blazor.Lite.csproj | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/IgniteUI.Blazor.Lite.csproj b/IgniteUI.Blazor.Lite.csproj
index cf0712c..5b57643 100644
--- a/IgniteUI.Blazor.Lite.csproj
+++ b/IgniteUI.Blazor.Lite.csproj
@@ -89,8 +89,8 @@
     </None>
   </ItemGroup>
   
-  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
+  <!--<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
     <Exec Command="npm run build &amp;&amp; npm run copythemes" />
-  </Target>
+  </Target>-->
 
 </Project>

From dfe8c3fef00fe5b58766dd9ce39365dd3783cf70 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 14 May 2026 13:08:19 +0000
Subject: [PATCH 09/10] chore: fix PR review comments - remove .csproj.user,
 restore lit-html dep, add stories README section

Agent-Logs-Url: https://github.com/IgniteUI/igniteui-blazor/sessions/73fa691d-f7e6-4f77-9fe0-7ab4573d3399

Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
---
 .gitignore                                  |  1 +
 README.md                                   | 23 +++++++++++++++++++++
 package-lock.json                           |  3 ++-
 package.json                                |  3 ++-
 stories/IgniteUI.Blazor.Stories.csproj.user |  6 ------
 5 files changed, 28 insertions(+), 8 deletions(-)
 delete mode 100644 stories/IgniteUI.Blazor.Stories.csproj.user

diff --git a/.gitignore b/.gitignore
index 7a998c5..604c955 100644
--- a/.gitignore
+++ b/.gitignore
@@ -142,6 +142,7 @@ obj
 
 .vs
 .tfignore
+*.csproj.user
 gulpfile.js
 Building.md
 IgniteUI.Blazor.csproj
diff --git a/README.md b/README.md
index 039a01c..d89f7c9 100644
--- a/README.md
+++ b/README.md
@@ -166,6 +166,29 @@ Build and run the Blazor app.
 
 <!-- ![](images/general/getting-started-blazor-card.jpg) -->
 
+## Running the Stories Project Locally
+
+The `stories/` directory contains a [Blazing Story](https://github.com/jsakamoto/BlazingStory) app that demonstrates Ignite UI for Blazor components. To run it locally, the JS interop bundle and component themes must be built first.
+
+**Prerequisites:** [Node.js](https://nodejs.org/) 22 or later.
+
+```bash
+# 1. Install Node dependencies
+npm install
+
+# 2. Build the JS interop bundle
+npm run build
+
+# 3. Copy component themes to wwwroot
+npm run copythemes
+```
+
+After the above steps, open the solution in Visual Studio or run the stories project with the .NET CLI:
+
+```bash
+dotnet run --project stories/IgniteUI.Blazor.Stories.csproj
+```
+
 [Dock Manager]: https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager
 [Commercial]: https://www.infragistics.com/legal/license
 [MIT]: https://github.com/IgniteUI/igniteui-blazor/blob/master/LICENSE
diff --git a/package-lock.json b/package-lock.json
index f3a9bcd..d24bc0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "igniteui-webcomponents": "~7.1.3"
+        "igniteui-webcomponents": "~7.1.3",
+        "lit-html": "^3.3.2"
       },
       "devDependencies": {
         "copy-webpack-plugin": "^14.0.0",
diff --git a/package.json b/package.json
index 147f629..4c6b0e9 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "yargs": "^17.2.1"
   },
   "dependencies": {
-    "igniteui-webcomponents": "~7.1.3"
+    "igniteui-webcomponents": "~7.1.3",
+    "lit-html": "^3.3.2"
   }
 }
diff --git a/stories/IgniteUI.Blazor.Stories.csproj.user b/stories/IgniteUI.Blazor.Stories.csproj.user
deleted file mode 100644
index 9ff5820..0000000
--- a/stories/IgniteUI.Blazor.Stories.csproj.user
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <PropertyGroup>
-    <ActiveDebugProfile>https</ActiveDebugProfile>
-  </PropertyGroup>
-</Project>
\ No newline at end of file

From 91cf04368a9d442d177805ffd4a5cb19d0380f9f Mon Sep 17 00:00:00 2001
From: damyanpetev <damyanpetev@users.noreply.github.com>
Date: Thu, 14 May 2026 16:17:02 +0300
Subject: [PATCH 10/10] docs: update readme

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index d89f7c9..d573a73 100644
--- a/README.md
+++ b/README.md
@@ -166,9 +166,7 @@ Build and run the Blazor app.
 
 <!-- ![](images/general/getting-started-blazor-card.jpg) -->
 
-## Running the Stories Project Locally
-
-The `stories/` directory contains a [Blazing Story](https://github.com/jsakamoto/BlazingStory) app that demonstrates Ignite UI for Blazor components. To run it locally, the JS interop bundle and component themes must be built first.
+## Building and Running Locally
 
 **Prerequisites:** [Node.js](https://nodejs.org/) 22 or later.
 
@@ -183,6 +181,8 @@ npm run build
 npm run copythemes
 ```
 
+The `stories/` directory contains a [Blazing Story](https://github.com/jsakamoto/BlazingStory) app that demonstrates Ignite UI for Blazor components. To run it locally, the JS interop bundle and component themes must be built first.
+
 After the above steps, open the solution in Visual Studio or run the stories project with the .NET CLI:
 
 ```bash