diff --git a/packages/components/direction/README.md b/packages/components/direction/README.md
new file mode 100644
index 000000000..f3777c8e0
--- /dev/null
+++ b/packages/components/direction/README.md
@@ -0,0 +1,7 @@
+# `@oku-ui/direction`
+
+## Installation
+
+```sh
+$ pnpm add @oku-ui/direction
+```
\ No newline at end of file
diff --git a/packages/components/direction/build.config.ts b/packages/components/direction/build.config.ts
new file mode 100644
index 000000000..b972b9a78
--- /dev/null
+++ b/packages/components/direction/build.config.ts
@@ -0,0 +1,12 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    {
+      builder: 'mkdist',
+      input: './src/',
+      pattern: ['**/!(*.test|*.stories).ts'],
+    },
+  ],
+  declaration: true,
+})
diff --git a/packages/components/direction/package.json b/packages/components/direction/package.json
new file mode 100644
index 000000000..06ebed608
--- /dev/null
+++ b/packages/components/direction/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "@oku-ui/direction",
+  "type": "module",
+  "version": "0.2.3",
+  "license": "MIT",
+  "source": "src/index.ts",
+  "funding": "https://github.com/sponsors/productdevbook",
+  "homepage": "https://oku-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/oku-ui/primitives.git",
+    "directory": "packages/components/direction"
+  },
+  "bugs": {
+    "url": "https://github.com/oku-ui/primitives/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "tsconfig": "workspace:^"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/components/direction/src/Direction.ts b/packages/components/direction/src/Direction.ts
new file mode 100644
index 000000000..55094db59
--- /dev/null
+++ b/packages/components/direction/src/Direction.ts
@@ -0,0 +1,35 @@
+import { type PropType, defineComponent, inject, provide } from 'vue'
+
+type Direction = 'ltr' | 'rtl'
+const DirectionContextSymbol = Symbol('DirectionContext')
+
+/* -------------------------------------------------------------------------------------------------
+ * Direction
+ * ----------------------------------------------------------------------------------------------- */
+
+const DirectionProvider = defineComponent({
+  name: 'DirectionProvider',
+  props: {
+    dir: { type: String as PropType<Direction>, required: true },
+  },
+  setup(props, { slots }) {
+    // Direction context
+    provide(DirectionContextSymbol, props.dir)
+    return () => slots.default?.()
+  },
+})
+
+/* ----------------------------------------------------------------------------------------------- */
+
+function useDirection(localDir?: Direction) {
+  const globalDir = inject(DirectionContextSymbol, null)
+  return localDir || globalDir || 'ltr'
+}
+
+const Provider = DirectionProvider
+
+export {
+  useDirection,
+  Provider,
+  DirectionProvider,
+}
diff --git a/packages/components/direction/src/index.ts b/packages/components/direction/src/index.ts
new file mode 100644
index 000000000..bc747495f
--- /dev/null
+++ b/packages/components/direction/src/index.ts
@@ -0,0 +1,7 @@
+export {
+  useDirection,
+  //
+  Provider,
+  //
+  DirectionProvider,
+} from './Direction'
diff --git a/packages/components/direction/tsconfig.json b/packages/components/direction/tsconfig.json
new file mode 100644
index 000000000..b8dfa9041
--- /dev/null
+++ b/packages/components/direction/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "tsconfig/node16.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": [
+    "src"
+  ]
+}
diff --git a/packages/components/direction/tsup.config.ts b/packages/components/direction/tsup.config.ts
new file mode 100644
index 000000000..61f14f532
--- /dev/null
+++ b/packages/components/direction/tsup.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'tsup'
+import pkg from './package.json'
+
+const external = [
+  ...Object.keys(pkg.peerDependencies || {}),
+]
+
+export default defineConfig((options) => {
+  return [
+    {
+      ...options,
+      entryPoints: ['src/index.ts'],
+      external,
+      dts: true,
+      clean: true,
+      target: 'node16',
+      format: ['esm'],
+      outExtension: () => ({ js: '.mjs' }),
+    },
+  ]
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e04501d7..4980f6de5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -320,6 +320,16 @@ importers:
         specifier: workspace:^
         version: link:../../tsconfig
 
+  packages/components/direction:
+    dependencies:
+      vue:
+        specifier: ^3.3.0
+        version: 3.3.4
+    devDependencies:
+      tsconfig:
+        specifier: workspace:^
+        version: link:../../tsconfig
+
   packages/components/label:
     dependencies:
       '@oku-ui/primitive':
@@ -9419,11 +9429,6 @@ packages:
     resolution: {integrity: sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==}
     engines: {node: '>= 0.4'}
 
-  /is-core-module@2.12.0:
-    resolution: {integrity: sha512-RECHCBCd/viahWmwj6enj19sKbHfJrddi/6cBDsNTKbNq0f7VeaUkBo60BqzvPqo/W54ChS62Z5qyun7cfOMqQ==}
-    dependencies:
-      has: 1.0.3
-
   /is-core-module@2.12.1:
     resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
     dependencies:
@@ -12530,7 +12535,7 @@ packages:
     resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
     hasBin: true
     dependencies:
-      is-core-module: 2.12.0
+      is-core-module: 2.12.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0