diff --git a/packages/ui/stories/components/primitives/Breadcrumb.stories.tsx b/packages/ui/stories/components/primitives/Breadcrumb.stories.tsx
new file mode 100644
index 0000000000..95f397f97a
--- /dev/null
+++ b/packages/ui/stories/components/primitives/Breadcrumb.stories.tsx
@@ -0,0 +1,124 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Slash } from 'lucide-react'
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: 'Components/Primitives/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Displays the path to the current resource using a hierarchy of links. Based on shadcn/ui.'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// Custom Separator
+export const CustomSeparator: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>
+          <Slash />
+        </BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// Collapsed
+export const Collapsed: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+// Link as Child
+export const LinkAsChild: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <a href="/">Home</a>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <a href="/components">Components</a>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
diff --git a/packages/ui/stories/components/primitives/Button.stories.tsx b/packages/ui/stories/components/primitives/Button.stories.tsx
index 9c07f1e22f..c830aed752 100644
--- a/packages/ui/stories/components/primitives/Button.stories.tsx
+++ b/packages/ui/stories/components/primitives/Button.stories.tsx
@@ -1,8 +1,7 @@
+import { Button } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChevronRight, Loader2, Mail } from 'lucide-react'
 
-import { Button } from '../../../src/components/primitives/button'
-
 const meta: Meta<typeof Button> = {
   title: 'Components/Primitives/Button',
   component: Button,
diff --git a/packages/ui/stories/components/primitives/Checkbox.stories.tsx b/packages/ui/stories/components/primitives/Checkbox.stories.tsx
index 3705fabeaa..ba52ca85d8 100644
--- a/packages/ui/stories/components/primitives/Checkbox.stories.tsx
+++ b/packages/ui/stories/components/primitives/Checkbox.stories.tsx
@@ -1,9 +1,8 @@
+import { Checkbox, type CheckedState } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Bell, Check, FileText, Mail, Shield, Star } from 'lucide-react'
 import { useState } from 'react'
 
-import { Checkbox, type CheckedState } from '../../../src/components/primitives/checkbox'
-
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Primitives/Checkbox',
   component: Checkbox,
diff --git a/packages/ui/stories/components/primitives/Combobox.stories.tsx b/packages/ui/stories/components/primitives/Combobox.stories.tsx
index 8d273898aa..79d2f0eba0 100644
--- a/packages/ui/stories/components/primitives/Combobox.stories.tsx
+++ b/packages/ui/stories/components/primitives/Combobox.stories.tsx
@@ -1,9 +1,8 @@
+import { Combobox } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { ChevronDown, User } from 'lucide-react'
 import { useState } from 'react'
 
-import { Combobox } from '../../../src/components/primitives/combobox'
-
 const meta: Meta<typeof Combobox> = {
   title: 'Components/Primitives/Combobox',
   component: Combobox,
diff --git a/packages/ui/stories/components/primitives/Kbd.stories.tsx b/packages/ui/stories/components/primitives/Kbd.stories.tsx
index 37735b9d3b..39d6d452bd 100644
--- a/packages/ui/stories/components/primitives/Kbd.stories.tsx
+++ b/packages/ui/stories/components/primitives/Kbd.stories.tsx
@@ -1,7 +1,6 @@
+import { Kbd, KbdGroup } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Command, Copy, Save, Search } from 'lucide-react'
-
-import { Kbd, KbdGroup } from '../../../src/components/primitives/kbd'
 // import { Tooltip, TooltipContent, TooltipTrigger } from '../../../src/components/primitives/tooltip'
 
 const meta: Meta<typeof Kbd> = {
diff --git a/packages/ui/stories/components/primitives/Pagination.stories.tsx b/packages/ui/stories/components/primitives/Pagination.stories.tsx
index 9c827dbb25..3b8f0eed92 100644
--- a/packages/ui/stories/components/primitives/Pagination.stories.tsx
+++ b/packages/ui/stories/components/primitives/Pagination.stories.tsx
@@ -1,5 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
 import {
   Pagination,
   PaginationContent,
@@ -8,7 +6,8 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious
-} from '../../../src/components/primitives/pagination'
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof Pagination> = {
   title: 'Components/Primitives/Pagination',
diff --git a/packages/ui/stories/components/primitives/RadioGroup.stories.tsx b/packages/ui/stories/components/primitives/RadioGroup.stories.tsx
index b3c64f2549..287b01337f 100644
--- a/packages/ui/stories/components/primitives/RadioGroup.stories.tsx
+++ b/packages/ui/stories/components/primitives/RadioGroup.stories.tsx
@@ -1,9 +1,8 @@
+import { RadioGroup, RadioGroupItem } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { Bell, Check, Moon, Palette, Sun } from 'lucide-react'
 import { useState } from 'react'
 
-import { RadioGroup, RadioGroupItem } from '../../../src/components/primitives/radioGroup'
-
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/Primitives/RadioGroup',
   component: RadioGroup,
diff --git a/packages/ui/stories/components/primitives/Select.stories.tsx b/packages/ui/stories/components/primitives/Select.stories.tsx
index 72424a233b..88ccecc941 100644
--- a/packages/ui/stories/components/primitives/Select.stories.tsx
+++ b/packages/ui/stories/components/primitives/Select.stories.tsx
@@ -1,7 +1,3 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { Globe, Palette, User } from 'lucide-react'
-import { useState } from 'react'
-
 import {
   Select,
   SelectContent,
@@ -11,7 +7,10 @@ import {
   SelectSeparator,
   SelectTrigger,
   SelectValue
-} from '../../../src/components/primitives/select'
+} from '@cherrystudio/ui'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Globe, Palette, User } from 'lucide-react'
+import { useState } from 'react'
 
 const meta: Meta<typeof Select> = {
   title: 'Components/Primitives/Select',
diff --git a/packages/ui/stories/components/primitives/Spinner.stories.tsx b/packages/ui/stories/components/primitives/Spinner.stories.tsx
index 633c4f1f1a..3941f7018a 100644
--- a/packages/ui/stories/components/primitives/Spinner.stories.tsx
+++ b/packages/ui/stories/components/primitives/Spinner.stories.tsx
@@ -1,9 +1,7 @@
+import { Button, Spinner } from '@cherrystudio/ui'
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState } from 'react'
 
-import { Button } from '../../../src/components'
-import { Spinner } from '../../../src/components'
-
 const meta: Meta<typeof Spinner> = {
   title: 'Components/Primitives/Spinner',
   component: Spinner,
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 79c5b286fb..02c1473a14 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -13,6 +13,7 @@
     "noFallthroughCasesInSwitch": true,
     "outDir": "./dist",
     "paths": {
+      "@cherrystudio/ui": ["./src/index.ts"],
       "@cherrystudio/ui/*": ["./src/*"]
     },
     "resolveJsonModule": true,