diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
new file mode 100644
index 00000000000..a378d82b4da
--- /dev/null
+++ b/packages/calcite-components/src/assets/styles/_sortable.scss
@@ -0,0 +1,8 @@
+@mixin sortable-helper-classes() {
+  .calcite-sortable--chosen,
+  .calcite-sortable--ghost,
+  .calcite-sortable--drag {
+    @apply border border-dashed;
+    border-color: var(--calcite-ui-brand);
+  }
+}
diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
index 023c0f02556..4a2d3f96ca0 100644
--- a/packages/calcite-components/src/assets/styles/global.scss
+++ b/packages/calcite-components/src/assets/styles/global.scss
@@ -79,3 +79,5 @@
 @include animation-reduced-motion();
 
 @include animation-helper-classes();
+
+@include sortable-helper-classes();
diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
index 076d0a7246f..9366044ee72 100644
--- a/packages/calcite-components/src/assets/styles/includes.scss
+++ b/packages/calcite-components/src/assets/styles/includes.scss
@@ -7,6 +7,7 @@
 @import "host";
 @import "spacing";
 @import "floating-ui";
+@import "sortable";
 
 @mixin slotted($selector, $tag, $scope: "") {
   #{$scope} slot[name="#{$selector}"]::slotted(#{$tag}),
diff --git a/packages/calcite-components/src/utils/sortableComponent.ts b/packages/calcite-components/src/utils/sortableComponent.ts
index 143df5c46cf..071d00797bf 100644
--- a/packages/calcite-components/src/utils/sortableComponent.ts
+++ b/packages/calcite-components/src/utils/sortableComponent.ts
@@ -7,6 +7,12 @@ export interface DragDetail {
   dragEl: HTMLElement;
 }
 
+export const CSS = {
+  ghostClass: "calcite-sortable--ghost",
+  chosenClass: "calcite-sortable--chosen",
+  dragClass: "calcite-sortable--drag",
+};
+
 /**
  * Defines interface for components with sorting functionality.
  */
@@ -81,6 +87,7 @@ export function connectSortableComponent(component: SortableComponent): void {
 
   component.sortable = Sortable.create(component.el, {
     dataIdAttr,
+    ...CSS,
     ...(!!draggable && { draggable }),
     ...(!!group && {
       group: {