diff --git a/packages/@kws3/ui/accordion/Accordion.svelte b/packages/@kws3/ui/accordion/Accordion.svelte
new file mode 100644
index 000000000..6ad1f977e
--- /dev/null
+++ b/packages/@kws3/ui/accordion/Accordion.svelte
@@ -0,0 +1,57 @@
+<!--
+  @component
+
+
+  @param {string} [style=""] - Inline CSS for the component, Default: `""`
+  @param {string} [class=""] - CSS classes for the component, Default: `""`
+
+  ### Slots
+  - `<slot name="default"  />` - Content slot
+
+-->
+<section class="accordions {klass}" {style}>
+  <!--Content slot-->
+  <slot />
+</section>
+
+<script>
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /**
+   * Inline CSS for the component
+   */
+  export let style = "";
+
+  /**
+   * CSS classes for the component
+   */
+  let klass = "";
+  export { klass as class };
+
+  const items = writable({});
+
+  setContext("kws-accordion", {
+    items,
+    add: (item) => {
+      items.update((i) => {
+        i[item.context] = item.active;
+        return i;
+      });
+    },
+    remove: (item) => {
+      items.update((i) => {
+        const _items = { ...i };
+        delete _items[item.context];
+        return _items;
+      });
+    },
+    toggle: (item) => {
+      items.update((i) => {
+        Object.keys(i).forEach((context) => (i[context] = false));
+        i[item.context] = item.active;
+        return i;
+      });
+    },
+  });
+</script>
diff --git a/packages/@kws3/ui/accordion/AccordionItem.svelte b/packages/@kws3/ui/accordion/AccordionItem.svelte
new file mode 100644
index 000000000..9ed63a8ae
--- /dev/null
+++ b/packages/@kws3/ui/accordion/AccordionItem.svelte
@@ -0,0 +1,122 @@
+<!--
+  @component
+
+
+  @param {string} [title=""] - Title for the component, Default: `""`
+  @param {string} [style=""] - Inline CSS for the component, Default: `""`
+  @param {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'} [color="primary"] - Color of the component, Default: `"primary"`
+  @param {boolean} [expanded=false] - Determines whether Accordion has one item expanded, Default: `false`
+  @param {boolean} [title_click=true] - Allows items in Accordion to be expanded or collapsed by clicking the item title, Default: `true`
+  @param {any} [context=undefined] - A unique context value, Default: `undefined`
+  @param {string} [class=""] - CSS classes for the component, Default: `""`
+
+  ### Events
+  - `change` - Fires an event on any change initiated by the user
+
+  ### Slots
+  - `<slot name="title"  />` - Title slot
+  - `<slot name="default"  />` - Content slot
+
+-->
+
+<article
+  class="accordion {active ? 'is-active' : ''} is-{color} {klass}"
+  {style}>
+  <div
+    class="accordion-header {title_click ? ' toggle' : ''}"
+    on:click={() => {
+      if (title_click) onToggle();
+    }}>
+    <div class="field is-grouped" style="align-items: center">
+      <div class="control is-expanded">
+        <!--Title slot-->
+        <slot name="title">{title}</slot>
+      </div>
+      <div class="control">
+        <Icon icon="{active ? 'minus' : 'plus'}-circle" size="small" />
+      </div>
+    </div>
+  </div>
+  <div class="accordion-body" transition:slide>
+    <div class="accordion-content">
+      <!--Content slot-->
+      <slot />
+    </div>
+  </div>
+</article>
+
+<script>
+  import { Icon } from "@kws3/ui";
+  import { slide } from "svelte/transition";
+  import {
+    onMount,
+    afterUpdate,
+    createEventDispatcher,
+    getContext,
+  } from "svelte";
+
+  const fire = createEventDispatcher();
+  const { items, add, remove, toggle } = getContext("kws-accordion");
+
+  /**
+   * Title for the component
+   */
+  export let title = "",
+    /**
+     * Inline CSS for the component
+     */
+    style = "",
+    /**
+     * Color of the component
+     * @type {''|'primary'|'warning'|'info'|'danger'|'dark'|'light'}
+     */
+    color = "primary",
+    /**
+     * Determines whether Accordion has one item expanded
+     */
+    expanded = false,
+    /**
+     * Allows items in Accordion to be expanded or collapsed by clicking the item title
+     */
+    title_click = true,
+    /**
+     * A unique context value
+     */
+    context = `__kws_accordion_item_${Math.random().toString(36)}`;
+
+  /**
+   * CSS classes for the component
+   */
+  let klass = "";
+  export { klass as class };
+
+  let unsubscribe,
+    active = false;
+
+  $: {
+    add({ context, active });
+    unsubscribe = items.subscribe((item) => {
+      active = item[context];
+    });
+  }
+
+  onMount(() => {
+    return () => {
+      remove && remove({ context });
+      unsubscribe && unsubscribe();
+    };
+  });
+
+  afterUpdate(() => {
+    if (expanded === true) onToggle();
+  });
+
+  function onToggle() {
+    toggle({ context, active: !active });
+    /**
+     * Fires an event on any change initiated by the user
+     */
+    fire("change", { context });
+    expanded = false;
+  }
+</script>
diff --git a/packages/@kws3/ui/index.js b/packages/@kws3/ui/index.js
index 557f2eeaa..34006f164 100644
--- a/packages/@kws3/ui/index.js
+++ b/packages/@kws3/ui/index.js
@@ -59,6 +59,8 @@ export { default as DataSearch } from "./datagrid/DataSearch/DataSearch.svelte";
 export { default as Pagination } from "./datagrid/Pagination/Pagination.svelte";
 export { default as DataSort } from "./datagrid/DataSort/DataSort.svelte";
 
+export { default as Accordion } from "./accordion/Accordion.svelte";
+export { default as AccordionItem } from "./accordion/AccordionItem.svelte";
 export { default as Chart } from "./charts/Chart.svelte";
 export { default as DonutChart } from "./charts/DonutChart.svelte";
 export { default as PieChart } from "./charts/PieChart.svelte";
diff --git a/packages/@kws3/ui/styles/Accordion.scss b/packages/@kws3/ui/styles/Accordion.scss
new file mode 100644
index 000000000..a4e51fd03
--- /dev/null
+++ b/packages/@kws3/ui/styles/Accordion.scss
@@ -0,0 +1,127 @@
+$accordion-background-color: $background !default;
+$accordion-radius: $radius !default;
+
+$accordion-header-background-color: $text !default;
+$accordion-header-color: $text-invert !default;
+$accordion-header-padding: 0.5em 0.75em !default;
+$accordion-header-radius: $radius !default;
+
+$accordion-content-border: 1px solid $border !default;
+$accordion-content-color: $text !default;
+$accordion-content-padding-top: 1em !default;
+$accordion-content-padding-left: 1.25em !default;
+$accordion-content-radius: $radius !default;
+
+$accordion-content-pre-background-color: $white !default;
+$accordion-content-pre-code-background-color: transparent !default;
+
+.accordions {
+  .accordion {
+    @include block;
+    display: flex;
+    flex-direction: column;
+    background-color: $accordion-background-color;
+    border-radius: $accordion-radius;
+    font-size: $size-normal;
+    strong {
+      color: currentColor;
+    }
+    a:not(.button):not(.tag) {
+      color: currentColor;
+      text-decoration: underline;
+    } // Sizes
+    &.is-small {
+      font-size: $size-small;
+    }
+    &.is-medium {
+      font-size: $size-medium;
+    }
+    &.is-large {
+      font-size: $size-large;
+    }
+    &:not(:first-child) {
+      .accordion-header {
+        border-radius: 0;
+      }
+    }
+    &:not(:last-child) {
+      margin-bottom: 0;
+      .accordion-content {
+        border-radius: 0;
+      }
+    }
+    .toggle,
+    [data-action="toggle"] {
+      cursor: pointer;
+    }
+    .accordion-header {
+      background-color: $accordion-header-background-color;
+      border-radius: $accordion-header-radius $accordion-header-radius 0 0;
+      color: $accordion-header-color;
+      line-height: 1.25;
+      padding: $accordion-header-padding;
+      position: relative;
+      & + .accordion-body {
+        overflow-y: hidden;
+        max-height: 0;
+        color: $accordion-content-color;
+        border: $accordion-content-border;
+        border-radius: $accordion-content-radius;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-top: none;
+        -webkit-transition: max-height 0.2s ease;
+        -moz-transition: max-height 0.2s ease;
+        -o-transition: max-height 0.2s ease;
+        transition: max-height 0.2s ease;
+        .accordion-content {
+          padding: $accordion-content-padding-top
+            $accordion-content-padding-left;
+          code,
+          pre {
+            background-color: $accordion-content-pre-background-color;
+          }
+          pre code {
+            background-color: $accordion-content-pre-code-background-color;
+          }
+        }
+      }
+    }
+    &.is-active {
+      .accordion-header {
+        .toggle {
+          &::before {
+            content: "\002D";
+          }
+        }
+      }
+      .accordion-body {
+        max-height: 100em;
+      }
+      // Colors
+    }
+    @each $name, $pair in $colors {
+      $color: nth($pair, 1);
+      $color-invert: nth($pair, 2);
+      $color-lightning: max((100% - lightness($color)) - 2%, 0%);
+      $color-luminance: colorLuminance($color);
+      $darken-percentage: $color-luminance * 70%;
+      $desaturate-percentage: $color-luminance * 30%;
+      &.is-#{$name} {
+        background-color: lighten($color, $color-lightning);
+        border-bottom: 1px solid lighten($color, $color-lightning);
+        .accordion-header {
+          background-color: $color;
+          color: $color-invert;
+        }
+        .accordion-content {
+          border-color: $color;
+          color: desaturate(
+            darken($color, $darken-percentage),
+            $desaturate-percentage
+          );
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/app.scss b/src/scss/app.scss
index 2afd76116..b469185f4 100644
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -172,6 +172,65 @@ pre.prismjs > code {
 //Tooltip
 @import "../../packages/@kws3/ui/styles/Tooltip.scss";
 
+//Accordion
+@import "../../packages/@kws3/ui/styles/Accordion.scss";
+// #stepsHolder{
+//   padding-top: 1.2rem;
+//   overflow: auto;
+// }
+// .steps{
+//   font-size: 0.9rem;
+//   .steps-segment{
+//     cursor: pointer;
+//     .steps-marker{
+//       transform: scale(0.9);
+//       transition: transform 0.3s $easeOutCustom;
+//     }
+//     &.is-active{
+//       .steps-marker{
+//         transform: scale(1.5);
+//         border:2px solid $primary !important;
+//         background: $white !important;
+//         color: $text !important;
+//       }
+//       & ~ .steps-segment{
+//         cursor: default;
+//         .steps-marker{
+//           transform: scale(1);
+//         }
+//       }
+//     }
+//   }
+// }
+
+// @include mobile{
+//   .steps.is-horizontal.has-content-centered{
+//     .steps-segment{
+//       &:not(:last-child):after {
+//         height: 0.2em;
+//         left: 2.5rem;
+//         right: -1.75rem;
+//         top: calc(0.75rem - (0.1em));
+//       }
+//       .steps-marker {
+//         position: absolute;
+//         left: calc(50% - 0.75rem);
+//         height: 1.5rem;
+//         width: 1.5rem;
+//         font-size: 0.75rem;
+//         transition: transform 0.3s;
+//       }
+//       .steps-content {
+//         margin-top: 2rem;
+//         margin-left: .5em;
+//         margin-right: .5em;
+//         padding-top: .2em;
+//         font-size:0.75rem;
+//         line-height:1.2;
+//       }
+//     }
+//   }
+// }
 //Grid
 @import "../../packages/@kws3/ui/styles/Grid.scss";
 
diff --git a/src/stories/helpers/Accordion/Accordion.svelte b/src/stories/helpers/Accordion/Accordion.svelte
new file mode 100644
index 000000000..2142fb2c1
--- /dev/null
+++ b/src/stories/helpers/Accordion/Accordion.svelte
@@ -0,0 +1,92 @@
+<div class="columns">
+  <div class="column">
+    {#if !title_click && !expanded}
+      <button class="button is-primary" on:click={() => (expanded = true)}>
+        Open Section 1
+      </button>
+    {/if}
+  </div>
+</div>
+
+<Accordion>
+  <AccordionItem
+    bind:expanded
+    title={"1 - " + title}
+    class={klass}
+    {color}
+    {style}
+    {title_click}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
+    nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
+    diam, et dictum <span>felis venenatis</span>
+    efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec
+    sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id
+    porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis
+    sodales sem.
+    <hr />
+    <button
+      class="button is-primary"
+      on:click={() => (is_active_item_2 = true)}>
+      Open Section 2
+    </button>
+  </AccordionItem>
+
+  <AccordionItem
+    bind:expanded={is_active_item_2}
+    title={"2 - " + title}
+    class={klass}
+    {color}
+    {style}
+    {title_click}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<strong
+      >Pellentesque risus mi</strong
+    >, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit
+    amet fringilla. Nullam gravida purus diam, et dictum
+    <span>felis venenatis</span>
+    efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec
+    sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id
+    porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis
+    sodales sem.
+    <hr />
+    <button
+      class="button is-warning"
+      on:click={() => (is_active_item_3 = true)}>
+      Open Section 3
+    </button>
+  </AccordionItem>
+
+  <AccordionItem
+    bind:expanded={is_active_item_3}
+    title={"3 - " + title}
+    class={klass}
+    {color}
+    {style}
+    {title_click}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<strong
+      >Pellentesque risus mi</strong
+    >, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit
+    amet fringilla. Nullam gravida purus diam, et dictum
+    <span>felis venenatis</span>
+    efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec
+    sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id
+    porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis
+    sodales sem.
+  </AccordionItem>
+</Accordion>
+
+<script>
+  import { Accordion, AccordionItem } from "@kws3/ui";
+
+  export let title = "Title",
+    color = "primary",
+    style = "",
+    expanded = true,
+    title_click = true;
+
+  let klass = "";
+  export { klass as class };
+
+  let is_active_item_2 = false;
+  let is_active_item_3 = false;
+</script>
diff --git a/src/stories/helpers/Accordion/accordion.stories.mdx b/src/stories/helpers/Accordion/accordion.stories.mdx
new file mode 100644
index 000000000..79f408d7f
--- /dev/null
+++ b/src/stories/helpers/Accordion/accordion.stories.mdx
@@ -0,0 +1,89 @@
+import { Story, Preview, Meta, ArgsTable, Source, Description, Canvas  } from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import { Accordion, AccordionItem } from "@kws3/ui";
+import AccordionDecorator from "./Accordion.svelte";
+import { action } from '@storybook/addon-actions';
+
+export let args={
+  title : "Title",
+  color : "primary",
+  class : "",
+  style : "",
+  expanded : true,
+  title_click: true
+};
+
+<Meta
+  title="Helpers/Accordion"
+  component={AccordionItem}
+  args={args}
+  argTypes={{
+    color:{
+      control: {type: "select"},
+    }
+  }}
+  parameters = {{
+    docs: {
+      source: {
+        code: `
+        <Accordion><AccordionItem class="" style="" color="${args.color}" expanded={true} title="${args.title}" title_click={true}></AccordionItem></Accordion>`,
+      },
+    },
+  }}
+/>
+
+<Description markdown={dedent`
+# Accordion
+`}/>
+
+<Canvas>
+  <Story
+  name="Accordion"
+  args={args}
+  >
+  {(args) => ({
+    Component: AccordionDecorator,
+    props: args,        
+  })}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Accordion" />
+
+### Usage
+<Source
+  language='javascript'
+  code={ dedent`import { Accordion, AccordionItem } from '@kws3/ui';`}
+/>
+
+#### Import the SCSS:
+<Source
+  language="javascript"
+  code={
+    dedent`@import '@kws3/ui/styles/Accordion.scss';`
+  }
+/>
+
+### Example
+<Source
+  language='html'
+  code={ dedent`
+    <Accordion>
+      <AccordionItem expanded={true} title={"Title 1"} class="" {color} {style} {title_click}>
+        Section 1
+        <button class="button is-primary" on:click={() => (is_active_item_2 = true)}>Trigger Section 2</button>
+      </AccordionItem>
+      <AccordionItem bind:expanded={is_active_item_2} title={"Title 2"} class="" {color} {style} {title_click}>Section 2</AccordionItem>
+      <AccordionItem title={"Title 3"} class="" {color} {style} {title_click}>Section 3</AccordionItem>
+    </Accordion>
+    <script>
+      import { Accordion, AccordionItem } from "@kws3/ui";
+      export let title = "Title",
+        color = "primary",
+        style = "",
+        expanded = true,
+        title_click = true;      
+      let is_active_item_2 = false;
+    </script>
+  `}
+/>