diff --git a/app/components/pub/ui/accordion/Accordion.vue b/app/components/pub/ui/accordion/Accordion.vue
new file mode 100644
index 00000000..1cd25bbe
--- /dev/null
+++ b/app/components/pub/ui/accordion/Accordion.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'radix-vue'
+import {
+  AccordionRoot,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>
diff --git a/app/components/pub/ui/accordion/AccordionContent.vue b/app/components/pub/ui/accordion/AccordionContent.vue
new file mode 100644
index 00000000..585ad9bb
--- /dev/null
+++ b/app/components/pub/ui/accordion/AccordionContent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AccordionContent } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegatedProps"
+    class="overflow-hidden text-sm transition-all data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
+  >
+    <div :class="cn('pb-4 pt-0', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>
diff --git a/app/components/pub/ui/accordion/AccordionItem.vue b/app/components/pub/ui/accordion/AccordionItem.vue
new file mode 100644
index 00000000..d0875a90
--- /dev/null
+++ b/app/components/pub/ui/accordion/AccordionItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AccordionItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="forwardedProps"
+    :class="cn('border-b', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>
diff --git a/app/components/pub/ui/accordion/AccordionTrigger.vue b/app/components/pub/ui/accordion/AccordionTrigger.vue
new file mode 100644
index 00000000..36ff1cad
--- /dev/null
+++ b/app/components/pub/ui/accordion/AccordionTrigger.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="h-4 w-4 shrink-0 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>
diff --git a/app/components/pub/ui/accordion/index.ts b/app/components/pub/ui/accordion/index.ts
new file mode 100644
index 00000000..9340ac06
--- /dev/null
+++ b/app/components/pub/ui/accordion/index.ts
@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/app/components/pub/ui/alert-dialog/AlertDialog.vue b/app/components/pub/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..aaa22d70
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from 'radix-vue'
+import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogAction.vue b/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..38956c41
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue b/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..624b1962
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogContent.vue b/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..3ecf1506
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogContent,
+
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue b/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..3c78b776
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogDescription,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogFooter.vue b/app/components/pub/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..55d0a0eb
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogHeader.vue b/app/components/pub/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..c61c4495
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue b/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..c39522ab
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { AlertDialogTitle } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/AlertDialogTrigger.vue b/app/components/pub/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..e790748f
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from 'radix-vue'
+import { AlertDialogTrigger } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/app/components/pub/ui/alert-dialog/index.ts b/app/components/pub/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..448d5198
--- /dev/null
+++ b/app/components/pub/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/app/components/pub/ui/alert/Alert.vue b/app/components/pub/ui/alert/Alert.vue
new file mode 100644
index 00000000..f23fe2fa
--- /dev/null
+++ b/app/components/pub/ui/alert/Alert.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AlertVariants } from '.'
+import { cn } from '@/lib/utils'
+import { alertVariants } from '.'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  variant?: AlertVariants['variant']
+}>()
+</script>
+
+<template>
+  <div :class="cn(alertVariants({ variant }), props.class)" role="alert">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert/AlertDescription.vue b/app/components/pub/ui/alert/AlertDescription.vue
new file mode 100644
index 00000000..2971a877
--- /dev/null
+++ b/app/components/pub/ui/alert/AlertDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-sm [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/alert/AlertTitle.vue b/app/components/pub/ui/alert/AlertTitle.vue
new file mode 100644
index 00000000..e28dd37e
--- /dev/null
+++ b/app/components/pub/ui/alert/AlertTitle.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h5 :class="cn('mb-1 font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </h5>
+</template>
diff --git a/app/components/pub/ui/alert/index.ts b/app/components/pub/ui/alert/index.ts
new file mode 100644
index 00000000..36bf919b
--- /dev/null
+++ b/app/components/pub/ui/alert/index.ts
@@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/app/components/pub/ui/aspect-ratio/AspectRatio.vue b/app/components/pub/ui/aspect-ratio/AspectRatio.vue
new file mode 100644
index 00000000..69ad8fef
--- /dev/null
+++ b/app/components/pub/ui/aspect-ratio/AspectRatio.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AspectRatioProps } from 'radix-vue'
+import { AspectRatio } from 'radix-vue'
+
+const props = defineProps<AspectRatioProps>()
+</script>
+
+<template>
+  <AspectRatio v-bind="props">
+    <slot />
+  </AspectRatio>
+</template>
diff --git a/app/components/pub/ui/aspect-ratio/index.ts b/app/components/pub/ui/aspect-ratio/index.ts
new file mode 100644
index 00000000..3faf121c
--- /dev/null
+++ b/app/components/pub/ui/aspect-ratio/index.ts
@@ -0,0 +1 @@
+export { default as AspectRatio } from './AspectRatio.vue'
diff --git a/app/components/pub/ui/avatar/Avatar.vue b/app/components/pub/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..c6b9432e
--- /dev/null
+++ b/app/components/pub/ui/avatar/Avatar.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { AvatarVariants } from '.'
+import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'radix-vue'
+import { avatarVariant } from '.'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/app/components/pub/ui/avatar/AvatarFallback.vue b/app/components/pub/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..1ac23e62
--- /dev/null
+++ b/app/components/pub/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'radix-vue'
+import { AvatarFallback } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/app/components/pub/ui/avatar/AvatarImage.vue b/app/components/pub/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..6ef58f74
--- /dev/null
+++ b/app/components/pub/ui/avatar/AvatarImage.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'radix-vue'
+import { AvatarImage } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/app/components/pub/ui/avatar/index.ts b/app/components/pub/ui/avatar/index.ts
new file mode 100644
index 00000000..d26e9112
--- /dev/null
+++ b/app/components/pub/ui/avatar/index.ts
@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/app/components/pub/ui/badge/Badge.vue b/app/components/pub/ui/badge/Badge.vue
new file mode 100644
index 00000000..c811fdbe
--- /dev/null
+++ b/app/components/pub/ui/badge/Badge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import type { BadgeVariants } from '.'
+import { cn } from '@/lib/utils'
+import { badgeVariants } from '.'
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/badge/index.ts b/app/components/pub/ui/badge/index.ts
new file mode 100644
index 00000000..4f3e6d83
--- /dev/null
+++ b/app/components/pub/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/app/components/pub/ui/breadcrumb/Breadcrumb.vue b/app/components/pub/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..72ca1437
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue b/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..cfccf9fe
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbItem.vue b/app/components/pub/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..42e721cd
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue b/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..5d301fb8
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/BreadcrumbList.vue b/app/components/pub/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..60856cc4
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</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/app/components/pub/ui/breadcrumb/BreadcrumbPage.vue b/app/components/pub/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..fe43bda6
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</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/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue b/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..8b56104b
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>
diff --git a/app/components/pub/ui/breadcrumb/index.ts b/app/components/pub/ui/breadcrumb/index.ts
new file mode 100644
index 00000000..05909832
--- /dev/null
+++ b/app/components/pub/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/app/components/pub/ui/button/Button.vue b/app/components/pub/ui/button/Button.vue
new file mode 100644
index 00000000..1195f80f
--- /dev/null
+++ b/app/components/pub/ui/button/Button.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
new file mode 100644
index 00000000..4a3a7eb4
--- /dev/null
+++ b/app/components/pub/ui/button/index.ts
@@ -0,0 +1,36 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2 text-xs',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/app/components/pub/ui/calendar/Calendar.vue b/app/components/pub/ui/calendar/Calendar.vue
new file mode 100644
index 00000000..faf86ff6
--- /dev/null
+++ b/app/components/pub/ui/calendar/Calendar.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { CalendarRootEmits, CalendarRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarCell.vue b/app/components/pub/ui/calendar/CalendarCell.vue
new file mode 100644
index 00000000..cfbfb88b
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarCell.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { CalendarCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarCellTrigger.vue b/app/components/pub/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 00000000..b8ae8e53
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import type { CalendarCellTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarCellTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGrid.vue b/app/components/pub/ui/calendar/CalendarGrid.vue
new file mode 100644
index 00000000..9f8fa7f4
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { CalendarGridProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarGrid, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGridBody.vue b/app/components/pub/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 00000000..ab24c1e4
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridBodyProps } from 'radix-vue'
+import { CalendarGridBody } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGridHead.vue b/app/components/pub/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 00000000..2f3025d0
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { CalendarGridHeadProps } from 'radix-vue'
+import { CalendarGridHead } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarGridRow.vue b/app/components/pub/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 00000000..5310a3c7
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarGridRowProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarGridRow, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarHeadCell.vue b/app/components/pub/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 00000000..95f773f8
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeadCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarHeadCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarHeader.vue b/app/components/pub/ui/calendar/CalendarHeader.vue
new file mode 100644
index 00000000..50255fe2
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { CalendarHeaderProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarHeader, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarHeading.vue b/app/components/pub/ui/calendar/CalendarHeading.vue
new file mode 100644
index 00000000..ca5bfb58
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { CalendarHeadingProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarHeading, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarNextButton.vue b/app/components/pub/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 00000000..0297b15d
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { CalendarNextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarNext, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Icon name="radix-icons:chevron-right" class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/app/components/pub/ui/calendar/CalendarPrevButton.vue b/app/components/pub/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 00000000..9cde027e
--- /dev/null
+++ b/app/components/pub/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { CalendarPrevProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CalendarPrev, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <Icon name="radix-icons:chevron-left" class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/app/components/pub/ui/calendar/index.ts b/app/components/pub/ui/calendar/index.ts
new file mode 100644
index 00000000..5239a1bd
--- /dev/null
+++ b/app/components/pub/ui/calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/app/components/pub/ui/card/Card.vue b/app/components/pub/ui/card/Card.vue
new file mode 100644
index 00000000..94b69033
--- /dev/null
+++ b/app/components/pub/ui/card/Card.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-xl border bg-card text-card-foreground shadow',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardContent.vue b/app/components/pub/ui/card/CardContent.vue
new file mode 100644
index 00000000..785913a1
--- /dev/null
+++ b/app/components/pub/ui/card/CardContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardDescription.vue b/app/components/pub/ui/card/CardDescription.vue
new file mode 100644
index 00000000..d5faedd5
--- /dev/null
+++ b/app/components/pub/ui/card/CardDescription.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>
diff --git a/app/components/pub/ui/card/CardFooter.vue b/app/components/pub/ui/card/CardFooter.vue
new file mode 100644
index 00000000..1ed2efe5
--- /dev/null
+++ b/app/components/pub/ui/card/CardFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardHeader.vue b/app/components/pub/ui/card/CardHeader.vue
new file mode 100644
index 00000000..951d227e
--- /dev/null
+++ b/app/components/pub/ui/card/CardHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/card/CardTitle.vue b/app/components/pub/ui/card/CardTitle.vue
new file mode 100644
index 00000000..fc302e25
--- /dev/null
+++ b/app/components/pub/ui/card/CardTitle.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>
diff --git a/app/components/pub/ui/card/index.ts b/app/components/pub/ui/card/index.ts
new file mode 100644
index 00000000..9ff6d5e7
--- /dev/null
+++ b/app/components/pub/ui/card/index.ts
@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
diff --git a/app/components/pub/ui/carousel/Carousel.vue b/app/components/pub/ui/carousel/Carousel.vue
new file mode 100644
index 00000000..0a5551f1
--- /dev/null
+++ b/app/components/pub/ui/carousel/Carousel.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { useProvideCarousel } from './useCarousel'
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const carouselArgs = useProvideCarousel(props, emits)
+
+defineExpose(carouselArgs)
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    carouselArgs.scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    carouselArgs.scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot v-bind="carouselArgs" />
+  </div>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselContent.vue b/app/components/pub/ui/carousel/CarouselContent.vue
new file mode 100644
index 00000000..6b40f14a
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselContent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselItem.vue b/app/components/pub/ui/carousel/CarouselItem.vue
new file mode 100644
index 00000000..9c168237
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselItem.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselNext.vue b/app/components/pub/ui/carousel/CarouselNext.vue
new file mode 100644
index 00000000..687a5773
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselNext.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { ArrowRight } from 'lucide-vue-next'
+import { Button } from '../button'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-right-12 top-1/2 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight class="h-4 w-4 text-current" />
+    </slot>
+  </Button>
+</template>
diff --git a/app/components/pub/ui/carousel/CarouselPrevious.vue b/app/components/pub/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 00000000..c8440e41
--- /dev/null
+++ b/app/components/pub/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+import { ArrowLeft } from 'lucide-vue-next'
+import { Button } from '../button'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'touch-manipulation absolute h-8 w-8 rounded-full p-0',
+      orientation === 'horizontal'
+        ? '-left-12 top-1/2 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    variant="outline"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft class="h-4 w-4 text-current" />
+    </slot>
+  </Button>
+</template>
diff --git a/app/components/pub/ui/carousel/index.ts b/app/components/pub/ui/carousel/index.ts
new file mode 100644
index 00000000..c37ad02d
--- /dev/null
+++ b/app/components/pub/ui/carousel/index.ts
@@ -0,0 +1,10 @@
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export { useCarousel } from './useCarousel'
+
+export type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
diff --git a/app/components/pub/ui/carousel/interface.ts b/app/components/pub/ui/carousel/interface.ts
new file mode 100644
index 00000000..99c4f1a8
--- /dev/null
+++ b/app/components/pub/ui/carousel/interface.ts
@@ -0,0 +1,20 @@
+import type {
+  EmblaCarouselType as CarouselApi,
+  EmblaOptionsType as CarouselOptions,
+  EmblaPluginType as CarouselPlugin,
+} from 'embla-carousel'
+import type { HTMLAttributes, Ref } from 'vue'
+
+export interface CarouselProps {
+  opts?: CarouselOptions | Ref<CarouselOptions>
+  plugins?: CarouselPlugin[] | Ref<CarouselPlugin[]>
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: CarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}
diff --git a/app/components/pub/ui/carousel/useCarousel.ts b/app/components/pub/ui/carousel/useCarousel.ts
new file mode 100644
index 00000000..4fb58ddd
--- /dev/null
+++ b/app/components/pub/ui/carousel/useCarousel.ts
@@ -0,0 +1,59 @@
+import type {
+  EmblaCarouselType as CarouselApi,
+} from 'embla-carousel'
+import type { CarouselEmits, CarouselProps } from './interface'
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits) => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(true)
+    const canScrollPrev = ref(true)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api.canScrollNext()
+      canScrollPrev.value = api.canScrollPrev()
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on('init', onSelect)
+      emblaApi.value?.on('reInit', onSelect)
+      emblaApi.value?.on('select', onSelect)
+
+      emits('init-api', emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error('useCarousel must be used within a <Carousel />')
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }
diff --git a/app/components/pub/ui/chart-area/AreaChart.vue b/app/components/pub/ui/chart-area/AreaChart.vue
new file mode 100644
index 00000000..cf219519
--- /dev/null
+++ b/app/components/pub/ui/chart-area/AreaChart.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { cn } from '@/lib/utils'
+import { Area, Axis, CurveType, Line } from '@unovis/ts'
+import { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+  /**
+   * Controls the visibility of gradient.
+   * @default true
+   */
+  showGradiant?: boolean
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+  showGradiant: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <svg width="0" height="0">
+        <defs>
+          <linearGradient v-for="(color, i) in colors" :id="`color-${i}`" :key="i" x1="0" y1="0" x2="0" y2="1">
+            <template v-if="showGradiant">
+              <stop offset="5%" :stop-color="color" stop-opacity="0.4" />
+              <stop offset="95%" :stop-color="color" stop-opacity="0" />
+            </template>
+            <template v-else>
+              <stop offset="0%" :stop-color="color" />
+            </template>
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisArea
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          color="auto"
+          :curve-type="curveType"
+          :attributes="{
+            [Area.selectors.area]: {
+              fill: `url(#color-${i})`,
+            },
+          }"
+          :opacity="legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1"
+        />
+      </template>
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :color="colors[i]"
+          :curve-type="curveType"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-area/index.ts b/app/components/pub/ui/chart-area/index.ts
new file mode 100644
index 00000000..2415a56c
--- /dev/null
+++ b/app/components/pub/ui/chart-area/index.ts
@@ -0,0 +1,66 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as AreaChart } from './AreaChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/chart-bar/BarChart.vue b/app/components/pub/ui/chart-bar/BarChart.vue
new file mode 100644
index 00000000..b0d18b7e
--- /dev/null
+++ b/app/components/pub/ui/chart-bar/BarChart.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { cn } from '@/lib/utils'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Change the type of the chart
+   * @default "grouped"
+   */
+  type?: 'stacked' | 'grouped'
+  /**
+   * Rounded bar corners
+   * @default 0
+   */
+  roundedCorners?: number
+}>(), {
+  type: 'grouped',
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  filterOpacity: 0.2,
+  roundedCorners: 0,
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+
+const VisBarComponent = computed(() => props.type === 'grouped' ? VisGroupedBar : VisStackedBar)
+const selectorsBar = computed(() => props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar)
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+      :margin="margin"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :custom-tooltip="customTooltip" :index="index" />
+
+      <VisBarComponent
+        :x="(d: Data, i: number) => i"
+        :y="categories.map(category => (d: Data) => d[category]) "
+        :color="colors"
+        :rounded-corners="roundedCorners"
+        :bar-padding="0.05"
+        :attributes="{
+          [selectorsBar]: {
+            opacity: (d: Data, i:number) => {
+              const pos = i % categories.length
+              return legendItems[pos]?.inactive ? filterOpacity : 1
+            },
+          },
+        }"
+      />
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-bar/index.ts b/app/components/pub/ui/chart-bar/index.ts
new file mode 100644
index 00000000..762f2ce3
--- /dev/null
+++ b/app/components/pub/ui/chart-bar/index.ts
@@ -0,0 +1,66 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as BarChart } from './BarChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/chart-donut/DonutChart.vue b/app/components/pub/ui/chart-donut/DonutChart.vue
new file mode 100644
index 00000000..ddf1889b
--- /dev/null
+++ b/app/components/pub/ui/chart-donut/DonutChart.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { cn } from '@/lib/utils'
+import { Donut } from '@unovis/ts'
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { ChartSingleTooltip, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
+  /**
+   * Sets the name of the key containing the quantitative chart values.
+   */
+  category: KeyOfT
+  /**
+   * Change the type of the chart
+   * @default "donut"
+   */
+  type?: 'donut' | 'pie'
+  /**
+   * Function to sort the segment
+   */
+  sortFunction?: (a: any, b: any) => number | undefined
+  /**
+   * Controls the formatting for the label.
+   */
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+}>(), {
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  sortFunction: () => undefined,
+  valueFormatter: (tick: number) => `${tick}`,
+  type: 'donut',
+  filterOpacity: 0.2,
+  showTooltip: true,
+  showLegend: true,
+})
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const category = computed(() => props.category as KeyOfT)
+const index = computed(() => props.index as KeyOfT)
+
+const isMounted = useMounted()
+const activeSegmentKey = ref<string>()
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter(d => d[props.category]).filter(Boolean).length))
+const legendItems = computed(() => props.data.map((item, i) => ({
+  name: item[props.index],
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const totalValue = computed(() => props.data.reduce((prev, curr) => {
+  return prev + curr[props.category]
+}, 0))
+</script>
+
+<template>
+  <div :class="cn('w-full h-48 flex flex-col items-end', $attrs.class ?? '')">
+    <VisSingleContainer :style="{ height: isMounted ? '100%' : 'auto' }" :margin="{ left: 20, right: 20 }" :data="data">
+      <ChartSingleTooltip
+        :selector="Donut.selectors.segment"
+        :index="category"
+        :items="legendItems"
+        :value-formatter="valueFormatter"
+        :custom-tooltip="customTooltip"
+      />
+
+      <VisDonut
+        :value="(d: Data) => d[category]"
+        :sort-function="sortFunction"
+        :color="colors"
+        :arc-width="type === 'donut' ? 20 : 0"
+        :show-background="false"
+        :central-label="type === 'donut' ? valueFormatter(totalValue) : ''"
+        :events="{
+          [Donut.selectors.segment]: {
+            click: (d: Data, ev: PointerEvent, i: number, elements: HTMLElement[]) => {
+              if (d?.data?.[index] === activeSegmentKey) {
+                activeSegmentKey = undefined
+                elements.forEach(el => el.style.opacity = '1')
+              }
+              else {
+                activeSegmentKey = d?.data?.[index]
+                elements.forEach(el => el.style.opacity = `${filterOpacity}`)
+                elements[i].style.opacity = '1'
+              }
+            },
+          },
+        }"
+      />
+
+      <slot />
+    </VisSingleContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-donut/index.ts b/app/components/pub/ui/chart-donut/index.ts
new file mode 100644
index 00000000..db2b49d0
--- /dev/null
+++ b/app/components/pub/ui/chart-donut/index.ts
@@ -0,0 +1,39 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as DonutChart } from './DonutChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+}
diff --git a/app/components/pub/ui/chart-line/LineChart.vue b/app/components/pub/ui/chart-line/LineChart.vue
new file mode 100644
index 00000000..a269b2cb
--- /dev/null
+++ b/app/components/pub/ui/chart-line/LineChart.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import type { BaseChartProps } from '.'
+import { cn } from '@/lib/utils'
+import { Axis, CurveType, Line } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { computed, ref } from 'vue'
+import { ChartCrosshair, ChartLegend, defaultColors } from '../chart'
+
+const props = withDefaults(defineProps<BaseChartProps<T> & {
+  /**
+   * Render custom tooltip component.
+   */
+  customTooltip?: Component
+  /**
+   * Type of curve
+   */
+  curveType?: CurveType
+}>(), {
+  curveType: CurveType.MonotoneX,
+  filterOpacity: 0.2,
+  margin: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+  showXAxis: true,
+  showYAxis: true,
+  showTooltip: true,
+  showLegend: true,
+  showGridLine: true,
+})
+
+const emits = defineEmits<{
+  legendItemClick: [d: BulletLegendItemInterface, i: number]
+}>()
+
+type KeyOfT = Extract<keyof T, string>
+type Data = typeof props.data[number]
+
+const index = computed(() => props.index as KeyOfT)
+const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.categories.length))
+
+const legendItems = ref<BulletLegendItemInterface[]>(props.categories.map((category, i) => ({
+  name: category,
+  color: colors.value[i],
+  inactive: false,
+})))
+
+const isMounted = useMounted()
+
+function handleLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+}
+</script>
+
+<template>
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
+    <ChartLegend v-if="showLegend" v-model:items="legendItems" @legend-item-click="handleLegendItemClick" />
+
+    <VisXYContainer
+      :margin="{ left: 20, right: 20 }"
+      :data="data"
+      :style="{ height: isMounted ? '100%' : 'auto' }"
+    >
+      <ChartCrosshair v-if="showTooltip" :colors="colors" :items="legendItems" :index="index" :custom-tooltip="customTooltip" />
+
+      <template v-for="(category, i) in categories" :key="category">
+        <VisLine
+          :x="(d: Data, i: number) => i"
+          :y="(d: Data) => d[category]"
+          :curve-type="curveType"
+          :color="colors[i]"
+          :attributes="{
+            [Line.selectors.line]: {
+              opacity: legendItems.find(item => item.name === category)?.inactive ? filterOpacity : 1,
+            },
+          }"
+        />
+      </template>
+
+      <VisAxis
+        v-if="showXAxis"
+        type="x"
+        :tick-format="xFormatter ?? ((v: number) => data[v]?.[index])"
+        :grid-line="false"
+        :tick-line="false"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+      <VisAxis
+        v-if="showYAxis"
+        type="y"
+        :tick-line="false"
+        :tick-format="yFormatter"
+        :domain-line="false"
+        :grid-line="showGridLine"
+        :attributes="{
+          [Axis.selectors.grid]: {
+            class: 'text-muted',
+          },
+        }"
+        tick-text-color="hsl(var(--muted-foreground))"
+      />
+
+      <slot />
+    </VisXYContainer>
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart-line/index.ts b/app/components/pub/ui/chart-line/index.ts
new file mode 100644
index 00000000..1078d270
--- /dev/null
+++ b/app/components/pub/ui/chart-line/index.ts
@@ -0,0 +1,66 @@
+import type { Spacing } from '@unovis/ts'
+
+export { default as LineChart } from './LineChart.vue'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/chart/ChartCrosshair.vue b/app/components/pub/ui/chart/ChartCrosshair.vue
new file mode 100644
index 00000000..f49600f6
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartCrosshair.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import { omit } from '@unovis/ts'
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
+import { createApp } from 'vue'
+import { ChartTooltip } from '.'
+
+const props = withDefaults(defineProps<{
+  colors?: string[]
+  index: string
+  items: BulletLegendItemInterface[]
+  customTooltip?: Component
+}>(), {
+  colors: () => [],
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any) {
+  if (wm.has(d)) {
+    return wm.get(d)
+  }
+  else {
+    const componentDiv = document.createElement('div')
+    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+      const legendReference = props.items.find(i => i.name === key)
+      return { ...legendReference, value }
+    })
+    const TooltipComponent = props.customTooltip ?? ChartTooltip
+    createApp(TooltipComponent, { title: d[props.index].toString(), data: omittedData }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
+  }
+}
+
+function color(d: unknown, i: number) {
+  return props.colors[i] ?? 'transparent'
+}
+</script>
+
+<template>
+  <VisTooltip :horizontal-shift="20" :vertical-shift="20" />
+  <VisCrosshair :template="template" :color="color" />
+</template>
diff --git a/app/components/pub/ui/chart/ChartLegend.vue b/app/components/pub/ui/chart/ChartLegend.vue
new file mode 100644
index 00000000..225adc94
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartLegend.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import { BulletLegend } from '@unovis/ts'
+import { VisBulletLegend } from '@unovis/vue'
+import { nextTick, onMounted, ref } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = withDefaults(defineProps<{ items?: BulletLegendItemInterface[] }>(), {
+  items: () => [],
+})
+
+const emits = defineEmits<{
+  'legendItemClick': [d: BulletLegendItemInterface, i: number]
+  'update:items': [payload: BulletLegendItemInterface[]]
+}>()
+
+const elRef = ref<HTMLElement>()
+
+onMounted(() => {
+  const selector = `.${BulletLegend.selectors.item}`
+  nextTick(() => {
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
+    elements?.forEach(el => el.classList.add(...classes, '!inline-flex', '!mr-2'))
+  })
+})
+
+function onLegendItemClick(d: BulletLegendItemInterface, i: number) {
+  emits('legendItemClick', d, i)
+  const isBulletActive = !props.items[i].inactive
+  const isFilterApplied = props.items.some(i => i.inactive)
+  if (isFilterApplied && isBulletActive) {
+    // reset filter
+    emits('update:items', props.items.map(item => ({ ...item, inactive: false })))
+  }
+  else {
+    // apply selection, set other item as inactive
+    emits('update:items', props.items.map(item => item.name === d.name ? ({ ...d, inactive: false }) : { ...item, inactive: true }))
+  }
+}
+</script>
+
+<template>
+  <div ref="elRef" class="w-max">
+    <VisBulletLegend
+      :items="items"
+      :on-legend-item-click="onLegendItemClick"
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/chart/ChartSingleTooltip.vue b/app/components/pub/ui/chart/ChartSingleTooltip.vue
new file mode 100644
index 00000000..17594762
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartSingleTooltip.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { BulletLegendItemInterface } from '@unovis/ts'
+import type { Component } from 'vue'
+import { omit } from '@unovis/ts'
+import { VisTooltip } from '@unovis/vue'
+import { createApp } from 'vue'
+import { ChartTooltip } from '.'
+
+const props = withDefaults(defineProps<{
+  selector: string
+  index: string
+  items?: BulletLegendItemInterface[]
+  valueFormatter?: (tick: number, i?: number, ticks?: number[]) => string
+  customTooltip?: Component
+}>(), {
+  valueFormatter: (tick: number) => `${tick}`,
+})
+
+// Use weakmap to store reference to each datapoint for Tooltip
+const wm = new WeakMap()
+function template(d: any, i: number, elements: (HTMLElement | SVGElement)[]) {
+  if (props.index in d) {
+    if (wm.has(d)) {
+      return wm.get(d)
+    }
+    else {
+      const componentDiv = document.createElement('div')
+      const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+        const legendReference = props.items?.find(i => i.name === key)
+        return { ...legendReference, value: props.valueFormatter(value) }
+      })
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      // eslint-disable-next-line vue/one-component-per-file
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+
+  else {
+    const data = d.data
+
+    if (wm.has(data)) {
+      return wm.get(data)
+    }
+    else {
+      const style = getComputedStyle(elements[i])
+      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }]
+      const componentDiv = document.createElement('div')
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      // eslint-disable-next-line vue/one-component-per-file
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
+    }
+  }
+}
+</script>
+
+<template>
+  <VisTooltip
+    :horizontal-shift="20" :vertical-shift="20" :triggers="{
+      [selector]: template,
+    }"
+  />
+</template>
diff --git a/app/components/pub/ui/chart/ChartTooltip.vue b/app/components/pub/ui/chart/ChartTooltip.vue
new file mode 100644
index 00000000..24907f5f
--- /dev/null
+++ b/app/components/pub/ui/chart/ChartTooltip.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { Card, CardContent, CardHeader, CardTitle } from '../card'
+
+defineProps<{
+  title?: string
+  data: {
+    name: string
+    color: string
+    value: any
+  }[]
+}>()
+</script>
+
+<template>
+  <Card class="text-sm">
+    <CardHeader v-if="title" class="border-b p-3">
+      <CardTitle>
+        {{ title }}
+      </CardTitle>
+    </CardHeader>
+    <CardContent class="min-w-[180px] flex flex-col gap-1 p-3">
+      <div v-for="(item, key) in data" :key="key" class="flex justify-between">
+        <div class="flex items-center">
+          <span class="mr-2 h-2.5 w-2.5">
+            <svg width="100%" height="100%" viewBox="0 0 30 30">
+              <path
+                d=" M 15 15 m -14, 0 a 14,14 0 1,1 28,0 a 14,14 0 1,1 -28,0"
+                :stroke="item.color"
+                :fill="item.color"
+                stroke-width="1"
+              />
+            </svg>
+          </span>
+          <span>{{ item.name }}</span>
+        </div>
+        <span class="ml-4 font-semibold">{{ item.value }}</span>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/app/components/pub/ui/chart/index.ts b/app/components/pub/ui/chart/index.ts
new file mode 100644
index 00000000..7426ca17
--- /dev/null
+++ b/app/components/pub/ui/chart/index.ts
@@ -0,0 +1,18 @@
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartTooltip } from './ChartTooltip.vue'
+
+export function defaultColors(count: number = 3) {
+  const quotient = Math.floor(count / 2)
+  const remainder = count % 2
+
+  const primaryCount = quotient + remainder
+  const secondaryCount = quotient
+  return [
+    ...Array.from(Array.from({ length: primaryCount }).keys()).map(i => `hsl(var(--primary) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(Array.from({ length: secondaryCount }).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+  ]
+}
+
+export * from './interface'
diff --git a/app/components/pub/ui/chart/interface.ts b/app/components/pub/ui/chart/interface.ts
new file mode 100644
index 00000000..c3838afc
--- /dev/null
+++ b/app/components/pub/ui/chart/interface.ts
@@ -0,0 +1,64 @@
+import type { Spacing } from '@unovis/ts'
+
+type KeyOf<T extends Record<string, any>> = Extract<keyof T, string>
+
+export interface BaseChartProps<T extends Record<string, any>> {
+  /**
+   * The source data, in which each entry is a dictionary.
+   */
+  data: T[]
+  /**
+   * Select the categories from your data. Used to populate the legend and toolip.
+   */
+  categories: KeyOf<T>[]
+  /**
+   * Sets the key to map the data to the axis.
+   */
+  index: KeyOf<T>
+  /**
+   * Change the default colors.
+   */
+  colors?: string[]
+  /**
+   * Margin of each the container
+   */
+  margin?: Spacing
+  /**
+   * Change the opacity of the non-selected field
+   * @default 0.2
+   */
+  filterOpacity?: number
+  /**
+   * Function to format X label
+   */
+  xFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Function to format Y label
+   */
+  yFormatter?: (tick: number | Date, i: number, ticks: number[] | Date[]) => string
+  /**
+   * Controls the visibility of the X axis.
+   * @default true
+   */
+  showXAxis?: boolean
+  /**
+   * Controls the visibility of the Y axis.
+   * @default true
+   */
+  showYAxis?: boolean
+  /**
+   * Controls the visibility of tooltip.
+   * @default true
+   */
+  showTooltip?: boolean
+  /**
+   * Controls the visibility of legend.
+   * @default true
+   */
+  showLegend?: boolean
+  /**
+   * Controls the visibility of gridline.
+   * @default true
+   */
+  showGridLine?: boolean
+}
diff --git a/app/components/pub/ui/checkbox/Checkbox.vue b/app/components/pub/ui/checkbox/Checkbox.vue
new file mode 100644
index 00000000..c846eae0
--- /dev/null
+++ b/app/components/pub/ui/checkbox/Checkbox.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="h-full w-full flex items-center justify-center text-current">
+      <slot>
+        <Icon name="radix-icons:check" class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/app/components/pub/ui/checkbox/index.ts b/app/components/pub/ui/checkbox/index.ts
new file mode 100644
index 00000000..8c28c286
--- /dev/null
+++ b/app/components/pub/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/app/components/pub/ui/collapsible/Collapsible.vue b/app/components/pub/ui/collapsible/Collapsible.vue
new file mode 100644
index 00000000..fae7919c
--- /dev/null
+++ b/app/components/pub/ui/collapsible/Collapsible.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>
diff --git a/app/components/pub/ui/collapsible/CollapsibleContent.vue b/app/components/pub/ui/collapsible/CollapsibleContent.vue
new file mode 100644
index 00000000..5c82af24
--- /dev/null
+++ b/app/components/pub/ui/collapsible/CollapsibleContent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleContentProps } from 'radix-vue'
+import { CollapsibleContent } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up">
+    <slot />
+  </CollapsibleContent>
+</template>
diff --git a/app/components/pub/ui/collapsible/CollapsibleTrigger.vue b/app/components/pub/ui/collapsible/CollapsibleTrigger.vue
new file mode 100644
index 00000000..e3074994
--- /dev/null
+++ b/app/components/pub/ui/collapsible/CollapsibleTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'radix-vue'
+import { CollapsibleTrigger } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
diff --git a/app/components/pub/ui/collapsible/index.ts b/app/components/pub/ui/collapsible/index.ts
new file mode 100644
index 00000000..abab9567
--- /dev/null
+++ b/app/components/pub/ui/collapsible/index.ts
@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
diff --git a/app/components/pub/ui/command/Command.vue b/app/components/pub/ui/command/Command.vue
new file mode 100644
index 00000000..dda41937
--- /dev/null
+++ b/app/components/pub/ui/command/Command.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/app/components/pub/ui/command/CommandDialog.vue b/app/components/pub/ui/command/CommandDialog.vue
new file mode 100644
index 00000000..efe417df
--- /dev/null
+++ b/app/components/pub/ui/command/CommandDialog.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { useForwardPropsEmits, VisuallyHidden } from 'radix-vue'
+import { Dialog, DialogContent } from '../dialog'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <VisuallyHidden as-child>
+        <DialogTitle />
+      </VisuallyHidden>
+      <VisuallyHidden as-child>
+        <DialogDescription aria-describedby="undefined" />
+      </VisuallyHidden>
+      <Command class="[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group]]:px-2 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:font-medium">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/app/components/pub/ui/command/CommandEmpty.vue b/app/components/pub/ui/command/CommandEmpty.vue
new file mode 100644
index 00000000..21368efa
--- /dev/null
+++ b/app/components/pub/ui/command/CommandEmpty.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/app/components/pub/ui/command/CommandGroup.vue b/app/components/pub/ui/command/CommandGroup.vue
new file mode 100644
index 00000000..eaca02de
--- /dev/null
+++ b/app/components/pub/ui/command/CommandGroup.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs text-muted-foreground font-medium">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/app/components/pub/ui/command/CommandInput.vue b/app/components/pub/ui/command/CommandInput.vue
new file mode 100644
index 00000000..e2e2b1d0
--- /dev/null
+++ b/app/components/pub/ui/command/CommandInput.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ComboboxInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Search } from 'lucide-vue-next'
+import { ComboboxInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/command/CommandItem.vue b/app/components/pub/ui/command/CommandItem.vue
new file mode 100644
index 00000000..adca1fef
--- /dev/null
+++ b/app/components/pub/ui/command/CommandItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/app/components/pub/ui/command/CommandList.vue b/app/components/pub/ui/command/CommandList.vue
new file mode 100644
index 00000000..d540cf08
--- /dev/null
+++ b/app/components/pub/ui/command/CommandList.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/app/components/pub/ui/command/CommandSeparator.vue b/app/components/pub/ui/command/CommandSeparator.vue
new file mode 100644
index 00000000..9000939f
--- /dev/null
+++ b/app/components/pub/ui/command/CommandSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/app/components/pub/ui/command/CommandShortcut.vue b/app/components/pub/ui/command/CommandShortcut.vue
new file mode 100644
index 00000000..0d4da921
--- /dev/null
+++ b/app/components/pub/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/command/index.ts b/app/components/pub/ui/command/index.ts
new file mode 100644
index 00000000..0e35f4b9
--- /dev/null
+++ b/app/components/pub/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
diff --git a/app/components/pub/ui/context-menu/ContextMenu.vue b/app/components/pub/ui/context-menu/ContextMenu.vue
new file mode 100644
index 00000000..363e9c6b
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<ContextMenuRootProps>()
+const emits = defineEmits<ContextMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRoot v-bind="forwarded">
+    <slot />
+  </ContextMenuRoot>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue b/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
new file mode 100644
index 00000000..62f6c481
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuCheckboxItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  ContextMenuCheckboxItem,
+
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuCheckboxItem>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuContent.vue b/app/components/pub/ui/context-menu/ContextMenuContent.vue
new file mode 100644
index 00000000..651d3b26
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ContextMenuContentEmits, ContextMenuContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  ContextMenuContent,
+
+  ContextMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuPortal>
+    <ContextMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </ContextMenuContent>
+  </ContextMenuPortal>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuGroup.vue b/app/components/pub/ui/context-menu/ContextMenuGroup.vue
new file mode 100644
index 00000000..4dda085d
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuGroupProps } from 'radix-vue'
+import { ContextMenuGroup } from 'radix-vue'
+
+const props = defineProps<ContextMenuGroupProps>()
+</script>
+
+<template>
+  <ContextMenuGroup v-bind="props">
+    <slot />
+  </ContextMenuGroup>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuItem.vue b/app/components/pub/ui/context-menu/ContextMenuItem.vue
new file mode 100644
index 00000000..1773330c
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { ContextMenuItemEmits, ContextMenuItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  ContextMenuItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+const emits = defineEmits<ContextMenuItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </ContextMenuItem>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuLabel.vue b/app/components/pub/ui/context-menu/ContextMenuLabel.vue
new file mode 100644
index 00000000..5ad9742a
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuLabel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ContextMenuLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ContextMenuLabel } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuLabel
+    v-bind="delegatedProps"
+    :class="
+      cn('px-2 py-1.5 text-sm font-semibold text-foreground',
+         inset && 'pl-8', props.class,
+      )"
+  >
+    <slot />
+  </ContextMenuLabel>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuPortal.vue b/app/components/pub/ui/context-menu/ContextMenuPortal.vue
new file mode 100644
index 00000000..28e2192d
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuPortal.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ContextMenuPortalProps } from 'radix-vue'
+import { ContextMenuPortal } from 'radix-vue'
+
+const props = defineProps<ContextMenuPortalProps>()
+</script>
+
+<template>
+  <ContextMenuPortal v-bind="props">
+    <slot />
+  </ContextMenuPortal>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuRadioGroup.vue b/app/components/pub/ui/context-menu/ContextMenuRadioGroup.vue
new file mode 100644
index 00000000..a40feffb
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ContextMenuRadioGroupEmits, ContextMenuRadioGroupProps } from 'radix-vue'
+import {
+  ContextMenuRadioGroup,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuRadioGroupProps>()
+const emits = defineEmits<ContextMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </ContextMenuRadioGroup>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue b/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
new file mode 100644
index 00000000..05ff7bde
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuRadioItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ContextMenuRadioItemEmits, ContextMenuRadioItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+  ContextMenuItemIndicator,
+  ContextMenuRadioItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ContextMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <ContextMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </ContextMenuItemIndicator>
+    </span>
+    <slot />
+  </ContextMenuRadioItem>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSeparator.vue b/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
new file mode 100644
index 00000000..c03377f9
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSeparator.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ContextMenuSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  ContextMenuSeparator,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ContextMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuShortcut.vue b/app/components/pub/ui/context-menu/ContextMenuShortcut.vue
new file mode 100644
index 00000000..0d4da921
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSub.vue b/app/components/pub/ui/context-menu/ContextMenuSub.vue
new file mode 100644
index 00000000..0d3c61db
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ContextMenuSubEmits, ContextMenuSubProps } from 'radix-vue'
+import {
+  ContextMenuSub,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<ContextMenuSubProps>()
+const emits = defineEmits<ContextMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ContextMenuSub v-bind="forwarded">
+    <slot />
+  </ContextMenuSub>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSubContent.vue b/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
new file mode 100644
index 00000000..2d7adb69
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSubContent.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  ContextMenuSubContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ContextMenuSubContent
+    v-bind="forwarded"
+    :class="
+      cn(
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </ContextMenuSubContent>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue b/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
new file mode 100644
index 00000000..77eeb378
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuSubTrigger.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ContextMenuSubTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  ContextMenuSubTrigger,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ContextMenuSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ContextMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </ContextMenuSubTrigger>
+</template>
diff --git a/app/components/pub/ui/context-menu/ContextMenuTrigger.vue b/app/components/pub/ui/context-menu/ContextMenuTrigger.vue
new file mode 100644
index 00000000..136ee589
--- /dev/null
+++ b/app/components/pub/ui/context-menu/ContextMenuTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ContextMenuTriggerProps } from 'radix-vue'
+import { ContextMenuTrigger, useForwardProps } from 'radix-vue'
+
+const props = defineProps<ContextMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <ContextMenuTrigger v-bind="forwardedProps">
+    <slot />
+  </ContextMenuTrigger>
+</template>
diff --git a/app/components/pub/ui/context-menu/index.ts b/app/components/pub/ui/context-menu/index.ts
new file mode 100644
index 00000000..3ed59e63
--- /dev/null
+++ b/app/components/pub/ui/context-menu/index.ts
@@ -0,0 +1,14 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
+export { default as ContextMenuContent } from './ContextMenuContent.vue'
+export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
+export { default as ContextMenuItem } from './ContextMenuItem.vue'
+export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
+export { default as ContextMenuSub } from './ContextMenuSub.vue'
+export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
diff --git a/app/components/pub/ui/dialog/Dialog.vue b/app/components/pub/ui/dialog/Dialog.vue
new file mode 100644
index 00000000..5f6a5632
--- /dev/null
+++ b/app/components/pub/ui/dialog/Dialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogClose.vue b/app/components/pub/ui/dialog/DialogClose.vue
new file mode 100644
index 00000000..1fa61805
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'radix-vue'
+import { DialogClose } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
new file mode 100644
index 00000000..bb1842bb
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogContent.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
+      >
+        <X class="h-4 w-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogDescription.vue b/app/components/pub/ui/dialog/DialogDescription.vue
new file mode 100644
index 00000000..373381e0
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogDescription.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DialogDescription, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogFooter.vue b/app/components/pub/ui/dialog/DialogFooter.vue
new file mode 100644
index 00000000..ac2d0c18
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogHeader.vue b/app/components/pub/ui/dialog/DialogHeader.vue
new file mode 100644
index 00000000..b2c9085d
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogScrollContent.vue b/app/components/pub/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 00000000..15a2031e
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid data-[state=closed]:animate-out data-[state=open]:animate-in place-items-center overflow-y-auto bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute right-3 top-3 rounded-md p-0.5 transition-colors hover:bg-secondary"
+        >
+          <X class="h-4 w-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogTitle.vue b/app/components/pub/ui/dialog/DialogTitle.vue
new file mode 100644
index 00000000..d815c4b1
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogTitle.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DialogTitle, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/app/components/pub/ui/dialog/DialogTrigger.vue b/app/components/pub/ui/dialog/DialogTrigger.vue
new file mode 100644
index 00000000..b966b29d
--- /dev/null
+++ b/app/components/pub/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/app/components/pub/ui/dialog/index.ts b/app/components/pub/ui/dialog/index.ts
new file mode 100644
index 00000000..ca8cfeae
--- /dev/null
+++ b/app/components/pub/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/app/components/pub/ui/drawer/Drawer.vue b/app/components/pub/ui/drawer/Drawer.vue
new file mode 100644
index 00000000..8be66568
--- /dev/null
+++ b/app/components/pub/ui/drawer/Drawer.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot } from 'vaul-vue'
+
+const props = withDefaults(defineProps<DrawerRootProps>(), {
+  shouldScaleBackground: true,
+})
+
+const emits = defineEmits<DrawerRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerRoot v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerContent.vue b/app/components/pub/ui/drawer/DrawerContent.vue
new file mode 100644
index 00000000..9639a6f3
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerContent.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import DrawerOverlay from './DrawerOverlay.vue'
+
+const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerContent
+      v-bind="forwarded" :class="cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        props.class,
+      )"
+    >
+      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <slot />
+    </DrawerContent>
+  </DrawerPortal>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerDescription.vue b/app/components/pub/ui/drawer/DrawerDescription.vue
new file mode 100644
index 00000000..33c01401
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerDescription.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerDescriptionProps } from 'vaul-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerDescription v-bind="delegatedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DrawerDescription>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerFooter.vue b/app/components/pub/ui/drawer/DrawerFooter.vue
new file mode 100644
index 00000000..1eb35278
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerFooter.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerHeader.vue b/app/components/pub/ui/drawer/DrawerHeader.vue
new file mode 100644
index 00000000..ecef7a67
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerHeader.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HtmlHTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('grid gap-1.5 p-4 text-center sm:text-left', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerOverlay.vue b/app/components/pub/ui/drawer/DrawerOverlay.vue
new file mode 100644
index 00000000..bda38ce2
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerOverlay.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from 'radix-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+</template>
diff --git a/app/components/pub/ui/drawer/DrawerTitle.vue b/app/components/pub/ui/drawer/DrawerTitle.vue
new file mode 100644
index 00000000..04d48646
--- /dev/null
+++ b/app/components/pub/ui/drawer/DrawerTitle.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from 'vaul-vue'
+import type { HtmlHTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DrawerTitle } from 'vaul-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DrawerTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DrawerTitle>
+</template>
diff --git a/app/components/pub/ui/drawer/index.ts b/app/components/pub/ui/drawer/index.ts
new file mode 100644
index 00000000..d41b7928
--- /dev/null
+++ b/app/components/pub/ui/drawer/index.ts
@@ -0,0 +1,8 @@
+export { default as Drawer } from './Drawer.vue'
+export { default as DrawerContent } from './DrawerContent.vue'
+export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenu.vue b/app/components/pub/ui/dropdown-menu/DropdownMenu.vue
new file mode 100644
index 00000000..c9e77fe7
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenu.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue'
+import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
new file mode 100644
index 00000000..12d948a2
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  DropdownMenuCheckboxItem,
+
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Check class="h-4 w-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
new file mode 100644
index 00000000..95e82df6
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuContent.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuContent,
+
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuGroup.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuGroup.vue
new file mode 100644
index 00000000..e9711764
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DropdownMenuGroupProps } from 'radix-vue'
+import { DropdownMenuGroup } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
new file mode 100644
index 00000000..234cbc87
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuItem.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DropdownMenuItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DropdownMenuItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-pointer select-none gap-2 items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
new file mode 100644
index 00000000..156e28ca
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioGroup.vue
new file mode 100644
index 00000000..c21b27a8
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'radix-vue'
+import {
+  DropdownMenuRadioGroup,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioGroup v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
new file mode 100644
index 00000000..db5b802d
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuRadioItem>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
new file mode 100644
index 00000000..6bb639e1
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuSeparator,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuShortcut.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuShortcut.vue
new file mode 100644
index 00000000..abaeda64
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSub.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSub.vue
new file mode 100644
index 00000000..af6bac43
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue'
+import {
+  DropdownMenuSub,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
new file mode 100644
index 00000000..0cba446a
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  DropdownMenuSubContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
new file mode 100644
index 00000000..fdb058e7
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+  DropdownMenuSubTrigger,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex gap-2 cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/DropdownMenuTrigger.vue b/app/components/pub/ui/dropdown-menu/DropdownMenuTrigger.vue
new file mode 100644
index 00000000..baf0f7c0
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'radix-vue'
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/app/components/pub/ui/dropdown-menu/index.ts b/app/components/pub/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..6011f35c
--- /dev/null
+++ b/app/components/pub/ui/dropdown-menu/index.ts
@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'radix-vue'
diff --git a/app/components/pub/ui/form/FormControl.vue b/app/components/pub/ui/form/FormControl.vue
new file mode 100644
index 00000000..ca813eab
--- /dev/null
+++ b/app/components/pub/ui/form/FormControl.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from 'radix-vue'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :class="{ 'text-destructive border-destructive focus-visible:ring-destructive': error }"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>
diff --git a/app/components/pub/ui/form/FormDescription.vue b/app/components/pub/ui/form/FormDescription.vue
new file mode 100644
index 00000000..93000660
--- /dev/null
+++ b/app/components/pub/ui/form/FormDescription.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/app/components/pub/ui/form/FormItem.vue b/app/components/pub/ui/form/FormItem.vue
new file mode 100644
index 00000000..a4c1e8df
--- /dev/null
+++ b/app/components/pub/ui/form/FormItem.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { provide } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/form/FormLabel.vue b/app/components/pub/ui/form/FormLabel.vue
new file mode 100644
index 00000000..05a51929
--- /dev/null
+++ b/app/components/pub/ui/form/FormLabel.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/app/components/pub/ui/form/FormMessage.vue b/app/components/pub/ui/form/FormMessage.vue
new file mode 100644
index 00000000..98dd4fc7
--- /dev/null
+++ b/app/components/pub/ui/form/FormMessage.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { useFormField } from './useFormField'
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    as="p"
+    :name="toValue(name)"
+    class="text-[0.8rem] text-destructive font-medium"
+  />
+</template>
diff --git a/app/components/pub/ui/form/index.ts b/app/components/pub/ui/form/index.ts
new file mode 100644
index 00000000..1a3be118
--- /dev/null
+++ b/app/components/pub/ui/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
diff --git a/app/components/pub/ui/form/injectionKeys.ts b/app/components/pub/ui/form/injectionKeys.ts
new file mode 100644
index 00000000..5b9ee8f6
--- /dev/null
+++ b/app/components/pub/ui/form/injectionKeys.ts
@@ -0,0 +1,3 @@
+import type { InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY = Symbol('id') as InjectionKey<string>
diff --git a/app/components/pub/ui/form/useFormField.ts b/app/components/pub/ui/form/useFormField.ts
new file mode 100644
index 00000000..2da133b8
--- /dev/null
+++ b/app/components/pub/ui/form/useFormField.ts
@@ -0,0 +1,29 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+  const fieldState = {
+    valid: useIsFieldValid(),
+    isDirty: useIsFieldDirty(),
+    isTouched: useIsFieldTouched(),
+    error: useFieldError(),
+  }
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>')
+
+  const { name } = fieldContext
+  const id = fieldItemContext
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
diff --git a/app/components/pub/ui/hover-card/HoverCard.vue b/app/components/pub/ui/hover-card/HoverCard.vue
new file mode 100644
index 00000000..ef13ea57
--- /dev/null
+++ b/app/components/pub/ui/hover-card/HoverCard.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'radix-vue'
+import { HoverCardRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/app/components/pub/ui/hover-card/HoverCardContent.vue b/app/components/pub/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 00000000..f35e3809
--- /dev/null
+++ b/app/components/pub/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  HoverCardContent,
+
+  HoverCardPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>
diff --git a/app/components/pub/ui/hover-card/HoverCardTrigger.vue b/app/components/pub/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 00000000..b3907564
--- /dev/null
+++ b/app/components/pub/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from 'radix-vue'
+import { HoverCardTrigger } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/app/components/pub/ui/hover-card/index.ts b/app/components/pub/ui/hover-card/index.ts
new file mode 100644
index 00000000..9e4ccc2a
--- /dev/null
+++ b/app/components/pub/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
diff --git a/app/components/pub/ui/input/Input.vue b/app/components/pub/ui/input/Input.vue
new file mode 100644
index 00000000..81140b40
--- /dev/null
+++ b/app/components/pub/ui/input/Input.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>
diff --git a/app/components/pub/ui/input/index.ts b/app/components/pub/ui/input/index.ts
new file mode 100644
index 00000000..a691dd6c
--- /dev/null
+++ b/app/components/pub/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
diff --git a/app/components/pub/ui/label/Label.vue b/app/components/pub/ui/label/Label.vue
new file mode 100644
index 00000000..04232226
--- /dev/null
+++ b/app/components/pub/ui/label/Label.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { LabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Label } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/app/components/pub/ui/label/index.ts b/app/components/pub/ui/label/index.ts
new file mode 100644
index 00000000..572c2f01
--- /dev/null
+++ b/app/components/pub/ui/label/index.ts
@@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
diff --git a/app/components/pub/ui/menubar/Menubar.vue b/app/components/pub/ui/menubar/Menubar.vue
new file mode 100644
index 00000000..614a545f
--- /dev/null
+++ b/app/components/pub/ui/menubar/Menubar.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  MenubarRoot,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarRoot>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarCheckboxItem.vue b/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 00000000..f566f317
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarCheckboxItemEmits, MenubarCheckboxItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  MenubarCheckboxItem,
+
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <MenubarItemIndicator>
+        <Icon name="i-radix-icons-check" class="h-4 w-4" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarContent.vue b/app/components/pub/ui/menubar/MenubarContent.vue
new file mode 100644
index 00000000..d1de1ae9
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { MenubarContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  MenubarContent,
+
+  MenubarPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarGroup.vue b/app/components/pub/ui/menubar/MenubarGroup.vue
new file mode 100644
index 00000000..e2e79d92
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarGroup.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarGroupProps } from 'radix-vue'
+import { MenubarGroup } from 'radix-vue'
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup v-bind="props">
+    <slot />
+  </MenubarGroup>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarItem.vue b/app/components/pub/ui/menubar/MenubarItem.vue
new file mode 100644
index 00000000..e1457d60
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarItem.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarItemEmits, MenubarItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  MenubarItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarLabel.vue b/app/components/pub/ui/menubar/MenubarLabel.vue
new file mode 100644
index 00000000..34089911
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MenubarLabel } from 'radix-vue'
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+</script>
+
+<template>
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+    <slot />
+  </MenubarLabel>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarMenu.vue b/app/components/pub/ui/menubar/MenubarMenu.vue
new file mode 100644
index 00000000..3e0bc452
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarMenu.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { MenubarMenuProps } from 'radix-vue'
+import { MenubarMenu } from 'radix-vue'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu v-bind="props">
+    <slot />
+  </MenubarMenu>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarRadioGroup.vue b/app/components/pub/ui/menubar/MenubarRadioGroup.vue
new file mode 100644
index 00000000..0bc7a0a6
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarRadioGroupEmits, MenubarRadioGroupProps } from 'radix-vue'
+import {
+  MenubarRadioGroup,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<MenubarRadioGroupProps>()
+
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup v-bind="forwarded">
+    <slot />
+  </MenubarRadioGroup>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarRadioItem.vue b/app/components/pub/ui/menubar/MenubarRadioItem.vue
new file mode 100644
index 00000000..a4d72455
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarRadioItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
+      <MenubarItemIndicator>
+        <Icon name="i-radix-icons-dot-filled" class="h-4 w-4 fill-current" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSeparator.vue b/app/components/pub/ui/menubar/MenubarSeparator.vue
new file mode 100644
index 00000000..6850518e
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSeparator.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MenubarSeparator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-muted', props.class)" v-bind="forwardedProps" />
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarShortcut.vue b/app/components/pub/ui/menubar/MenubarShortcut.vue
new file mode 100644
index 00000000..0d4da921
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSub.vue b/app/components/pub/ui/menubar/MenubarSub.vue
new file mode 100644
index 00000000..f1c8395d
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSub.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from 'radix-vue'
+import { MenubarSub, useForwardPropsEmits } from 'radix-vue'
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub v-bind="forwarded">
+    <slot />
+  </MenubarSub>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSubContent.vue b/app/components/pub/ui/menubar/MenubarSubContent.vue
new file mode 100644
index 00000000..5986c7d9
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSubContent.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  MenubarPortal,
+  MenubarSubContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarSubTrigger.vue b/app/components/pub/ui/menubar/MenubarSubTrigger.vue
new file mode 100644
index 00000000..7bdbec92
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MenubarSubTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <Icon name="i-radix-icons-chevron-right" class="ml-auto h-4 w-4" />
+  </MenubarSubTrigger>
+</template>
diff --git a/app/components/pub/ui/menubar/MenubarTrigger.vue b/app/components/pub/ui/menubar/MenubarTrigger.vue
new file mode 100644
index 00000000..7538fe7a
--- /dev/null
+++ b/app/components/pub/ui/menubar/MenubarTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MenubarTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>
diff --git a/app/components/pub/ui/menubar/index.ts b/app/components/pub/ui/menubar/index.ts
new file mode 100644
index 00000000..600c23ea
--- /dev/null
+++ b/app/components/pub/ui/menubar/index.ts
@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenu.vue b/app/components/pub/ui/navigation-menu/NavigationMenu.vue
new file mode 100644
index 00000000..f7fc216c
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenu.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuRoot,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import NavigationMenuViewport from './NavigationMenuViewport.vue'
+
+const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-bind="forwarded"
+    :class="cn('relative z-10 flex max-w-max flex-1 items-center justify-center', props.class)"
+  >
+    <slot />
+    <NavigationMenuViewport />
+  </NavigationMenuRoot>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue b/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
new file mode 100644
index 00000000..e6b5060f
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuContent.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuContent,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<NavigationMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NavigationMenuContent
+    v-bind="forwarded"
+    :class="cn(
+      'left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto',
+      props.class,
+    )"
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue b/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
new file mode 100644
index 00000000..018c0868
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuIndicator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { NavigationMenuIndicator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    v-bind="forwardedProps"
+    :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
+  >
+    <div class="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuIndicator>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuItem.vue b/app/components/pub/ui/navigation-menu/NavigationMenuItem.vue
new file mode 100644
index 00000000..09e26ca2
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuItem.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from 'radix-vue'
+import { NavigationMenuItem } from 'radix-vue'
+
+const props = defineProps<NavigationMenuItemProps>()
+</script>
+
+<template>
+  <NavigationMenuItem v-bind="props">
+    <slot />
+  </NavigationMenuItem>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuLink.vue b/app/components/pub/ui/navigation-menu/NavigationMenuLink.vue
new file mode 100644
index 00000000..4179154d
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuLink.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'radix-vue'
+import {
+  NavigationMenuLink,
+
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<NavigationMenuLinkProps>()
+const emits = defineEmits<NavigationMenuLinkEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <NavigationMenuLink v-bind="forwarded">
+    <slot />
+  </NavigationMenuLink>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuList.vue b/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
new file mode 100644
index 00000000..7275908c
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuList.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { NavigationMenuList, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuList
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'group flex flex-1 list-none items-center justify-center gap-x-1',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuList>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue b/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
new file mode 100644
index 00000000..c15f094d
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuTrigger,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { navigationMenuTriggerStyle } from '.'
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    v-bind="forwardedProps"
+    :class="cn(navigationMenuTriggerStyle(), 'group', props.class)"
+  >
+    <slot />
+    <Icon
+      name="i-radix-icons-chevron-down"
+      class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue b/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
new file mode 100644
index 00000000..b6cdfc54
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/NavigationMenuViewport.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  NavigationMenuViewport,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="absolute left-0 top-full flex justify-center">
+    <NavigationMenuViewport
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
+          props.class,
+        )
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/navigation-menu/index.ts b/app/components/pub/ui/navigation-menu/index.ts
new file mode 100644
index 00000000..fd0ef971
--- /dev/null
+++ b/app/components/pub/ui/navigation-menu/index.ts
@@ -0,0 +1,12 @@
+import { cva } from 'class-variance-authority'
+
+export { default as NavigationMenu } from './NavigationMenu.vue'
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50',
+)
diff --git a/app/components/pub/ui/number-field/NumberField.vue b/app/components/pub/ui/number-field/NumberField.vue
new file mode 100644
index 00000000..020ea0bc
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberField.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5', props.class)">
+    <slot />
+  </NumberFieldRoot>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldContent.vue b/app/components/pub/ui/number-field/NumberFieldContent.vue
new file mode 100644
index 00000000..12c8d7ed
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldContent.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldDecrement.vue b/app/components/pub/ui/number-field/NumberFieldDecrement.vue
new file mode 100644
index 00000000..77fe4586
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldDecrement.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Minus } from 'lucide-vue-next'
+import { NumberFieldDecrement, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldDecrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+    <slot>
+      <Minus class="h-4 w-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldIncrement.vue b/app/components/pub/ui/number-field/NumberFieldIncrement.vue
new file mode 100644
index 00000000..e4e12f24
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldIncrement.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Plus } from 'lucide-vue-next'
+import { NumberFieldIncrement, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <NumberFieldIncrement v-bind="forwarded" :class="cn('absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3', props.class)">
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>
diff --git a/app/components/pub/ui/number-field/NumberFieldInput.vue b/app/components/pub/ui/number-field/NumberFieldInput.vue
new file mode 100644
index 00000000..2d91d9ed
--- /dev/null
+++ b/app/components/pub/ui/number-field/NumberFieldInput.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { NumberFieldInput } from 'radix-vue'
+</script>
+
+<template>
+  <NumberFieldInput :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-10 py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50')" />
+</template>
diff --git a/app/components/pub/ui/number-field/index.ts b/app/components/pub/ui/number-field/index.ts
new file mode 100644
index 00000000..5489697d
--- /dev/null
+++ b/app/components/pub/ui/number-field/index.ts
@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue'
+export { default as NumberFieldContent } from './NumberFieldContent.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
diff --git a/app/components/pub/ui/pagination/PaginationEllipsis.vue b/app/components/pub/ui/pagination/PaginationEllipsis.vue
new file mode 100644
index 00000000..b26177c9
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationEllipsis.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PaginationEllipsisProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { PaginationEllipsis } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationEllipsis v-bind="delegatedProps" :class="cn('w-9 h-9 flex items-center justify-center', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-dots-horizontal" />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationFirst.vue b/app/components/pub/ui/pagination/PaginationFirst.vue
new file mode 100644
index 00000000..af1caf2b
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationFirst.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PaginationFirstProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { PaginationFirst } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <Icon name="i-radix-icons-double-arrow-left" />
+      </slot>
+    </Button>
+  </PaginationFirst>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationLast.vue b/app/components/pub/ui/pagination/PaginationLast.vue
new file mode 100644
index 00000000..fc4cea8d
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationLast.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PaginationLastProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { PaginationLast } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <Icon name="i-radix-icons-double-arrow-right" />
+      </slot>
+    </Button>
+  </PaginationLast>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationNext.vue b/app/components/pub/ui/pagination/PaginationNext.vue
new file mode 100644
index 00000000..24203dfb
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationNext.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PaginationNextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { PaginationNext } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <Icon name="i-radix-icons-chevron-right" />
+      </slot>
+    </Button>
+  </PaginationNext>
+</template>
diff --git a/app/components/pub/ui/pagination/PaginationPrev.vue b/app/components/pub/ui/pagination/PaginationPrev.vue
new file mode 100644
index 00000000..81fe1be0
--- /dev/null
+++ b/app/components/pub/ui/pagination/PaginationPrev.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { PaginationPrevProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import {
+  Button,
+} from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { PaginationPrev } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+      <slot>
+        <Icon name="i-radix-icons-chevron-left" />
+      </slot>
+    </Button>
+  </PaginationPrev>
+</template>
diff --git a/app/components/pub/ui/pagination/index.ts b/app/components/pub/ui/pagination/index.ts
new file mode 100644
index 00000000..3a0b1817
--- /dev/null
+++ b/app/components/pub/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
+export { default as PaginationFirst } from './PaginationFirst.vue'
+export { default as PaginationLast } from './PaginationLast.vue'
+export { default as PaginationNext } from './PaginationNext.vue'
+export { default as PaginationPrev } from './PaginationPrev.vue'
+export {
+  PaginationRoot as Pagination,
+  PaginationList,
+  PaginationListItem,
+} from 'radix-vue'
diff --git a/app/components/pub/ui/pin-input/PinInput.vue b/app/components/pub/ui/pin-input/PinInput.vue
new file mode 100644
index 00000000..1152b78b
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInput.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { PinInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: () => [],
+})
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot v-bind="forwarded" :class="cn('flex gap-2 items-center', props.class)">
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/app/components/pub/ui/pin-input/PinInputGroup.vue b/app/components/pub/ui/pin-input/PinInputGroup.vue
new file mode 100644
index 00000000..7b008a5f
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInputGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps" :class="cn('flex items-center', props.class)">
+    <slot />
+  </primitive>
+</template>
diff --git a/app/components/pub/ui/pin-input/PinInputInput.vue b/app/components/pub/ui/pin-input/PinInputInput.vue
new file mode 100644
index 00000000..5091e777
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInputInput.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PinInputInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { PinInputInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput v-bind="forwardedProps" :class="cn('relative text-center bg-background focus:outline-none focus:ring-2 focus:ring-ring focus:relative focus:z-10 flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md', props.class)" />
+</template>
diff --git a/app/components/pub/ui/pin-input/PinInputSeparator.vue b/app/components/pub/ui/pin-input/PinInputSeparator.vue
new file mode 100644
index 00000000..2ffeb810
--- /dev/null
+++ b/app/components/pub/ui/pin-input/PinInputSeparator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import { Primitive, useForwardProps } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <Icon name="i-radix-icons-dash" />
+    </slot>
+  </primitive>
+</template>
diff --git a/app/components/pub/ui/pin-input/index.ts b/app/components/pub/ui/pin-input/index.ts
new file mode 100644
index 00000000..e645e414
--- /dev/null
+++ b/app/components/pub/ui/pin-input/index.ts
@@ -0,0 +1,4 @@
+export { default as PinInput } from './PinInput.vue'
+export { default as PinInputGroup } from './PinInputGroup.vue'
+export { default as PinInputInput } from './PinInputInput.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
diff --git a/app/components/pub/ui/popover/Popover.vue b/app/components/pub/ui/popover/Popover.vue
new file mode 100644
index 00000000..da5f7096
--- /dev/null
+++ b/app/components/pub/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/app/components/pub/ui/popover/PopoverContent.vue b/app/components/pub/ui/popover/PopoverContent.vue
new file mode 100644
index 00000000..665efa30
--- /dev/null
+++ b/app/components/pub/ui/popover/PopoverContent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  PopoverContent,
+
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/app/components/pub/ui/popover/PopoverTrigger.vue b/app/components/pub/ui/popover/PopoverTrigger.vue
new file mode 100644
index 00000000..6c944497
--- /dev/null
+++ b/app/components/pub/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'radix-vue'
+import { PopoverTrigger } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/app/components/pub/ui/popover/index.ts b/app/components/pub/ui/popover/index.ts
new file mode 100644
index 00000000..c621f9b1
--- /dev/null
+++ b/app/components/pub/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
diff --git a/app/components/pub/ui/progress/Progress.vue b/app/components/pub/ui/progress/Progress.vue
new file mode 100644
index 00000000..0a1e90af
--- /dev/null
+++ b/app/components/pub/ui/progress/Progress.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ProgressRoot
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      class="h-full w-full flex-1 bg-primary transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
diff --git a/app/components/pub/ui/progress/index.ts b/app/components/pub/ui/progress/index.ts
new file mode 100644
index 00000000..eace9893
--- /dev/null
+++ b/app/components/pub/ui/progress/index.ts
@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'
diff --git a/app/components/pub/ui/radio-group/RadioGroup.vue b/app/components/pub/ui/radio-group/RadioGroup.vue
new file mode 100644
index 00000000..7fbcf9b8
--- /dev/null
+++ b/app/components/pub/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
diff --git a/app/components/pub/ui/radio-group/RadioGroupItem.vue b/app/components/pub/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 00000000..57d452b9
--- /dev/null
+++ b/app/components/pub/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <Icon name="i-radix-icons-check" class="h-3.5 w-3.5 fill-primary" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/app/components/pub/ui/radio-group/index.ts b/app/components/pub/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa1da9c2
--- /dev/null
+++ b/app/components/pub/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/app/components/pub/ui/range-calendar/RangeCalendar.vue b/app/components/pub/ui/range-calendar/RangeCalendar.vue
new file mode 100644
index 00000000..631d5780
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendar.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { RangeCalendarRootEmits, RangeCalendarRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
+
+const props = defineProps<RangeCalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<RangeCalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RangeCalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <RangeCalendarHeader>
+      <RangeCalendarPrevButton />
+      <RangeCalendarHeading />
+      <RangeCalendarNextButton />
+    </RangeCalendarHeader>
+
+    <div class="mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <RangeCalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <RangeCalendarGridHead>
+          <RangeCalendarGridRow>
+            <RangeCalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </RangeCalendarHeadCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridHead>
+        <RangeCalendarGridBody>
+          <RangeCalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <RangeCalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <RangeCalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </RangeCalendarCell>
+          </RangeCalendarGridRow>
+        </RangeCalendarGridBody>
+      </RangeCalendarGrid>
+    </div>
+  </RangeCalendarRoot>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarCell.vue b/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
new file mode 100644
index 00000000..b6f9a1cc
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarCell.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RangeCalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCell
+    :class="cn('relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:bg-accent first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-outside-month])]:bg-accent/50 [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCell>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue b/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
new file mode 100644
index 00000000..5c8aaef1
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarCellTrigger.vue
@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import type { RangeCalendarCellTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarCellTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-9 w-9 p-0 font-normal data-[selected]:opacity-100',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selection Start
+      'data-[selection-start]:bg-primary data-[selection-start]:text-primary-foreground data-[selection-start]:hover:bg-primary data-[selection-start]:hover:text-primary-foreground data-[selection-start]:focus:bg-primary data-[selection-start]:focus:text-primary-foreground',
+      // Selection End
+      'data-[selection-end]:bg-primary data-[selection-end]:text-primary-foreground data-[selection-end]:hover:bg-primary data-[selection-end]:hover:text-primary-foreground data-[selection-end]:focus:bg-primary data-[selection-end]:focus:text-primary-foreground',
+      // Outside months
+      'data-[outside-month]:pointer-events-none data-[outside-month]:text-muted-foreground data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground [&[data-outside-month][data-selected]]:opacity-30',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarCellTrigger>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue b/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
new file mode 100644
index 00000000..9a1295c5
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGrid.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarGrid, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RangeCalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </RangeCalendarGrid>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridBody.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridBody.vue
new file mode 100644
index 00000000..b841dd99
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridBody.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridBodyProps } from 'radix-vue'
+import { RangeCalendarGridBody } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridBodyProps>()
+</script>
+
+<template>
+  <RangeCalendarGridBody v-bind="props">
+    <slot />
+  </RangeCalendarGridBody>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridHead.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridHead.vue
new file mode 100644
index 00000000..6e2bcec7
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridHeadProps } from 'radix-vue'
+import { RangeCalendarGridHead } from 'radix-vue'
+
+const props = defineProps<RangeCalendarGridHeadProps>()
+</script>
+
+<template>
+  <RangeCalendarGridHead v-bind="props">
+    <slot />
+  </RangeCalendarGridHead>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue b/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
new file mode 100644
index 00000000..fad16899
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarGridRow.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarGridRowProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarGridRow, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RangeCalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarGridRow :class="cn('flex mt-2 w-full', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarGridRow>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
new file mode 100644
index 00000000..92769853
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeadCell.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadCellProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarHeadCell, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RangeCalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeadCell>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
new file mode 100644
index 00000000..b99648f5
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeaderProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarHeader, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RangeCalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </RangeCalendarHeader>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue b/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
new file mode 100644
index 00000000..0f592bc5
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarHeading.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { RangeCalendarHeadingProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { RangeCalendarHeading, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<RangeCalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </RangeCalendarHeading>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue b/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
new file mode 100644
index 00000000..201151cb
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarNextButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { RangeCalendarNextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import { RangeCalendarNext, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </RangeCalendarNext>
+</template>
diff --git a/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue b/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
new file mode 100644
index 00000000..503ce5cb
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/RangeCalendarPrevButton.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { RangeCalendarPrevProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronLeft } from 'lucide-vue-next'
+import { RangeCalendarPrev, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+import { buttonVariants } from '../button'
+
+const props = defineProps<RangeCalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RangeCalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeft class="h-4 w-4" />
+    </slot>
+  </RangeCalendarPrev>
+</template>
diff --git a/app/components/pub/ui/range-calendar/index.ts b/app/components/pub/ui/range-calendar/index.ts
new file mode 100644
index 00000000..7ba1637e
--- /dev/null
+++ b/app/components/pub/ui/range-calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as RangeCalendar } from './RangeCalendar.vue'
+export { default as RangeCalendarCell } from './RangeCalendarCell.vue'
+export { default as RangeCalendarCellTrigger } from './RangeCalendarCellTrigger.vue'
+export { default as RangeCalendarGrid } from './RangeCalendarGrid.vue'
+export { default as RangeCalendarGridBody } from './RangeCalendarGridBody.vue'
+export { default as RangeCalendarGridHead } from './RangeCalendarGridHead.vue'
+export { default as RangeCalendarGridRow } from './RangeCalendarGridRow.vue'
+export { default as RangeCalendarHeadCell } from './RangeCalendarHeadCell.vue'
+export { default as RangeCalendarHeader } from './RangeCalendarHeader.vue'
+export { default as RangeCalendarHeading } from './RangeCalendarHeading.vue'
+export { default as RangeCalendarNextButton } from './RangeCalendarNextButton.vue'
+export { default as RangeCalendarPrevButton } from './RangeCalendarPrevButton.vue'
diff --git a/app/components/pub/ui/resizable/ResizableHandle.vue b/app/components/pub/ui/resizable/ResizableHandle.vue
new file mode 100644
index 00000000..7b57f64d
--- /dev/null
+++ b/app/components/pub/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { GripVertical } from 'lucide-vue-next'
+import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 h-4 w-3 flex items-center justify-center border rounded-sm bg-border">
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/app/components/pub/ui/resizable/ResizablePanelGroup.vue b/app/components/pub/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 00000000..397c0b1d
--- /dev/null
+++ b/app/components/pub/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SplitterGroup, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/app/components/pub/ui/resizable/index.ts b/app/components/pub/ui/resizable/index.ts
new file mode 100644
index 00000000..605e8106
--- /dev/null
+++ b/app/components/pub/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'
diff --git a/app/components/pub/ui/scroll-area/ScrollArea.vue b/app/components/pub/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 00000000..46a132cf
--- /dev/null
+++ b/app/components/pub/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+
+  ScrollAreaViewport,
+} from 'radix-vue'
+import { computed } from 'vue'
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/app/components/pub/ui/scroll-area/ScrollBar.vue b/app/components/pub/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 00000000..fadaf9ef
--- /dev/null
+++ b/app/components/pub/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/app/components/pub/ui/scroll-area/index.ts b/app/components/pub/ui/scroll-area/index.ts
new file mode 100644
index 00000000..2bd4fae5
--- /dev/null
+++ b/app/components/pub/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/app/components/pub/ui/select/Select.vue b/app/components/pub/ui/select/Select.vue
new file mode 100644
index 00000000..adc42fdf
--- /dev/null
+++ b/app/components/pub/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/app/components/pub/ui/select/SelectContent.vue b/app/components/pub/ui/select/SelectContent.vue
new file mode 100644
index 00000000..d06ac835
--- /dev/null
+++ b/app/components/pub/ui/select/SelectContent.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  SelectContent,
+
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/app/components/pub/ui/select/SelectGroup.vue b/app/components/pub/ui/select/SelectGroup.vue
new file mode 100644
index 00000000..ef6b3c15
--- /dev/null
+++ b/app/components/pub/ui/select/SelectGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectGroup } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/app/components/pub/ui/select/SelectItem.vue b/app/components/pub/ui/select/SelectItem.vue
new file mode 100644
index 00000000..f1c81907
--- /dev/null
+++ b/app/components/pub/ui/select/SelectItem.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  SelectItem,
+  SelectItemIndicator,
+
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 h-3.5 w-3.5 flex items-center justify-center">
+      <SelectItemIndicator>
+        <Icon name="i-radix-icons-check" class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/app/components/pub/ui/select/SelectItemText.vue b/app/components/pub/ui/select/SelectItemText.vue
new file mode 100644
index 00000000..a8db38b4
--- /dev/null
+++ b/app/components/pub/ui/select/SelectItemText.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'radix-vue'
+import { SelectItemText } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/app/components/pub/ui/select/SelectLabel.vue b/app/components/pub/ui/select/SelectLabel.vue
new file mode 100644
index 00000000..4869948e
--- /dev/null
+++ b/app/components/pub/ui/select/SelectLabel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectLabel } from 'radix-vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/app/components/pub/ui/select/SelectScrollDownButton.vue b/app/components/pub/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 00000000..345134e5
--- /dev/null
+++ b/app/components/pub/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-chevron-down" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/app/components/pub/ui/select/SelectScrollUpButton.vue b/app/components/pub/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 00000000..5e369815
--- /dev/null
+++ b/app/components/pub/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-chevron-up" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/app/components/pub/ui/select/SelectSeparator.vue b/app/components/pub/ui/select/SelectSeparator.vue
new file mode 100644
index 00000000..79987f54
--- /dev/null
+++ b/app/components/pub/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectSeparator } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
new file mode 100644
index 00000000..cfcf80b4
--- /dev/null
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <Icon name="i-radix-icons-caret-sort" class="h-4 w-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/app/components/pub/ui/select/SelectValue.vue b/app/components/pub/ui/select/SelectValue.vue
new file mode 100644
index 00000000..6f37eb55
--- /dev/null
+++ b/app/components/pub/ui/select/SelectValue.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'radix-vue'
+import { SelectValue } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/app/components/pub/ui/select/index.ts b/app/components/pub/ui/select/index.ts
new file mode 100644
index 00000000..31b92946
--- /dev/null
+++ b/app/components/pub/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
diff --git a/app/components/pub/ui/separator/Separator.vue b/app/components/pub/ui/separator/Separator.vue
new file mode 100644
index 00000000..b1a98f14
--- /dev/null
+++ b/app/components/pub/ui/separator/Separator.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Separator } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-sm text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+        )
+      "
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/app/components/pub/ui/separator/index.ts b/app/components/pub/ui/separator/index.ts
new file mode 100644
index 00000000..2287bcb9
--- /dev/null
+++ b/app/components/pub/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/app/components/pub/ui/sheet/Sheet.vue b/app/components/pub/ui/sheet/Sheet.vue
new file mode 100644
index 00000000..5f6a5632
--- /dev/null
+++ b/app/components/pub/ui/sheet/Sheet.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetClose.vue b/app/components/pub/ui/sheet/SheetClose.vue
new file mode 100644
index 00000000..1fa61805
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'radix-vue'
+import { DialogClose } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetContent.vue b/app/components/pub/ui/sheet/SheetContent.vue
new file mode 100644
index 00000000..a8561bfb
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetContent.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { SheetVariants } from '.'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+  VisuallyHidden,
+} from 'radix-vue'
+import { computed } from 'vue'
+import { sheetVariants } from '.'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/80 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <VisuallyHidden as-child>
+        <DialogDescription aria-describedby="undefined" />
+      </VisuallyHidden>
+
+      <slot />
+
+      <DialogClose
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity disabled:pointer-events-none data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring"
+      >
+        <X class="h-4 w-4 text-muted-foreground" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetDescription.vue b/app/components/pub/ui/sheet/SheetDescription.vue
new file mode 100644
index 00000000..06b21bba
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetDescription.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DialogDescription } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetFooter.vue b/app/components/pub/ui/sheet/SheetFooter.vue
new file mode 100644
index 00000000..ac2d0c18
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetHeader.vue b/app/components/pub/ui/sheet/SheetHeader.vue
new file mode 100644
index 00000000..541f48f5
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetTitle.vue b/app/components/pub/ui/sheet/SheetTitle.vue
new file mode 100644
index 00000000..b1661957
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetTitle.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DialogTitle } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/app/components/pub/ui/sheet/SheetTrigger.vue b/app/components/pub/ui/sheet/SheetTrigger.vue
new file mode 100644
index 00000000..b966b29d
--- /dev/null
+++ b/app/components/pub/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'radix-vue'
+import { DialogTrigger } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/app/components/pub/ui/sheet/index.ts b/app/components/pub/ui/sheet/index.ts
new file mode 100644
index 00000000..603fa39d
--- /dev/null
+++ b/app/components/pub/ui/sheet/index.ts
@@ -0,0 +1,32 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/app/components/pub/ui/sidebar/Sidebar.vue b/app/components/pub/ui/sidebar/Sidebar.vue
new file mode 100644
index 00000000..8a0c8bc8
--- /dev/null
+++ b/app/components/pub/ui/sidebar/Sidebar.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Sheet from '@/components/pub/ui/sheet/Sheet.vue'
+import SheetContent from '@/components/pub/ui/sheet/SheetContent.vue'
+import { cn } from '@/lib/utils'
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<{
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    side: 'left',
+    variant: 'sidebar',
+    collapsible: 'offcanvas',
+  }
+)
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+</script>
+
+<template>
+  <div
+    v-if="collapsible === 'none'"
+    :class="cn('bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col', props.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+
+  <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+    <SheetContent
+      data-sidebar="sidebar"
+      data-mobile="true"
+      :side="side"
+      class="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+      }"
+    >
+      <div class="flex h-full w-full flex-col">
+        <slot />
+      </div>
+    </SheetContent>
+  </Sheet>
+
+  <div
+    v-else
+    class="group peer hidden md:block"
+    :data-state="state"
+    :data-collapsible="state === 'collapsed' ? collapsible : ''"
+    :data-variant="variant"
+    :data-side="side"
+  >
+    <!-- This is what handles the sidebar gap on desktop  -->
+    <div
+      :class="
+        cn(
+          'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem)]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+        )
+      "
+    />
+    <div
+      :class="
+        cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_1rem_+_2px)]'
+            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          props.class
+        )
+      "
+      v-bind="$attrs"
+    >
+      <div
+        data-sidebar="sidebar"
+        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarContent.vue b/app/components/pub/ui/sidebar/SidebarContent.vue
new file mode 100644
index 00000000..4b6244a4
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="content"
+    :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarFooter.vue b/app/components/pub/ui/sidebar/SidebarFooter.vue
new file mode 100644
index 00000000..9d145c05
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarFooter.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="footer"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroup.vue b/app/components/pub/ui/sidebar/SidebarGroup.vue
new file mode 100644
index 00000000..adc6843c
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroup.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group"
+    :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroupAction.vue b/app/components/pub/ui/sidebar/SidebarGroupAction.vue
new file mode 100644
index 00000000..74cac4ea
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroupAction.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-action"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroupContent.vue b/app/components/pub/ui/sidebar/SidebarGroupContent.vue
new file mode 100644
index 00000000..37390c93
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroupContent.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="group-content"
+    :class="cn('w-full text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarGroupLabel.vue b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
new file mode 100644
index 00000000..83826c3e
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarGroupLabel.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps & {
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="group-label"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(
+      'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarHeader.vue b/app/components/pub/ui/sidebar/SidebarHeader.vue
new file mode 100644
index 00000000..eecaddb2
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarHeader.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="header"
+    :class="cn('flex flex-col gap-2 p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarInput.vue b/app/components/pub/ui/sidebar/SidebarInput.vue
new file mode 100644
index 00000000..e38d141e
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarInput.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Input from '@/components/pub/ui/input/Input.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Input
+    data-sidebar="input"
+    :class="
+      cn('bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2', props.class)
+    "
+  >
+    <slot />
+  </Input>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarInset.vue b/app/components/pub/ui/sidebar/SidebarInset.vue
new file mode 100644
index 00000000..cc7d45dc
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarInset.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <main
+    :class="cn(
+      'overflow-x-auto relative flex min-h-svh flex-1 flex-col bg-background',
+      'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset][&>header]:rounded-t-xl md:peer-data-[variant=inset]:shadow',
+      props.class,
+    )"
+  >
+    <slot />
+  </main>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenu.vue b/app/components/pub/ui/sidebar/SidebarMenu.vue
new file mode 100644
index 00000000..3bfd73e6
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenu.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu"
+    :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuAction.vue b/app/components/pub/ui/sidebar/SidebarMenuAction.vue
new file mode 100644
index 00000000..cc6ced01
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuAction.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  showOnHover?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-action"
+    :class="cn(
+      'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+      // Increases the hit area of the button on mobile.
+      'after:absolute after:-inset-2 after:md:hidden',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      showOnHover
+        && 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+      props.class,
+    )"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuBadge.vue b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
new file mode 100644
index 00000000..f8789687
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuBadge.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-sidebar="menu-badge"
+    :class="cn(
+      'absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuButton.vue b/app/components/pub/ui/sidebar/SidebarMenuButton.vue
new file mode 100644
index 00000000..e97c8fa6
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuButton.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue'
+import Tooltip from '@/components/pub/ui/tooltip/Tooltip.vue'
+import TooltipContent from '@/components/pub/ui/tooltip/TooltipContent.vue'
+import TooltipTrigger from '@/components/pub/ui/tooltip/TooltipTrigger.vue'
+import { computed } from 'vue'
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue'
+import { useSidebar } from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<
+    SidebarMenuButtonProps & {
+      tooltip?: string | Component
+    }
+  >(),
+  {
+    as: 'button',
+    variant: 'default',
+    size: 'default',
+  }
+)
+
+const { isMobile, state } = useSidebar()
+
+const delegatedProps = computed(() => {
+  const { tooltip, ...delegated } = props
+  return delegated
+})
+</script>
+
+<template>
+  <SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+    <slot />
+  </SidebarMenuButtonChild>
+
+  <Tooltip v-else>
+    <TooltipTrigger as-child>
+      <SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+        <slot />
+      </SidebarMenuButtonChild>
+    </TooltipTrigger>
+    <TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+      <template v-if="typeof tooltip === 'string'">
+        {{ tooltip }}
+      </template>
+      <component :is="tooltip" v-else />
+    </TooltipContent>
+  </Tooltip>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue b/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
new file mode 100644
index 00000000..43bea5eb
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuButtonChild.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { SidebarMenuButtonVariants } from '.'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+import { sidebarMenuButtonVariants } from '.'
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+  variant?: SidebarMenuButtonVariants['variant']
+  size?: SidebarMenuButtonVariants['size']
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+  as: 'button',
+  variant: 'default',
+  size: 'default',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)"
+    :as="as"
+    :as-child="asChild"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuItem.vue b/app/components/pub/ui/sidebar/SidebarMenuItem.vue
new file mode 100644
index 00000000..b6000734
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuItem.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    data-sidebar="menu-item"
+    :class="cn('group/menu-item relative', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSkeleton.vue b/app/components/pub/ui/sidebar/SidebarMenuSkeleton.vue
new file mode 100644
index 00000000..3011fb0f
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSkeleton.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+import Skeleton from '@/components/pub/ui/skeleton/Skeleton.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  showIcon?: boolean
+  class?: HTMLAttributes['class']
+}>()
+
+const width = computed(() => {
+  return `${Math.floor(Math.random() * 40) + 50}%`
+})
+</script>
+
+<template>
+  <div data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
+    <Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+    <Skeleton
+      class="h-4 max-w-[--skeleton-width] flex-1"
+      data-sidebar="menu-skeleton-text"
+      :style="{ '--skeleton-width': width }"
+    />
+  </div>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSub.vue b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
new file mode 100644
index 00000000..0bb5af79
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSub.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ul
+    data-sidebar="menu-badge"
+    :class="cn(
+      'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
new file mode 100644
index 00000000..353b3ae7
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSubButton.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Primitive } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & {
+  size?: 'sm' | 'md'
+  isActive?: boolean
+  class?: HTMLAttributes['class']
+}>(), {
+  as: 'a',
+  size: 'md',
+})
+</script>
+
+<template>
+  <Primitive
+    data-sidebar="menu-sub-button"
+    :as="as"
+    :as-child="asChild"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+      'aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      size === 'sm' && 'text-xs',
+      size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarMenuSubItem.vue b/app/components/pub/ui/sidebar/SidebarMenuSubItem.vue
new file mode 100644
index 00000000..b04030b0
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarMenuSubItem.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <li>
+    <slot />
+  </li>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarProvider.vue b/app/components/pub/ui/sidebar/SidebarProvider.vue
new file mode 100644
index 00000000..d252f951
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarProvider.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import type { AppConfigInput } from 'nuxt/schema'
+import type { HTMLAttributes, Ref } from 'vue'
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core'
+import { TooltipProvider } from 'radix-vue'
+import { computed, ref } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  provideSidebarContext,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './utils'
+
+const props = withDefaults(
+  defineProps<{
+    defaultOpen?: boolean
+    open?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    defaultOpen: true,
+    open: undefined,
+  }
+)
+
+const emits = defineEmits<{
+  'update:open': [open: boolean]
+}>()
+
+const isMobile = useMediaQuery('(max-width: 768px)')
+const openMobile = ref(false)
+
+const open = useVModel(props, 'open', emits, {
+  defaultValue: props.defaultOpen ?? false,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>
+
+function setOpen(value: boolean) {
+  open.value = value // emits('update:open', value)
+
+  // This sets the cookie to keep the sidebar state.
+  document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+}
+
+function setOpenMobile(value: boolean) {
+  openMobile.value = value
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+  return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value)
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+})
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'))
+
+const sidebar = {
+  collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
+  side: 'left', // 'left' | 'right'
+  variant: 'sidebar', // 'sidebar' | 'floating' | 'inset'
+}
+
+provideSidebarContext({
+  state,
+  open,
+  setOpen,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  toggleSidebar,
+})
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <div
+      :style="{
+        '--sidebar-width': SIDEBAR_WIDTH,
+        '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+      }"
+      :class="
+        cn(
+          `group/sidebar-wrapper text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full`,
+          [props.class, sidebar?.side === 'right' ? 'flex-row-reverse' : '']
+        )
+      "
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarRail.vue b/app/components/pub/ui/sidebar/SidebarRail.vue
new file mode 100644
index 00000000..9b644cdd
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarRail.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <button
+    data-sidebar="rail"
+    aria-label="Toggle Sidebar"
+    :tabindex="-1"
+    title="Toggle Sidebar"
+    :class="cn(
+      'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+      '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarSeparator.vue b/app/components/pub/ui/sidebar/SidebarSeparator.vue
new file mode 100644
index 00000000..d4ef82fa
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarSeparator.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import Separator from '@/components/pub/ui/separator/Separator.vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Separator data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+    <slot />
+  </Separator>
+</template>
diff --git a/app/components/pub/ui/sidebar/SidebarTrigger.vue b/app/components/pub/ui/sidebar/SidebarTrigger.vue
new file mode 100644
index 00000000..cf4937e7
--- /dev/null
+++ b/app/components/pub/ui/sidebar/SidebarTrigger.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { PanelLeft } from 'lucide-vue-next'
+import Button from '@/components/pub/ui/button/Button.vue'
+import { cn } from '@/lib/utils'
+import { useSidebar } from './utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button data-sidebar="trigger" variant="ghost" size="icon" :class="cn('h-4 w-4', props.class)" @click="toggleSidebar">
+    <PanelLeft />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>
diff --git a/app/components/pub/ui/sidebar/index.ts b/app/components/pub/ui/sidebar/index.ts
new file mode 100644
index 00000000..a6de2196
--- /dev/null
+++ b/app/components/pub/ui/sidebar/index.ts
@@ -0,0 +1,52 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+export { default as SidebarTrigger } from './SidebarTrigger.vue'
+
+export { useSidebar } from './utils'
+
+export const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-[current=page]:bg-sidebar-accent aria-[current=page]:font-medium aria-[current=page]:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>
diff --git a/app/components/pub/ui/sidebar/utils.ts b/app/components/pub/ui/sidebar/utils.ts
new file mode 100644
index 00000000..3ded66c4
--- /dev/null
+++ b/app/components/pub/ui/sidebar/utils.ts
@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue'
+import { createContext } from 'radix-vue'
+
+export const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: Ref<boolean>
+  setOpen: (value: boolean) => void
+  isMobile: Ref<boolean>
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  toggleSidebar: () => void
+}>('Sidebar')
diff --git a/app/components/pub/ui/skeleton/Skeleton.vue b/app/components/pub/ui/skeleton/Skeleton.vue
new file mode 100644
index 00000000..94bc183a
--- /dev/null
+++ b/app/components/pub/ui/skeleton/Skeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
+</template>
diff --git a/app/components/pub/ui/skeleton/index.ts b/app/components/pub/ui/skeleton/index.ts
new file mode 100644
index 00000000..be21fad3
--- /dev/null
+++ b/app/components/pub/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/app/components/pub/ui/slider/Slider.vue b/app/components/pub/ui/slider/Slider.vue
new file mode 100644
index 00000000..b56a323c
--- /dev/null
+++ b/app/components/pub/ui/slider/Slider.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    :class="cn(
+      'relative flex w-full touch-none select-none items-center',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderRange class="absolute h-full bg-primary" />
+    </SliderTrack>
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      class="block h-5 w-5 border-2 border-primary rounded-full bg-background ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
+    />
+  </SliderRoot>
+</template>
diff --git a/app/components/pub/ui/slider/index.ts b/app/components/pub/ui/slider/index.ts
new file mode 100644
index 00000000..1c945deb
--- /dev/null
+++ b/app/components/pub/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'
diff --git a/app/components/pub/ui/sonner/Sonner.vue b/app/components/pub/ui/sonner/Sonner.vue
new file mode 100644
index 00000000..bd67f874
--- /dev/null
+++ b/app/components/pub/ui/sonner/Sonner.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+import { Toaster as Sonner } from 'vue-sonner'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="group toaster"
+    v-bind="props"
+    :toast-options="{
+      classes: {
+        toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton:
+          'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+        cancelButton:
+          'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+      },
+    }"
+  />
+</template>
diff --git a/app/components/pub/ui/sonner/index.ts b/app/components/pub/ui/sonner/index.ts
new file mode 100644
index 00000000..8d3d4062
--- /dev/null
+++ b/app/components/pub/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Sonner } from './Sonner.vue'
diff --git a/app/components/pub/ui/stepper/Stepper.vue b/app/components/pub/ui/stepper/Stepper.vue
new file mode 100644
index 00000000..a9bb7826
--- /dev/null
+++ b/app/components/pub/ui/stepper/Stepper.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperRootEmits, StepperRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<StepperRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <StepperRoot
+    v-slot="slotProps"
+    :class="cn(
+      'flex gap-2',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </StepperRoot>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperDescription.vue b/app/components/pub/ui/stepper/StepperDescription.vue
new file mode 100644
index 00000000..dbf68040
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperDescription.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { StepperDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperDescription, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-xs text-muted-foreground', props.class)">
+    <slot v-bind="slotProps" />
+  </StepperDescription>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperIndicator.vue b/app/components/pub/ui/stepper/StepperIndicator.vue
new file mode 100644
index 00000000..75e3751c
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperIndicator.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import type { StepperIndicatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperIndicator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperIndicator
+    v-bind="forwarded"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-8 h-8',
+      // Disabled
+      'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+      // Active
+      'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+      // Completed
+      'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperIndicator>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperItem.vue b/app/components/pub/ui/stepper/StepperItem.vue
new file mode 100644
index 00000000..1d3b9450
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperItem.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { StepperItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperItem
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </StepperItem>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperSeparator.vue b/app/components/pub/ui/stepper/StepperSeparator.vue
new file mode 100644
index 00000000..50e9b131
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperSeparator.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import type { StepperSeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperSeparator, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperSeparator
+    v-bind="forwarded"
+    :class="cn(
+      'bg-muted',
+      // Disabled
+      'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+      // Completed
+      'group-data-[state=completed]:bg-accent-foreground',
+      props.class,
+    )"
+  />
+</template>
diff --git a/app/components/pub/ui/stepper/StepperTitle.vue b/app/components/pub/ui/stepper/StepperTitle.vue
new file mode 100644
index 00000000..70e672c9
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperTitle.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { StepperTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperTitle, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+    <slot />
+  </StepperTitle>
+</template>
diff --git a/app/components/pub/ui/stepper/StepperTrigger.vue b/app/components/pub/ui/stepper/StepperTrigger.vue
new file mode 100644
index 00000000..0c426da1
--- /dev/null
+++ b/app/components/pub/ui/stepper/StepperTrigger.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { StepperTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+
+import { cn } from '@/lib/utils'
+import { StepperTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <StepperTrigger
+    v-bind="forwarded"
+    :class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
+  >
+    <slot />
+  </StepperTrigger>
+</template>
diff --git a/app/components/pub/ui/stepper/index.ts b/app/components/pub/ui/stepper/index.ts
new file mode 100644
index 00000000..a4065a57
--- /dev/null
+++ b/app/components/pub/ui/stepper/index.ts
@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
diff --git a/app/components/pub/ui/switch/Switch.vue b/app/components/pub/ui/switch/Switch.vue
new file mode 100644
index 00000000..bb9c199a
--- /dev/null
+++ b/app/components/pub/ui/switch/Switch.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import {
+  SwitchRoot,
+
+  SwitchThumb,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+    />
+  </SwitchRoot>
+</template>
diff --git a/app/components/pub/ui/switch/index.ts b/app/components/pub/ui/switch/index.ts
new file mode 100644
index 00000000..87b4b17d
--- /dev/null
+++ b/app/components/pub/ui/switch/index.ts
@@ -0,0 +1 @@
+export { default as Switch } from './Switch.vue'
diff --git a/app/components/pub/ui/table/Table.vue b/app/components/pub/ui/table/Table.vue
new file mode 100644
index 00000000..4d5412cf
--- /dev/null
+++ b/app/components/pub/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-x-auto">
+    <table :class="cn('min-w-full table-fixed caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/app/components/pub/ui/table/TableBody.vue b/app/components/pub/ui/table/TableBody.vue
new file mode 100644
index 00000000..ab7a937d
--- /dev/null
+++ b/app/components/pub/ui/table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/app/components/pub/ui/table/TableCaption.vue b/app/components/pub/ui/table/TableCaption.vue
new file mode 100644
index 00000000..3904c563
--- /dev/null
+++ b/app/components/pub/ui/table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/app/components/pub/ui/table/TableCell.vue b/app/components/pub/ui/table/TableCell.vue
new file mode 100644
index 00000000..4a4da400
--- /dev/null
+++ b/app/components/pub/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-4 align-middle [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/app/components/pub/ui/table/TableEmpty.vue b/app/components/pub/ui/table/TableEmpty.vue
new file mode 100644
index 00000000..6576cdde
--- /dev/null
+++ b/app/components/pub/ui/table/TableEmpty.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { computed } from 'vue'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/app/components/pub/ui/table/TableFooter.vue b/app/components/pub/ui/table/TableFooter.vue
new file mode 100644
index 00000000..693a4386
--- /dev/null
+++ b/app/components/pub/ui/table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/app/components/pub/ui/table/TableHead.vue b/app/components/pub/ui/table/TableHead.vue
new file mode 100644
index 00000000..e882b608
--- /dev/null
+++ b/app/components/pub/ui/table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/app/components/pub/ui/table/TableHeader.vue b/app/components/pub/ui/table/TableHeader.vue
new file mode 100644
index 00000000..220352f6
--- /dev/null
+++ b/app/components/pub/ui/table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/app/components/pub/ui/table/TableRow.vue b/app/components/pub/ui/table/TableRow.vue
new file mode 100644
index 00000000..5b9e8749
--- /dev/null
+++ b/app/components/pub/ui/table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/app/components/pub/ui/table/index.ts b/app/components/pub/ui/table/index.ts
new file mode 100644
index 00000000..5bfa3862
--- /dev/null
+++ b/app/components/pub/ui/table/index.ts
@@ -0,0 +1,8 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
diff --git a/app/components/pub/ui/table/separator/Separator.vue b/app/components/pub/ui/table/separator/Separator.vue
new file mode 100644
index 00000000..ac098256
--- /dev/null
+++ b/app/components/pub/ui/table/separator/Separator.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { Separator } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+        )
+      "
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/app/components/pub/ui/table/separator/index.ts b/app/components/pub/ui/table/separator/index.ts
new file mode 100644
index 00000000..2287bcb9
--- /dev/null
+++ b/app/components/pub/ui/table/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
diff --git a/app/components/pub/ui/tabs/Tabs.vue b/app/components/pub/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..8feda3f7
--- /dev/null
+++ b/app/components/pub/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/app/components/pub/ui/tabs/TabsContent.vue b/app/components/pub/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..dc6d9f8a
--- /dev/null
+++ b/app/components/pub/ui/tabs/TabsContent.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TabsContent } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/app/components/pub/ui/tabs/TabsList.vue b/app/components/pub/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..f4bd9c04
--- /dev/null
+++ b/app/components/pub/ui/tabs/TabsList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TabsList } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/app/components/pub/ui/tabs/TabsTrigger.vue b/app/components/pub/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..bb8d92c9
--- /dev/null
+++ b/app/components/pub/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>
diff --git a/app/components/pub/ui/tabs/index.ts b/app/components/pub/ui/tabs/index.ts
new file mode 100644
index 00000000..a5e58dc0
--- /dev/null
+++ b/app/components/pub/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
diff --git a/app/components/pub/ui/tags-input/TagsInput.vue b/app/components/pub/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..a6cc3d7b
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInput.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputInput.vue b/app/components/pub/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..83365804
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputInput, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputItem.vue b/app/components/pub/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..e074a475
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { TagsInputItem, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputItemDelete.vue b/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..77489a36
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputItemDelete, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Icon name="i-radix-icons-cross-2" class="h-4 w-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/app/components/pub/ui/tags-input/TagsInputItemText.vue b/app/components/pub/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..5c8888cf
--- /dev/null
+++ b/app/components/pub/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { TagsInputItemTextProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TagsInputItemText, useForwardProps } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/app/components/pub/ui/tags-input/index.ts b/app/components/pub/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/app/components/pub/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/app/components/pub/ui/textarea/Textarea.vue b/app/components/pub/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..1dee55d2
--- /dev/null
+++ b/app/components/pub/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/app/components/pub/ui/textarea/index.ts b/app/components/pub/ui/textarea/index.ts
new file mode 100644
index 00000000..6a7ab2a7
--- /dev/null
+++ b/app/components/pub/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/app/components/pub/ui/toast/Toast.vue b/app/components/pub/ui/toast/Toast.vue
new file mode 100644
index 00000000..4f8478d8
--- /dev/null
+++ b/app/components/pub/ui/toast/Toast.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ToastRootEmits } from 'radix-vue'
+import type { ToastProps } from '.'
+import { cn } from '@/lib/utils'
+import { ToastRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { toastVariants } from '.'
+
+const props = defineProps<ToastProps>()
+
+const emits = defineEmits<ToastRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToastRoot
+    v-bind="forwarded"
+    :class="cn(toastVariants({ variant }), props.class)"
+    @update:open="onOpenChange"
+  >
+    <slot />
+  </ToastRoot>
+</template>
diff --git a/app/components/pub/ui/toast/ToastAction.vue b/app/components/pub/ui/toast/ToastAction.vue
new file mode 100644
index 00000000..6b791b94
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastAction.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToastActionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ToastAction } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ToastActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+    <slot />
+  </ToastAction>
+</template>
diff --git a/app/components/pub/ui/toast/ToastClose.vue b/app/components/pub/ui/toast/ToastClose.vue
new file mode 100644
index 00000000..1012e1d7
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastClose.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ToastCloseProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+import { ToastClose } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ToastCloseProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+    <Icon name="radix-icons:cross-2" class="h-4 w-4" />
+  </ToastClose>
+</template>
diff --git a/app/components/pub/ui/toast/ToastDescription.vue b/app/components/pub/ui/toast/ToastDescription.vue
new file mode 100644
index 00000000..8fd121e4
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToastDescriptionProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ToastDescription } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastDescription :class="cn('text-sm opacity-90', props.class)" v-bind="delegatedProps">
+    <slot />
+  </ToastDescription>
+</template>
diff --git a/app/components/pub/ui/toast/ToastProvider.vue b/app/components/pub/ui/toast/ToastProvider.vue
new file mode 100644
index 00000000..97674052
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastProvider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ToastProviderProps } from 'radix-vue'
+import { ToastProvider } from 'radix-vue'
+
+const props = defineProps<ToastProviderProps>()
+</script>
+
+<template>
+  <ToastProvider v-bind="props">
+    <slot />
+  </ToastProvider>
+</template>
diff --git a/app/components/pub/ui/toast/ToastTitle.vue b/app/components/pub/ui/toast/ToastTitle.vue
new file mode 100644
index 00000000..a85d3c8a
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToastTitleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ToastTitle } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ToastTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+    <slot />
+  </ToastTitle>
+</template>
diff --git a/app/components/pub/ui/toast/ToastViewport.vue b/app/components/pub/ui/toast/ToastViewport.vue
new file mode 100644
index 00000000..13a80741
--- /dev/null
+++ b/app/components/pub/ui/toast/ToastViewport.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ToastViewportProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ToastViewport } from 'radix-vue'
+import { computed } from 'vue'
+
+const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+</template>
diff --git a/app/components/pub/ui/toast/Toaster.vue b/app/components/pub/ui/toast/Toaster.vue
new file mode 100644
index 00000000..cac5dad0
--- /dev/null
+++ b/app/components/pub/ui/toast/Toaster.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { isVNode } from 'vue'
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
+import { useToast } from './use-toast'
+
+const { toasts } = useToast()
+</script>
+
+<template>
+  <ToastProvider>
+    <Toast v-for="toast in toasts" :key="toast.id" v-bind="toast">
+      <div class="grid gap-1">
+        <ToastTitle v-if="toast.title">
+          {{ toast.title }}
+        </ToastTitle>
+        <template v-if="toast.description">
+          <ToastDescription v-if="isVNode(toast.description)">
+            <component :is="toast.description" />
+          </ToastDescription>
+          <ToastDescription v-else>
+            {{ toast.description }}
+          </ToastDescription>
+        </template>
+        <ToastClose />
+      </div>
+      <component :is="toast.action" />
+    </Toast>
+    <ToastViewport />
+  </ToastProvider>
+</template>
diff --git a/app/components/pub/ui/toast/index.ts b/app/components/pub/ui/toast/index.ts
new file mode 100644
index 00000000..294b1e99
--- /dev/null
+++ b/app/components/pub/ui/toast/index.ts
@@ -0,0 +1,39 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { ToastRootProps } from 'radix-vue'
+
+import type { HTMLAttributes } from 'vue'
+import { cva } from 'class-variance-authority'
+
+export { default as Toast } from './Toast.vue'
+export { default as ToastAction } from './ToastAction.vue'
+export { default as ToastClose } from './ToastClose.vue'
+export { default as ToastDescription } from './ToastDescription.vue'
+export { default as Toaster } from './Toaster.vue'
+export { default as ToastProvider } from './ToastProvider.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
+export { toast, useToast } from './use-toast'
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: {
+        default: 'border bg-background text-foreground',
+        destructive:
+          'destructive group border-destructive bg-destructive text-destructive-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+
+type ToastVariants = VariantProps<typeof toastVariants>
+
+export interface ToastProps extends ToastRootProps {
+  class?: HTMLAttributes['class']
+  variant?: ToastVariants['variant']
+  onOpenChange?: ((value: boolean) => void) | undefined
+}
diff --git a/app/components/pub/ui/toast/use-toast.ts b/app/components/pub/ui/toast/use-toast.ts
new file mode 100644
index 00000000..228e5a79
--- /dev/null
+++ b/app/components/pub/ui/toast/use-toast.ts
@@ -0,0 +1,165 @@
+import type { Component, VNode } from 'vue'
+import type { ToastProps } from '.'
+import { computed, ref } from 'vue'
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+export type StringOrVNode =
+  | string
+  | VNode
+  | (() => VNode)
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: string
+  description?: StringOrVNode
+  action?: Component
+}
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_VALUE
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+    type: ActionType['ADD_TOAST']
+    toast: ToasterToast
+  }
+  | {
+    type: ActionType['UPDATE_TOAST']
+    toast: Partial<ToasterToast>
+  }
+  | {
+    type: ActionType['DISMISS_TOAST']
+    toastId?: ToasterToast['id']
+  }
+  | {
+    type: ActionType['REMOVE_TOAST']
+    toastId?: ToasterToast['id']
+  }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+function addToRemoveQueue(toastId: string) {
+  if (toastTimeouts.has(toastId))
+    return
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: actionTypes.REMOVE_TOAST,
+      toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+const state = ref<State>({
+  toasts: [],
+})
+
+function dispatch(action: Action) {
+  switch (action.type) {
+    case actionTypes.ADD_TOAST:
+      state.value.toasts = [action.toast, ...state.value.toasts].slice(0, TOAST_LIMIT)
+      break
+
+    case actionTypes.UPDATE_TOAST:
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      )
+      break
+
+    case actionTypes.DISMISS_TOAST: {
+      const { toastId } = action
+
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      }
+      else {
+        state.value.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      state.value.toasts = state.value.toasts.map(t =>
+        t.id === toastId || toastId === undefined
+          ? {
+              ...t,
+              open: false,
+            }
+          : t,
+      )
+      break
+    }
+
+    case actionTypes.REMOVE_TOAST:
+      if (action.toastId === undefined)
+        state.value.toasts = []
+      else
+        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+
+      break
+  }
+}
+
+function useToast() {
+  return {
+    toasts: computed(() => state.value.toasts),
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+  }
+}
+
+type Toast = Omit<ToasterToast, 'id'>
+
+function toast(props: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: actionTypes.UPDATE_TOAST,
+      toast: { ...props, id },
+    })
+
+  const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
+
+  dispatch({
+    type: actionTypes.ADD_TOAST,
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open: boolean) => {
+        if (!open)
+          dismiss()
+      },
+    },
+  })
+
+  return {
+    id,
+    dismiss,
+    update,
+  }
+}
+
+export { toast, useToast }
diff --git a/app/components/pub/ui/toggle-group/ToggleGroup.vue b/app/components/pub/ui/toggle-group/ToggleGroup.vue
new file mode 100644
index 00000000..97416f88
--- /dev/null
+++ b/app/components/pub/ui/toggle-group/ToggleGroup.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { toggleVariants } from '@/components/ui/toggle'
+import type { VariantProps } from 'class-variance-authority'
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, provide } from 'vue'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupRootProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+provide('toggleGroup', {
+  variant: props.variant,
+  size: props.size,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ToggleGroupRoot v-bind="forwarded" :class="cn('flex items-center justify-center gap-1', props.class)">
+    <slot />
+  </ToggleGroupRoot>
+</template>
diff --git a/app/components/pub/ui/toggle-group/ToggleGroupItem.vue b/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
new file mode 100644
index 00000000..dad82106
--- /dev/null
+++ b/app/components/pub/ui/toggle-group/ToggleGroupItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { VariantProps } from 'class-variance-authority'
+import type { ToggleGroupItemProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
+import { ToggleGroupItem, useForwardProps } from 'radix-vue'
+import { computed, inject } from 'vue'
+
+type ToggleGroupVariants = VariantProps<typeof toggleVariants>
+
+const props = defineProps<ToggleGroupItemProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleGroupVariants['variant']
+  size?: ToggleGroupVariants['size']
+}>()
+
+const context = inject<ToggleGroupVariants>('toggleGroup')
+
+const delegatedProps = computed(() => {
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="forwardedProps" :class="cn(toggleVariants({
+      variant: context?.variant || variant,
+      size: context?.size || size,
+    }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>
diff --git a/app/components/pub/ui/toggle-group/index.ts b/app/components/pub/ui/toggle-group/index.ts
new file mode 100644
index 00000000..9f89ad77
--- /dev/null
+++ b/app/components/pub/ui/toggle-group/index.ts
@@ -0,0 +1,2 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'
diff --git a/app/components/pub/ui/toggle/Toggle.vue b/app/components/pub/ui/toggle/Toggle.vue
new file mode 100644
index 00000000..2a24e28f
--- /dev/null
+++ b/app/components/pub/ui/toggle/Toggle.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import type { ToggleVariants } from '.'
+import { cn } from '@/lib/utils'
+import { Toggle, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { toggleVariants } from '.'
+
+const props = withDefaults(defineProps<ToggleProps & {
+  class?: HTMLAttributes['class']
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>(), {
+  variant: 'default',
+  size: 'default',
+  disabled: false,
+})
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, size, variant, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <Toggle
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>
diff --git a/app/components/pub/ui/toggle/index.ts b/app/components/pub/ui/toggle/index.ts
new file mode 100644
index 00000000..07acae50
--- /dev/null
+++ b/app/components/pub/ui/toggle/index.ts
@@ -0,0 +1,28 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Toggle } from './Toggle.vue'
+
+export const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ToggleVariants = VariantProps<typeof toggleVariants>
diff --git a/app/components/pub/ui/tooltip/Tooltip.vue b/app/components/pub/ui/tooltip/Tooltip.vue
new file mode 100644
index 00000000..3898c703
--- /dev/null
+++ b/app/components/pub/ui/tooltip/Tooltip.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'radix-vue'
+import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/app/components/pub/ui/tooltip/TooltipContent.vue b/app/components/pub/ui/tooltip/TooltipContent.vue
new file mode 100644
index 00000000..62a65434
--- /dev/null
+++ b/app/components/pub/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/app/components/pub/ui/tooltip/TooltipProvider.vue b/app/components/pub/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 00000000..23244b18
--- /dev/null
+++ b/app/components/pub/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'radix-vue'
+import { TooltipProvider } from 'radix-vue'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/app/components/pub/ui/tooltip/TooltipTrigger.vue b/app/components/pub/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 00000000..41acc5e9
--- /dev/null
+++ b/app/components/pub/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'radix-vue'
+import { TooltipTrigger } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/app/components/pub/ui/tooltip/index.ts b/app/components/pub/ui/tooltip/index.ts
new file mode 100644
index 00000000..5ab96536
--- /dev/null
+++ b/app/components/pub/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b6baa24a..524b9cb1 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,36 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: [
+    '@unocss/nuxt',
+    'shadcn-nuxt',
+    '@vueuse/nuxt',
+    '@nuxt/eslint',
+    '@nuxt/icon',
+    '@pinia/nuxt',
+    '@nuxtjs/color-mode',
+  ],
+
+  css: ['@unocss/reset/tailwind.css'],
+
+  features: {
+    // For UnoCSS
+    inlineStyles: false,
+  },
+
+  eslint: {
+    config: {
+      standalone: false,
+    },
+  },
+
+  imports: {
+    dirs: ['./app/lib'],
+  },
+  shadcn: {
+    prefix: '',
+    componentDir: './app/components/pub/ui',
+  },
+
   compatibilityDate: '2025-07-15',
-  devtools: { enabled: true }
 })