diff --git a/src/components/breadcrumbs/Breadcrumb01.vue b/src/components/breadcrumbs/Breadcrumb01.vue
new file mode 100644
index 0000000..37d01a5
--- /dev/null
+++ b/src/components/breadcrumbs/Breadcrumb01.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui/Breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Components</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/src/components/breadcrumbs/Breadcrumb02.vue b/src/components/breadcrumbs/Breadcrumb02.vue
new file mode 100644
index 0000000..e1e0ef5
--- /dev/null
+++ b/src/components/breadcrumbs/Breadcrumb02.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui/Breadcrumb'
+import { House } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#" aria-label="Home">
+          <House :size="16" aria-hidden="true" />
+        </BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Settings</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Notifications</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/src/components/breadcrumbs/Breadcrumb03.vue b/src/components/breadcrumbs/Breadcrumb03.vue
new file mode 100644
index 0000000..fb66146
--- /dev/null
+++ b/src/components/breadcrumbs/Breadcrumb03.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@/components/ui/Breadcrumb'
+</script>
+
+<template>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbEllipsis />
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="#">Components</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
+</template>
diff --git a/src/components/pagination/Pagination01.vue b/src/components/pagination/Pagination01.vue
new file mode 100644
index 0000000..f771dfc
--- /dev/null
+++ b/src/components/pagination/Pagination01.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const pages = [1, 2, 3, 4, 5]
+const current = ref(1)
+</script>
+
+<template>
+  <nav aria-label="Pagination" class="flex items-center gap-1">
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label="Previous page"
+      :disabled="current === 1"
+      @click="current = Math.max(1, current - 1)"
+    >
+      <ChevronLeft />
+    </Button>
+    <Button
+      v-for="page in pages"
+      :key="page"
+      :variant="page === current ? 'default' : 'outline'"
+      size="icon"
+      :aria-current="page === current ? 'page' : undefined"
+      @click="current = page"
+    >
+      {{ page }}
+    </Button>
+    <Button
+      variant="outline"
+      size="icon"
+      aria-label="Next page"
+      :disabled="current === pages.length"
+      @click="current = Math.min(pages.length, current + 1)"
+    >
+      <ChevronRight />
+    </Button>
+  </nav>
+</template>
diff --git a/src/components/pagination/Pagination02.vue b/src/components/pagination/Pagination02.vue
new file mode 100644
index 0000000..266b553
--- /dev/null
+++ b/src/components/pagination/Pagination02.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import Button from '@/components/ui/Button.vue'
+import { ArrowLeft, ArrowRight } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+const totalPages = 10
+const current = ref(3)
+const label = computed(() => `Page ${current.value} of ${totalPages}`)
+</script>
+
+<template>
+  <nav aria-label="Pagination" class="flex items-center gap-3">
+    <Button
+      variant="outline"
+      size="sm"
+      :disabled="current === 1"
+      @click="current = Math.max(1, current - 1)"
+    >
+      <ArrowLeft />
+      Previous
+    </Button>
+    <span class="text-sm text-muted-foreground" aria-live="polite">{{ label }}</span>
+    <Button
+      variant="outline"
+      size="sm"
+      :disabled="current === totalPages"
+      @click="current = Math.min(totalPages, current + 1)"
+    >
+      Next
+      <ArrowRight />
+    </Button>
+  </nav>
+</template>
diff --git a/src/components/progress/Progress01.vue b/src/components/progress/Progress01.vue
new file mode 100644
index 0000000..30799fa
--- /dev/null
+++ b/src/components/progress/Progress01.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import Progress from '@/components/ui/Progress.vue'
+</script>
+
+<template>
+  <div class="w-full max-w-xs">
+    <Progress :model-value="60" />
+  </div>
+</template>
diff --git a/src/components/progress/Progress02.vue b/src/components/progress/Progress02.vue
new file mode 100644
index 0000000..cdda6c3
--- /dev/null
+++ b/src/components/progress/Progress02.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import Progress from '@/components/ui/Progress.vue'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const value = ref(0)
+let timer: ReturnType<typeof setInterval> | undefined
+
+onMounted(() => {
+  timer = setInterval(() => {
+    value.value = value.value >= 100 ? 0 : value.value + 10
+  }, 800)
+})
+
+onUnmounted(() => clearInterval(timer))
+</script>
+
+<template>
+  <div class="w-full max-w-xs space-y-2">
+    <Progress :model-value="value" />
+    <p class="text-right text-xs text-muted-foreground">{{ value }}%</p>
+  </div>
+</template>
diff --git a/src/components/ui/Breadcrumb/Breadcrumb.vue b/src/components/ui/Breadcrumb/Breadcrumb.vue
new file mode 100644
index 0000000..9fa5c1f
--- /dev/null
+++ b/src/components/ui/Breadcrumb/Breadcrumb.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="cn(props.class)">
+    <slot />
+  </nav>
+</template>
diff --git a/src/components/ui/Breadcrumb/BreadcrumbEllipsis.vue b/src/components/ui/Breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 0000000..ed2cca7
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-5 items-center justify-center', props.class)"
+  >
+    <MoreHorizontal class="size-4" />
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/src/components/ui/Breadcrumb/BreadcrumbItem.vue b/src/components/ui/Breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 0000000..7285a1d
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li :class="cn('inline-flex items-center gap-1.5', props.class)">
+    <slot />
+  </li>
+</template>
diff --git a/src/components/ui/Breadcrumb/BreadcrumbLink.vue b/src/components/ui/Breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 0000000..ff9bc3b
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Primitive } from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{ class?: string; as?: string; asChild?: boolean; href?: string }>(),
+  { as: 'a' }
+)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :href="href"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/src/components/ui/Breadcrumb/BreadcrumbList.vue b/src/components/ui/Breadcrumb/BreadcrumbList.vue
new file mode 100644
index 0000000..d9f8882
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <ol
+    :class="
+      cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        props.class
+      )
+    "
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/src/components/ui/Breadcrumb/BreadcrumbPage.vue b/src/components/ui/Breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 0000000..c4ed0f7
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/src/components/ui/Breadcrumb/BreadcrumbSeparator.vue b/src/components/ui/Breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 0000000..533ffc7
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/src/components/ui/Breadcrumb/index.ts b/src/components/ui/Breadcrumb/index.ts
new file mode 100644
index 0000000..c13a959
--- /dev/null
+++ b/src/components/ui/Breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
diff --git a/src/components/ui/Progress.vue b/src/components/ui/Progress.vue
new file mode 100644
index 0000000..4f4515d
--- /dev/null
+++ b/src/components/ui/Progress.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ProgressRoot, ProgressIndicator } from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<{ modelValue?: number | null; class?: string }>(),
+  { modelValue: 0 }
+)
+</script>
+
+<template>
+  <ProgressRoot
+    :model-value="props.modelValue"
+    :class="cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', props.class)"
+  >
+    <ProgressIndicator
+      class="size-full flex-1 bg-primary transition-transform duration-500 ease-out"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%)`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/src/router/index.ts b/src/router/index.ts
index 3ba58f5..3242e25 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -80,6 +80,24 @@ const router = createRouter({
       name: 'tabs',
       component: () => import('@/views/Tabs.vue'),
       meta: { title: 'coss-ui-vue/tabs' }
+    },
+    {
+      path: '/breadcrumbs',
+      name: 'breadcrumbs',
+      component: () => import('@/views/Breadcrumbs.vue'),
+      meta: { title: 'coss-ui-vue/breadcrumbs' }
+    },
+    {
+      path: '/progress',
+      name: 'progress',
+      component: () => import('@/views/Progress.vue'),
+      meta: { title: 'coss-ui-vue/progress' }
+    },
+    {
+      path: '/pagination',
+      name: 'pagination',
+      component: () => import('@/views/Pagination.vue'),
+      meta: { title: 'coss-ui-vue/pagination' }
     }
   ]
 })
diff --git a/src/views/Breadcrumbs.vue b/src/views/Breadcrumbs.vue
new file mode 100644
index 0000000..e9a38d3
--- /dev/null
+++ b/src/views/Breadcrumbs.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Breadcrumb Components - COSS UI"
+          heading="Breadcrumb"
+          description="A growing collection of breadcrumb components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} breadcrumb components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in breadcrumbFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex items-center justify-center sm:col-span-6"
+            :directory="breadcrumbDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const breadcrumbFiles = ref(['Breadcrumb01', 'Breadcrumb02', 'Breadcrumb03'])
+const breadcrumbDirectory = 'breadcrumbs'
+
+const totalComponents = computed(() => breadcrumbFiles.value.length)
+</script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e113f44..b8bad1a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -77,6 +77,9 @@ const availableComponents = [
   { name: 'Accordion', path: '/accordions' },
   { name: 'Tooltip', path: '/tooltips' },
   { name: 'Tabs', path: '/tabs' },
+  { name: 'Breadcrumb', path: '/breadcrumbs' },
+  { name: 'Progress', path: '/progress' },
+  { name: 'Pagination', path: '/pagination' },
   { name: 'Dropdown and Popover', path: '#' }
 ]
 
diff --git a/src/views/Pagination.vue b/src/views/Pagination.vue
new file mode 100644
index 0000000..3b559b8
--- /dev/null
+++ b/src/views/Pagination.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Pagination Components - COSS UI"
+          heading="Pagination"
+          description="A growing collection of pagination components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} pagination components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in paginationFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex items-center justify-center sm:col-span-6"
+            :directory="paginationDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const paginationFiles = ref(['Pagination01', 'Pagination02'])
+const paginationDirectory = 'pagination'
+
+const totalComponents = computed(() => paginationFiles.value.length)
+</script>
diff --git a/src/views/Progress.vue b/src/views/Progress.vue
new file mode 100644
index 0000000..34d6aba
--- /dev/null
+++ b/src/views/Progress.vue
@@ -0,0 +1,39 @@
+<template>
+  <main>
+    <div class="px-4 sm:px-6">
+      <div class="mx-auto w-full max-w-6xl">
+        <PageHeader
+          title="Progress Components - COSS UI"
+          heading="Progress"
+          description="A growing collection of progress components built with Vue and TailwindCSS."
+        >
+          A growing collection of {{ totalComponents }} progress components built with
+          <span class="text-vue">Vue</span> and TailwindCSS.
+        </PageHeader>
+
+        <div
+          class="-m-px grid grid-cols-12 *:px-1 *:py-12 *:not-first:-ms-px *:not-first:-mt-px sm:*:px-8 xl:*:px-12 overflow-hidden *:before:absolute *:before:bg-border/70 *:before:[block-size:100vh] *:before:[inline-size:1px] *:before:[inset-block-start:0] *:before:[inset-inline-start:-1px] *:after:absolute *:after:bg-border/70 *:after:[block-size:1px] *:after:[inline-size:100vw] *:after:[inset-block-start:-1px] *:after:[inset-inline-start:0]"
+        >
+          <DemoComponent
+            v-for="component in progressFiles"
+            :key="component"
+            class="group/item relative col-span-12 flex items-center justify-center sm:col-span-6"
+            :directory="progressDirectory"
+            :componentName="component"
+          />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup lang="ts">
+import DemoComponent from '@/demo/DemoComponent.vue'
+import PageHeader from '@/demo/PageHeader.vue'
+import { computed, ref } from 'vue'
+
+const progressFiles = ref(['Progress01', 'Progress02'])
+const progressDirectory = 'progress'
+
+const totalComponents = computed(() => progressFiles.value.length)
+</script>