svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+ className
+ )}
+ {...props} />
+ );
+}
+
+export {
+ Avatar,
+ AvatarImage,
+ AvatarFallback,
+ AvatarGroup,
+ AvatarGroupCount,
+ AvatarBadge,
+}
diff --git a/frontend/src/components/ui/breadcrumb.jsx b/frontend/src/components/ui/breadcrumb.jsx
new file mode 100644
index 0000000..db2b171
--- /dev/null
+++ b/frontend/src/components/ui/breadcrumb.jsx
@@ -0,0 +1,124 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+
+import { cn } from "@/lib/utils"
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
+
+function Breadcrumb({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbList({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbItem({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbLink({
+ className,
+ render,
+ ...props
+}) {
+ return useRender({
+ defaultTagName: "a",
+ props: mergeProps({
+ className: cn("transition-colors hover:text-foreground", className),
+ }, props),
+ render,
+ state: {
+ slot: "breadcrumb-link",
+ },
+ });
+}
+
+function BreadcrumbPage({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function BreadcrumbSeparator({
+ children,
+ className,
+ ...props
+}) {
+ return (
+
svg]:size-3.5", className)}
+ {...props}>
+ {children ?? (
+
+ )}
+
+ );
+}
+
+function BreadcrumbEllipsis({
+ className,
+ ...props
+}) {
+ return (
+
svg]:size-4", className)}
+ {...props}>
+
+ More
+
+ );
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+}
diff --git a/frontend/src/components/ui/button.jsx b/frontend/src/components/ui/button.jsx
new file mode 100644
index 0000000..87c07ba
--- /dev/null
+++ b/frontend/src/components/ui/button.jsx
@@ -0,0 +1,57 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+ "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+ {
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/80",
+ outline:
+ "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+ secondary:
+ "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+ ghost:
+ "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+ destructive:
+ "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default:
+ "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+ sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+ lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+ icon: "size-8",
+ "icon-xs":
+ "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+ "icon-sm":
+ "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+ "icon-lg": "size-9",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+ }
+)
+
+function Button({
+ className,
+ variant = "default",
+ size = "default",
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export { Button, buttonVariants }
diff --git a/frontend/src/components/ui/card.jsx b/frontend/src/components/ui/card.jsx
new file mode 100644
index 0000000..3495625
--- /dev/null
+++ b/frontend/src/components/ui/card.jsx
@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+ className,
+ size = "default",
+ ...props
+}) {
+ return (
+
img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+ className
+ )}
+ {...props} />
+ );
+}
+
+function CardHeader({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardTitle({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardDescription({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardAction({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardContent({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+function CardFooter({
+ className,
+ ...props
+}) {
+ return (
+
+ );
+}
+
+export {
+ Card,
+ CardHeader,
+ CardFooter,
+ CardTitle,
+ CardAction,
+ CardDescription,
+ CardContent,
+}
diff --git a/frontend/src/components/ui/field.jsx b/frontend/src/components/ui/field.jsx
new file mode 100644
index 0000000..2a08d6d
--- /dev/null
+++ b/frontend/src/components/ui/field.jsx
@@ -0,0 +1,228 @@
+import { useMemo } from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({
+ className,
+ ...props
+}) {
+ return (
+
+