diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..fe925f4
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "@cv/ui",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./src/index.ts",
+      "types": "./src/index.ts"
+    },
+    "./styles": "./src/index.css"
+  },
+  "files": [
+    "src/",
+    "*.css"
+  ],
+  "scripts": {
+    "lint": "biome check .",
+    "lint:fix": "biome check --write ."
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@cv/utils": "*",
+    "@catppuccin/tailwindcss": "^1.0.0",
+    "@tanstack/react-virtual": "^3.11.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.16",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.5.3"
+  }
+}
diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
new file mode 100644
index 0000000..483f378
--- /dev/null
+++ b/packages/ui/postcss.config.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
diff --git a/packages/ui/src/components/Badge.tsx b/packages/ui/src/components/Badge.tsx
new file mode 100644
index 0000000..183a7b6
--- /dev/null
+++ b/packages/ui/src/components/Badge.tsx
@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-3 py-1 text-xs font-medium",
+  {
+    variants: {
+      color: {
+        "ctp-red": "bg-ctp-red/20 text-ctp-red",
+        "ctp-orange": "bg-ctp-peach/20 text-ctp-peach",
+        "ctp-yellow": "bg-ctp-yellow/20 text-ctp-yellow",
+        "ctp-green": "bg-ctp-green/20 text-ctp-green",
+        "ctp-teal": "bg-ctp-teal/20 text-ctp-teal",
+        "ctp-sky": "bg-ctp-sky/20 text-ctp-sky",
+        "ctp-sapphire": "bg-ctp-sapphire/20 text-ctp-sapphire",
+        "ctp-blue": "bg-ctp-blue/20 text-ctp-blue",
+        "ctp-lavender": "bg-ctp-lavender/20 text-ctp-lavender",
+        "ctp-mauve": "bg-ctp-mauve/20 text-ctp-mauve",
+        "ctp-pink": "bg-ctp-pink/20 text-ctp-pink",
+        "ctp-maroon": "bg-ctp-maroon/20 text-ctp-maroon",
+        "ctp-peach": "bg-ctp-peach/20 text-ctp-peach",
+        "ctp-rosewater": "bg-ctp-rosewater/20 text-ctp-rosewater",
+        "ctp-gray": "bg-ctp-overlay0/20 text-ctp-overlay0",
+      },
+    },
+    defaultVariants: {
+      color: "ctp-blue",
+    },
+  },
+);
+
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const Badge = ({
+  children,
+  color = "ctp-blue",
+  className = "",
+}: BadgeProps) => {
+  return (
+    <span className={cn(badgeVariants({ color }), className)}>{children}</span>
+  );
+};
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
new file mode 100644
index 0000000..028b269
--- /dev/null
+++ b/packages/ui/src/components/Button.tsx
@@ -0,0 +1,56 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ctp-blue focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-ctp-blue text-ctp-base hover:bg-ctp-blue/90",
+        secondary: "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface1/80",
+        outline:
+          "border border-ctp-surface1 bg-transparent text-ctp-text hover:bg-ctp-surface0",
+        ghost: "text-ctp-text hover:bg-ctp-surface0",
+        destructive: "bg-ctp-red text-ctp-base hover:bg-ctp-red/90",
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 py-2",
+        lg: "h-12 px-8 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md",
+    },
+  },
+);
+
+interface ButtonProps extends VariantProps<typeof buttonVariants> {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+  type?: "button" | "submit" | "reset";
+}
+
+export const Button = ({
+  children,
+  onClick,
+  disabled = false,
+  variant = "primary",
+  size = "md",
+  className = "",
+  type = "button",
+}: ButtonProps) => {
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(buttonVariants({ variant, size }), className)}
+    >
+      {children}
+    </button>
+  );
+};
diff --git a/packages/ui/src/components/Calendar.tsx b/packages/ui/src/components/Calendar.tsx
new file mode 100644
index 0000000..1731a63
--- /dev/null
+++ b/packages/ui/src/components/Calendar.tsx
@@ -0,0 +1,416 @@
+import { range } from "@cv/utils";
+import { cva } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+import {
+  formatDisplayDate,
+  getDaysInMonth,
+  getFirstDayOfMonth,
+  isDateInRange,
+  isSameDate,
+  isToday,
+} from "../lib/date";
+
+const calendarInputVariants = cva(
+  "w-full px-3 py-2 pr-8 text-sm border border-ctp-overlay0 rounded-lg bg-ctp-base text-ctp-text placeholder-ctp-subtext0 focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:border-ctp-blue cursor-pointer transition-colors",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-50 cursor-not-allowed",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  },
+);
+
+const calendarDayVariants = cva(
+  "w-full aspect-square rounded-full text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:ring-offset-1 flex items-center justify-center p-2",
+  {
+    variants: {
+      selected: {
+        true: "bg-ctp-blue text-ctp-base font-semibold p-2",
+        false: "",
+      },
+      today: {
+        true: "bg-ctp-surface2 text-ctp-text font-medium",
+        false: "",
+      },
+      disabled: {
+        true: "text-ctp-subtext0 cursor-not-allowed",
+        false: "text-ctp-text",
+      },
+    },
+    compoundVariants: [
+      {
+        selected: true,
+        today: true,
+        className: "bg-ctp-blue text-ctp-base",
+      },
+      {
+        selected: false,
+        disabled: false,
+        today: false,
+        className: "hover:bg-ctp-surface1",
+      },
+      {
+        selected: false,
+        disabled: false,
+        className: "hover:bg-ctp-surface1",
+      },
+    ],
+    defaultVariants: {
+      selected: false,
+      today: false,
+      disabled: false,
+    },
+  },
+);
+
+const calendarNavButtonVariants = cva(
+  "p-1 rounded transition-colors focus:outline-none focus:ring-2 focus:ring-ctp-blue",
+  {
+    variants: {
+      variant: {
+        icon: "hover:bg-ctp-surface1 text-ctp-text",
+        today:
+          "text-xs px-2 py-1 bg-ctp-surface1 hover:bg-ctp-surface2 text-ctp-text",
+      },
+    },
+    defaultVariants: {
+      variant: "icon",
+    },
+  },
+);
+
+const calendarActionButtonVariants = cva(
+  "text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ctp-blue rounded px-4 py-2",
+  {
+    variants: {
+      variant: {
+        clear: "text-ctp-red hover:text-ctp-red/80",
+        done: "bg-ctp-blue text-ctp-base hover:bg-ctp-blue/90",
+      },
+    },
+    defaultVariants: {
+      variant: "done",
+    },
+  },
+);
+
+interface CalendarProps {
+  value?: Date | null;
+  onChange: (date: Date | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  minDate?: Date;
+  maxDate?: Date;
+  format?: "short" | "long" | "time";
+}
+
+export const Calendar = ({
+  value,
+  onChange,
+  placeholder = "Select date",
+  disabled = false,
+  className,
+  minDate,
+  maxDate,
+  format = "short",
+}: CalendarProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentMonth, setCurrentMonth] = useState(
+    value ? value.getMonth() : new Date().getMonth(),
+  );
+  const [currentYear, setCurrentYear] = useState(
+    (value ?? new Date()).getFullYear(),
+  );
+
+  const calendarRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Close calendar when clicking outside
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        calendarRef.current &&
+        !calendarRef.current.contains(event.target as Node) &&
+        inputRef.current &&
+        !inputRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+
+  const isDateDisabled = (date: Date): boolean =>
+    !isDateInRange(date, minDate, maxDate);
+
+  const isDateSelected = (date: Date): boolean =>
+    value != null ? isSameDate(date, value) : false;
+
+  const handleDateSelect = (day: number) => {
+    const selectedDate = new Date(currentYear, currentMonth, day);
+
+    if (isDateDisabled(selectedDate)) return;
+
+    onChange(selectedDate);
+    setIsOpen(false);
+  };
+
+  const navigateMonth = (direction: "prev" | "next") => {
+    if (direction === "prev") {
+      if (currentMonth === 0) {
+        setCurrentMonth(11);
+        setCurrentYear(currentYear - 1);
+      } else {
+        setCurrentMonth(currentMonth - 1);
+      }
+    } else if (direction === "next") {
+      if (currentMonth === 11) {
+        setCurrentMonth(0);
+        setCurrentYear(currentYear + 1);
+      } else {
+        setCurrentMonth(currentMonth + 1);
+      }
+    }
+  };
+
+  const goToToday = () => {
+    const today = new Date();
+    setCurrentMonth(today.getMonth());
+    setCurrentYear(today.getFullYear());
+  };
+
+  const clearDate = () => {
+    onChange(null);
+    setIsOpen(false);
+  };
+
+  const renderCalendarDays = () => {
+    const daysInMonth = getDaysInMonth(currentMonth, currentYear);
+    const firstDay = getFirstDayOfMonth(currentMonth, currentYear);
+
+    const allDays: Array<number | null> = [
+      ...range(firstDay).map(() => null),
+      ...range(daysInMonth).map((index) => index + 1),
+    ];
+
+    const numberOfRows = Math.ceil(allDays.length / 7);
+    const rows = range(numberOfRows).map((rowIndex) => {
+      const start = rowIndex * 7;
+      const row = allDays.slice(start, start + 7);
+      const paddedRow = [...row, ...range(7 - row.length).map(() => null)];
+      return paddedRow;
+    });
+
+    return rows.map((row, rowIndex) => {
+      const rowStartDay = row.find((day) => day !== null);
+      const rowKey = rowStartDay
+        ? `row-${currentYear}-${currentMonth}-${rowStartDay}`
+        : `row-${currentYear}-${currentMonth}-empty-${rowIndex}`;
+
+      return (
+        <tr key={rowKey}>
+          {row.map((day, colIndex) => {
+            if (day === null) {
+              const emptyKey = `empty-${currentYear}-${currentMonth}-${rowStartDay ?? rowIndex}-col-${colIndex}`;
+              return (
+                <td key={emptyKey} className="p-1 text-center align-middle">
+                  <div className="aspect-square" />
+                </td>
+              );
+            }
+
+            const date = new Date(currentYear, currentMonth, day);
+            const disabled = isDateDisabled(date);
+            const selected = isDateSelected(date);
+            const today = isToday(date);
+
+            return (
+              <td
+                key={`day-${currentYear}-${currentMonth}-${day}`}
+                className="p-1 text-center align-middle"
+              >
+                <button
+                  type="button"
+                  className={calendarDayVariants({
+                    selected,
+                    today: today && !selected,
+                    disabled,
+                  })}
+                  onClick={() => handleDateSelect(day)}
+                  disabled={disabled}
+                  aria-label={`Select ${date.toLocaleDateString()}`}
+                >
+                  {day}
+                </button>
+              </td>
+            );
+          })}
+        </tr>
+      );
+    });
+  };
+
+  const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ];
+
+  const dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type="text"
+          value={value ? formatDisplayDate(value, format) : ""}
+          placeholder={placeholder}
+          readOnly
+          disabled={disabled}
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          className={calendarInputVariants({ disabled })}
+        />
+        <button
+          type="button"
+          className="absolute right-2 top-1/2 -translate-y-1/2 text-ctp-subtext0 hover:text-ctp-text"
+          onClick={() => !disabled && setIsOpen(!isOpen)}
+          disabled={disabled}
+          aria-label="Open calendar"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <title>Calendar icon</title>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {isOpen && (
+        <div
+          ref={calendarRef}
+          className="absolute top-full left-0 mt-1 bg-ctp-base border border-ctp-overlay0 rounded-lg shadow-lg z-50 p-4 w-80 max-w-full"
+        >
+          <div className="flex items-center justify-between mb-4">
+            <button
+              type="button"
+              onClick={() => navigateMonth("prev")}
+              className={calendarNavButtonVariants({ variant: "icon" })}
+              aria-label="Previous month"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <title>Previous month</title>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M15 19l-7-7 7-7"
+                />
+              </svg>
+            </button>
+            <div className="flex items-center gap-2">
+              <span className="font-semibold text-ctp-text">
+                {monthNames[currentMonth]} {currentYear}
+              </span>
+              <button
+                type="button"
+                onClick={goToToday}
+                className={calendarNavButtonVariants({ variant: "today" })}
+              >
+                Today
+              </button>
+            </div>
+            <button
+              type="button"
+              onClick={() => navigateMonth("next")}
+              className={calendarNavButtonVariants({ variant: "icon" })}
+              aria-label="Next month"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <title>Next month</title>
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <table className="w-full border-collapse">
+            <thead>
+              <tr>
+                {dayNames.map((day) => (
+                  <th
+                    key={day}
+                    className="p-1 aspect-square text-center align-middle text-xs font-medium text-ctp-subtext0"
+                  >
+                    {day}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>{renderCalendarDays()}</tbody>
+          </table>
+
+          <div className="flex justify-between mt-4 pt-4 border-t border-ctp-overlay0">
+            <button
+              type="button"
+              onClick={clearDate}
+              className={calendarActionButtonVariants({ variant: "clear" })}
+            >
+              Clear
+            </button>
+            <button
+              type="button"
+              onClick={() => setIsOpen(false)}
+              className={calendarActionButtonVariants({ variant: "done" })}
+            >
+              Done
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/Card.tsx b/packages/ui/src/components/Card.tsx
new file mode 100644
index 0000000..5d5af15
--- /dev/null
+++ b/packages/ui/src/components/Card.tsx
@@ -0,0 +1,35 @@
+import { cn } from "../lib/cn";
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: () => void;
+}
+
+export const Card = ({ children, className = "", onClick }: CardProps) => {
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={cn(
+          "rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-4 shadow-sm cursor-pointer hover:shadow-md transition-shadow text-left w-full",
+          className,
+        )}
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-ctp-surface1 bg-ctp-surface0 p-4 shadow-sm",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/Checkbox.tsx b/packages/ui/src/components/Checkbox.tsx
new file mode 100644
index 0000000..cb8ff7c
--- /dev/null
+++ b/packages/ui/src/components/Checkbox.tsx
@@ -0,0 +1,46 @@
+import { cn } from "../lib/cn";
+
+interface CheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  id?: string;
+}
+
+export const Checkbox = ({
+  label,
+  checked = false,
+  onChange,
+  disabled = false,
+  className = "",
+  id,
+}: CheckboxProps) => {
+  const checkboxId =
+    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+
+  return (
+    <div className="flex items-center space-x-2">
+      <input
+        id={checkboxId}
+        type="checkbox"
+        checked={checked}
+        onChange={(e) => onChange?.(e.target.checked)}
+        disabled={disabled}
+        className={cn(
+          "h-4 w-4 rounded border-ctp-surface1 bg-transparent text-ctp-blue focus:ring-2 focus:ring-ctp-blue focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+      />
+      {label && (
+        <label
+          htmlFor={checkboxId}
+          className="text-sm font-medium text-ctp-text cursor-pointer"
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/FormattedDate.tsx b/packages/ui/src/components/FormattedDate.tsx
new file mode 100644
index 0000000..a9d3f56
--- /dev/null
+++ b/packages/ui/src/components/FormattedDate.tsx
@@ -0,0 +1,73 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+const formatDate = (dateString: string): string => {
+  return new Date(dateString).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+  });
+};
+
+const dateVariants = cva("cursor-help", {
+  variants: {
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+    },
+    variant: {
+      default: "text-ctp-text",
+      muted: "text-ctp-subtext0",
+      subtle: "text-ctp-subtext1",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+  },
+});
+
+interface FormattedDateProps extends VariantProps<typeof dateVariants> {
+  /**
+   * ISO date string to format
+   */
+  date: string;
+  /**
+   * Optional additional CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Displays a formatted date with full date on hover
+ *
+ * @example
+ * <FormattedDate date="2024-01-15T00:00:00Z" />
+ * // Displays: "Jan 2024"
+ * // Tooltip: "January 15, 2024"
+ *
+ * @example
+ * <FormattedDate date="2024-01-15T00:00:00Z" variant="muted" size="sm" />
+ */
+export const FormattedDate = ({
+  date,
+  size,
+  variant,
+  className,
+}: FormattedDateProps) => {
+  const shortDate = formatDate(date);
+  const fullDate = new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <time
+      dateTime={date}
+      title={fullDate}
+      className={dateVariants({ size, variant, className })}
+    >
+      {shortDate}
+    </time>
+  );
+};
diff --git a/packages/ui/src/components/FormattedDateRange.tsx b/packages/ui/src/components/FormattedDateRange.tsx
new file mode 100644
index 0000000..315aaa1
--- /dev/null
+++ b/packages/ui/src/components/FormattedDateRange.tsx
@@ -0,0 +1,102 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+const formatDateRange = (
+  startDate: string,
+  endDate?: string | null,
+): string => {
+  const formatDate = (dateString: string): string =>
+    new Date(dateString).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "short",
+    });
+
+  const start = formatDate(startDate);
+  const end = endDate ? formatDate(endDate) : "Present";
+  return `${start} - ${end}`;
+};
+
+const dateRangeVariants = cva("cursor-help", {
+  variants: {
+    size: {
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg",
+    },
+    variant: {
+      default: "text-ctp-text",
+      muted: "text-ctp-subtext0",
+      subtle: "text-ctp-subtext1",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+  },
+});
+
+interface FormattedDateRangeProps
+  extends VariantProps<typeof dateRangeVariants> {
+  /**
+   * ISO date string for start date
+   */
+  startDate: string;
+  /**
+   * ISO date string for end date (optional, null for ongoing)
+   */
+  endDate?: string | null;
+  /**
+   * Optional additional CSS class name
+   */
+  className?: string;
+}
+
+/**
+ * Displays a formatted date range with full dates on hover
+ *
+ * @example
+ * <FormattedDateRange startDate="2023-01-15T00:00:00Z" endDate="2024-03-20T00:00:00Z" />
+ * // Displays: "Jan 2023 - Mar 2024"
+ * // Tooltip: "January 15, 2023 - March 20, 2024"
+ *
+ * @example
+ * <FormattedDateRange startDate="2023-01-15T00:00:00Z" />
+ * // Displays: "Jan 2023 - Present"
+ * // Tooltip: "January 15, 2023 - Present"
+ *
+ * @example
+ * <FormattedDateRange
+ *   startDate="2023-01-15T00:00:00Z"
+ *   variant="muted"
+ *   size="sm"
+ * />
+ */
+export const FormattedDateRange = ({
+  startDate,
+  endDate,
+  size,
+  variant,
+  className,
+}: FormattedDateRangeProps) => {
+  const shortRange = formatDateRange(startDate, endDate);
+
+  const formatFullDate = (date: string) =>
+    new Date(date).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+
+  const fullStartDate = formatFullDate(startDate);
+  const fullEndDate = endDate ? formatFullDate(endDate) : "Present";
+  const fullRange = `${fullStartDate} - ${fullEndDate}`;
+
+  return (
+    <time
+      dateTime={`${startDate}/${endDate || ""}`}
+      title={fullRange}
+      className={dateRangeVariants({ size, variant, className })}
+    >
+      {shortRange}
+    </time>
+  );
+};
diff --git a/packages/ui/src/components/IconButton.tsx b/packages/ui/src/components/IconButton.tsx
new file mode 100644
index 0000000..763d3ed
--- /dev/null
+++ b/packages/ui/src/components/IconButton.tsx
@@ -0,0 +1,123 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const iconButtonVariants = cva(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ctp-blue focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "",
+        secondary: "",
+        outline: "border border-ctp-surface1 bg-transparent",
+        ghost: "",
+        destructive: "",
+      },
+      size: {
+        xs: "h-6 w-6 text-xs",
+        sm: "h-8 w-8 text-sm",
+        md: "h-10 w-10",
+        lg: "h-12 w-12 text-lg",
+      },
+      showColorOnHover: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      // Primary variants
+      {
+        variant: "primary",
+        showColorOnHover: true,
+        className: "text-ctp-text hover:bg-ctp-blue hover:text-ctp-base",
+      },
+      {
+        variant: "primary",
+        showColorOnHover: false,
+        className: "bg-ctp-blue text-ctp-base hover:bg-ctp-blue/90",
+      },
+      // Secondary variants
+      {
+        variant: "secondary",
+        showColorOnHover: true,
+        className: "text-ctp-text hover:bg-ctp-surface1",
+      },
+      {
+        variant: "secondary",
+        showColorOnHover: false,
+        className: "bg-ctp-surface1 text-ctp-text hover:bg-ctp-surface1/80",
+      },
+      // Outline variants
+      {
+        variant: "outline",
+        showColorOnHover: true,
+        className: "text-ctp-text hover:bg-ctp-surface0 hover:border-ctp-blue",
+      },
+      {
+        variant: "outline",
+        showColorOnHover: false,
+        className: "text-ctp-text hover:bg-ctp-surface0",
+      },
+      // Ghost variants
+      {
+        variant: "ghost",
+        showColorOnHover: true,
+        className: "text-ctp-text hover:bg-ctp-surface0",
+      },
+      {
+        variant: "ghost",
+        showColorOnHover: false,
+        className: "text-ctp-text hover:bg-ctp-surface0",
+      },
+      // Destructive variants
+      {
+        variant: "destructive",
+        showColorOnHover: true,
+        className: "text-ctp-text hover:bg-ctp-red hover:text-ctp-base",
+      },
+      {
+        variant: "destructive",
+        showColorOnHover: false,
+        className: "bg-ctp-red text-ctp-base hover:bg-ctp-red/90",
+      },
+    ],
+    defaultVariants: {
+      variant: "ghost",
+      size: "md",
+      showColorOnHover: true,
+    },
+  },
+);
+
+interface IconButtonProps extends VariantProps<typeof iconButtonVariants> {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const IconButton = ({
+  icon,
+  label,
+  onClick,
+  disabled = false,
+  variant = "ghost",
+  size = "md",
+  className = "",
+  showColorOnHover = true,
+}: IconButtonProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      className={cn(
+        iconButtonVariants({ variant, size, showColorOnHover }),
+        className,
+      )}
+    >
+      {icon}
+    </button>
+  );
+};
diff --git a/packages/ui/src/components/PageHeader.tsx b/packages/ui/src/components/PageHeader.tsx
new file mode 100644
index 0000000..8407156
--- /dev/null
+++ b/packages/ui/src/components/PageHeader.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  className?: string;
+}
+
+export const PageHeader = ({
+  title,
+  description,
+  action,
+  className,
+}: PageHeaderProps) => {
+  return (
+    <div className={cn("flex items-center justify-between mb-6", className)}>
+      <div>
+        <h1 className="text-2xl font-bold text-ctp-text">{title}</h1>
+        {description && <p className="text-ctp-subtext0 mt-1">{description}</p>}
+      </div>
+      {action && <div>{action}</div>}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/Placeholder.tsx b/packages/ui/src/components/Placeholder.tsx
new file mode 100644
index 0000000..eb21f41
--- /dev/null
+++ b/packages/ui/src/components/Placeholder.tsx
@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const placeholderVariants = cva(
+  "flex flex-col items-center justify-center text-center",
+  {
+    variants: {
+      variant: {
+        loading: "text-ctp-subtext0",
+        error: "text-ctp-red",
+        empty: "text-ctp-subtext0",
+      },
+    },
+    defaultVariants: {
+      variant: "loading",
+    },
+  },
+);
+
+interface PlaceholderProps extends VariantProps<typeof placeholderVariants> {
+  title?: string;
+  message?: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const Placeholder = ({
+  variant,
+  title,
+  message,
+  children,
+  className,
+}: PlaceholderProps) => {
+  return (
+    <div className={cn(placeholderVariants({ variant }), className)}>
+      {title && (
+        <h2 className="mb-2 text-2xl font-bold text-ctp-text">{title}</h2>
+      )}
+      {message && <div className="text-sm">{message}</div>}
+      {children}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/RangeSlider.tsx b/packages/ui/src/components/RangeSlider.tsx
new file mode 100644
index 0000000..cf8b28b
--- /dev/null
+++ b/packages/ui/src/components/RangeSlider.tsx
@@ -0,0 +1,177 @@
+import React, { useCallback, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+
+interface RangeSliderProps {
+  min: number;
+  max: number;
+  value: [number, number];
+  onChange: (value: [number, number]) => void;
+  step?: number;
+  className?: string;
+  disabled?: boolean;
+  formatValue?: (value: number) => string;
+  showLabels?: boolean;
+  showValues?: boolean;
+}
+
+export const RangeSlider = ({
+  min,
+  max,
+  value,
+  onChange,
+  step = 1,
+  className,
+  disabled = false,
+  formatValue = (val) => val.toLocaleString(),
+  showLabels = true,
+  showValues = true,
+}: RangeSliderProps) => {
+  const [isDragging, setIsDragging] = useState<"min" | "max" | null>(null);
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  const getPercentage = useCallback(
+    (val: number) => ((val - min) / (max - min)) * 100,
+    [min, max],
+  );
+
+  const getValueFromPosition = useCallback(
+    (clientX: number) => {
+      if (!sliderRef.current) return min;
+
+      const rect = sliderRef.current.getBoundingClientRect();
+      const percentage = Math.max(
+        0,
+        Math.min(1, (clientX - rect.left) / rect.width),
+      );
+      const rawValue = min + percentage * (max - min);
+      const steppedValue = Math.round(rawValue / step) * step;
+
+      return Math.max(min, Math.min(max, steppedValue));
+    },
+    [min, max, step],
+  );
+
+  const handleMouseDown = (e: React.MouseEvent, thumb: "min" | "max") => {
+    if (disabled) return;
+
+    e.preventDefault();
+    setIsDragging(thumb);
+
+    const newValue = getValueFromPosition(e.clientX);
+    const [currentMin, currentMax] = value;
+
+    if (thumb === "min") {
+      const newMin = Math.min(newValue, currentMax);
+      onChange([newMin, currentMax]);
+    } else {
+      const newMax = Math.max(newValue, currentMin);
+      onChange([currentMin, newMax]);
+    }
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging || disabled) return;
+
+      const newValue = getValueFromPosition(e.clientX);
+      const [currentMin, currentMax] = value;
+
+      if (isDragging === "min") {
+        const newMin = Math.min(newValue, currentMax);
+        onChange([newMin, currentMax]);
+      } else {
+        const newMax = Math.max(newValue, currentMin);
+        onChange([currentMin, newMax]);
+      }
+    },
+    [isDragging, disabled, getValueFromPosition, value, onChange],
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(null);
+  }, []);
+
+  React.useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+
+  const minPercentage = getPercentage(value[0]);
+  const maxPercentage = getPercentage(value[1]);
+
+  return (
+    <div className={cn("w-full", className)}>
+      {showLabels && (
+        <div className="flex justify-between text-sm text-ctp-subtext0 mb-2">
+          <span>Min: {formatValue(min)}</span>
+          <span>Max: {formatValue(max)}</span>
+        </div>
+      )}
+
+      <div className="relative">
+        {/* Track */}
+        <div
+          ref={sliderRef}
+          className={cn(
+            "relative h-2 bg-ctp-surface1 rounded-full cursor-pointer",
+            disabled && "opacity-50 cursor-not-allowed",
+          )}
+        >
+          {/* Active range */}
+          <div
+            className="absolute h-2 bg-ctp-blue rounded-full"
+            style={{
+              left: `${minPercentage}%`,
+              width: `${maxPercentage - minPercentage}%`,
+            }}
+          />
+
+          {/* Min thumb */}
+          <button
+            type="button"
+            className={cn(
+              "absolute w-4 h-4 bg-ctp-blue border-2 border-ctp-base rounded-full cursor-grab transform -translate-y-1 -translate-x-1/2 transition-all duration-150",
+              "hover:scale-110 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:ring-offset-2",
+              isDragging === "min" && "scale-110 shadow-lg cursor-grabbing",
+              disabled && "cursor-not-allowed",
+            )}
+            style={{ left: `${minPercentage}%` }}
+            onMouseDown={(e) => handleMouseDown(e, "min")}
+            disabled={disabled}
+            aria-label={`Minimum value: ${formatValue(value[0])}`}
+          />
+
+          {/* Max thumb */}
+          <button
+            type="button"
+            className={cn(
+              "absolute w-4 h-4 bg-ctp-blue border-2 border-ctp-base rounded-full cursor-grab transform -translate-y-1 -translate-x-1/2 transition-all duration-150",
+              "hover:scale-110 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-ctp-blue focus:ring-offset-2",
+              isDragging === "max" && "scale-110 shadow-lg cursor-grabbing",
+              disabled && "cursor-not-allowed",
+            )}
+            style={{ left: `${maxPercentage}%` }}
+            onMouseDown={(e) => handleMouseDown(e, "max")}
+            disabled={disabled}
+            aria-label={`Maximum value: ${formatValue(value[1])}`}
+          />
+        </div>
+
+        {/* Value labels */}
+        {showValues && (
+          <div className="flex justify-between mt-2 text-xs text-ctp-text">
+            <span className="font-medium">{formatValue(value[0])}</span>
+            <span className="font-medium">{formatValue(value[1])}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/SearchableSelect.tsx b/packages/ui/src/components/SearchableSelect.tsx
new file mode 100644
index 0000000..ebc07b6
--- /dev/null
+++ b/packages/ui/src/components/SearchableSelect.tsx
@@ -0,0 +1,238 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { cva, type VariantProps } from "class-variance-authority";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn";
+
+const searchableSelectVariants = cva(
+  "flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      state: {
+        default: "border-ctp-surface1 focus-visible:ring-ctp-blue",
+        error: "border-ctp-red focus-visible:ring-ctp-red",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  },
+);
+
+export interface SearchableSelectOption {
+  value: string;
+  label: string;
+}
+
+interface SearchableSelectProps
+  extends Omit<VariantProps<typeof searchableSelectVariants>, "state"> {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  error?: string;
+  options?: SearchableSelectOption[];
+  className?: string;
+  id?: string;
+  required?: boolean;
+  // Pagination support
+  hasNextPage?: boolean;
+  onLoadMore?: () => void;
+  isLoading?: boolean;
+  // Add new option support
+  allowAddNew?: boolean;
+  onAddNew?: (label: string) => void;
+  addNewLabel?: string;
+}
+
+export const SearchableSelect = ({
+  label,
+  placeholder = "Search...",
+  value,
+  onChange,
+  disabled = false,
+  error,
+  options = [],
+  className = "",
+  id,
+  required = false,
+  hasNextPage = false,
+  onLoadMore,
+  isLoading = false,
+  allowAddNew = false,
+  onAddNew,
+  addNewLabel = "Add",
+}: SearchableSelectProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const selectId =
+    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+  const selectState = error ? "error" : "default";
+
+  const filteredOptions = options.filter((option) =>
+    option.label.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  // Check if search term doesn't match any option and add new is allowed
+  const hasNoMatch =
+    allowAddNew &&
+    searchTerm.trim().length > 0 &&
+    filteredOptions.length === 0 &&
+    !options.some(
+      (opt) => opt.label.toLowerCase() === searchTerm.toLowerCase(),
+    );
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  // Setup virtualizer for the dropdown list
+  // Add 1 to count if we need to show "Add new" option
+  const virtualizer = useVirtualizer({
+    count: filteredOptions.length + (hasNoMatch ? 1 : 0),
+    getScrollElement: () => listRef.current,
+    estimateSize: () => 40,
+    overscan: 5,
+  });
+
+  // Auto-load more when scrolling near the end
+  const virtualItems = virtualizer.getVirtualItems();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const [lastItem] = [...virtualItems].reverse();
+
+    if (!lastItem) return;
+
+    const shouldLoadMore =
+      lastItem.index >= filteredOptions.length - 1 && hasNextPage && !isLoading;
+
+    if (shouldLoadMore && onLoadMore) {
+      onLoadMore();
+    }
+  }, [
+    isOpen,
+    hasNextPage,
+    isLoading,
+    onLoadMore,
+    filteredOptions.length,
+    virtualItems,
+  ]);
+
+  const handleFocus = () => {
+    setIsOpen(true);
+    setSearchTerm("");
+  };
+
+  return (
+    <div className="space-y-2 relative">
+      {label && (
+        <label htmlFor={selectId} className="text-sm font-medium text-ctp-text">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        <input
+          id={selectId}
+          type="text"
+          value={isOpen ? searchTerm : selectedOption?.label || ""}
+          onChange={(e) => setSearchTerm(e.target.value)}
+          onFocus={handleFocus}
+          onBlur={() => {
+            setTimeout(() => setIsOpen(false), 200);
+          }}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          className={cn(
+            searchableSelectVariants({ state: selectState }),
+            className,
+          )}
+        />
+        {isOpen && (filteredOptions.length > 0 || hasNoMatch) && (
+          <div
+            ref={listRef}
+            className="absolute z-50 w-full mt-1 bg-ctp-surface0 border border-ctp-surface1 rounded-md shadow-lg max-h-60 overflow-y-auto scrollbar-thin scrollbar-thumb-ctp-surface2 scrollbar-track-ctp-surface0 hover:scrollbar-thumb-ctp-overlay0"
+          >
+            <div
+              style={{
+                height: `${virtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative",
+              }}
+            >
+              {virtualItems.map((virtualRow) => {
+                // Check if this is the "Add new" row
+                if (hasNoMatch && virtualRow.index === filteredOptions.length) {
+                  return (
+                    <button
+                      key="add-new"
+                      type="button"
+                      style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        height: `${virtualRow.size}px`,
+                        transform: `translateY(${virtualRow.start}px)`,
+                      }}
+                      className="text-left px-3 py-2 cursor-pointer hover:bg-ctp-surface1 text-sm text-ctp-blue transition-colors flex items-center gap-2"
+                      onMouseDown={(e) => {
+                        e.preventDefault();
+                        onAddNew?.(searchTerm.trim());
+                        setSearchTerm("");
+                        setIsOpen(false);
+                      }}
+                    >
+                      <span className="text-ctp-blue">+</span>
+                      <span>
+                        {addNewLabel} "{searchTerm.trim()}"
+                      </span>
+                    </button>
+                  );
+                }
+
+                const option = filteredOptions[virtualRow.index];
+                if (!option) return null;
+
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    style={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      width: "100%",
+                      height: `${virtualRow.size}px`,
+                      transform: `translateY(${virtualRow.start}px)`,
+                    }}
+                    className="text-left px-3 py-2 cursor-pointer hover:bg-ctp-surface1 text-sm text-ctp-text transition-colors"
+                    onMouseDown={() => {
+                      onChange?.(option.value);
+                      setSearchTerm("");
+                      setIsOpen(false);
+                    }}
+                  >
+                    {option.label}
+                  </button>
+                );
+              })}
+            </div>
+
+            {/* Loading indicator */}
+            {isLoading && (
+              <div className="px-3 py-2 text-center border-t border-ctp-surface1">
+                <span className="text-xs text-ctp-subtext0">
+                  Loading more...
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+      {error && <p className="text-sm text-ctp-red">{error}</p>}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/Select.tsx b/packages/ui/src/components/Select.tsx
new file mode 100644
index 0000000..dc243e7
--- /dev/null
+++ b/packages/ui/src/components/Select.tsx
@@ -0,0 +1,83 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const selectVariants = cva(
+  "flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      state: {
+        default: "border-ctp-surface1 focus-visible:ring-ctp-blue",
+        error: "border-ctp-red focus-visible:ring-ctp-red",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  },
+);
+
+interface SelectOption {
+  value: string;
+  label: string;
+}
+
+interface SelectProps
+  extends Omit<VariantProps<typeof selectVariants>, "state"> {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  error?: string;
+  options: SelectOption[];
+  className?: string;
+  id?: string;
+  required?: boolean;
+}
+
+export const Select = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  disabled = false,
+  error,
+  options,
+  className = "",
+  id,
+  required = false,
+}: SelectProps) => {
+  const selectId =
+    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+  const selectState = error ? "error" : "default";
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label htmlFor={selectId} className="text-sm font-medium text-ctp-text">
+          {label}
+        </label>
+      )}
+      <select
+        id={selectId}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        required={required}
+        className={cn(selectVariants({ state: selectState }), className)}
+      >
+        {placeholder && (
+          <option value="" disabled>
+            {placeholder}
+          </option>
+        )}
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      {error && <p className="text-sm text-ctp-red">{error}</p>}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/StatusBadge.tsx b/packages/ui/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..978d809
--- /dev/null
+++ b/packages/ui/src/components/StatusBadge.tsx
@@ -0,0 +1,52 @@
+import { cn } from "../lib/cn";
+import { Badge } from "./Badge";
+
+type Status =
+  | "active"
+  | "inactive"
+  | "pending"
+  | "success"
+  | "error"
+  | "warning";
+
+interface StatusBadgeProps {
+  status: Status;
+  className?: string;
+}
+
+const statusConfig = {
+  active: {
+    label: "Active",
+    color: "ctp-green" as const,
+  },
+  inactive: {
+    label: "Inactive",
+    color: "ctp-gray" as const,
+  },
+  pending: {
+    label: "Pending",
+    color: "ctp-yellow" as const,
+  },
+  success: {
+    label: "Success",
+    color: "ctp-green" as const,
+  },
+  error: {
+    label: "Error",
+    color: "ctp-red" as const,
+  },
+  warning: {
+    label: "Warning",
+    color: "ctp-orange" as const,
+  },
+};
+
+export const StatusBadge = ({ status, className = "" }: StatusBadgeProps) => {
+  const config = statusConfig[status];
+
+  return (
+    <Badge color={config.color} className={cn("", className)}>
+      {config.label}
+    </Badge>
+  );
+};
diff --git a/packages/ui/src/components/Table.tsx b/packages/ui/src/components/Table.tsx
new file mode 100644
index 0000000..40ac782
--- /dev/null
+++ b/packages/ui/src/components/Table.tsx
@@ -0,0 +1,118 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const tableVariants = cva("overflow-x-auto", {
+  variants: {
+    fullWidth: {
+      true: "w-full",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    fullWidth: false,
+  },
+});
+
+interface TableProps extends VariantProps<typeof tableVariants> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableBodyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableRowProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableHeaderCellProps {
+  children: React.ReactNode;
+  className?: string;
+  colSpan?: number;
+}
+
+interface TableCellProps {
+  children: React.ReactNode;
+  className?: string;
+  colSpan?: number;
+}
+
+export const Table = ({
+  children,
+  className = "",
+  fullWidth = false,
+}: TableProps) => {
+  return (
+    <div className={cn(tableVariants({ fullWidth }))}>
+      <table
+        className={cn(
+          fullWidth
+            ? "w-full divide-y divide-ctp-surface1"
+            : "min-w-full divide-y divide-ctp-surface1",
+          className,
+        )}
+      >
+        {children}
+      </table>
+    </div>
+  );
+};
+
+export const TableHeader = ({ children, className = "" }: TableHeaderProps) => {
+  return <thead className={cn("bg-ctp-surface1", className)}>{children}</thead>;
+};
+
+export const TableBody = ({ children, className = "" }: TableBodyProps) => {
+  return (
+    <tbody className={cn("divide-y divide-ctp-surface1", className)}>
+      {children}
+    </tbody>
+  );
+};
+
+export const TableRow = ({ children, className = "" }: TableRowProps) => {
+  return (
+    <tr className={cn("hover:bg-ctp-surface0/50", className)}>{children}</tr>
+  );
+};
+
+export const TableHeaderCell = ({
+  children,
+  className = "",
+  colSpan,
+}: TableHeaderCellProps) => {
+  return (
+    <th
+      className={cn(
+        "px-6 py-4 text-left text-xs font-medium text-ctp-subtext0 uppercase tracking-wider",
+        className,
+      )}
+      colSpan={colSpan}
+    >
+      {children}
+    </th>
+  );
+};
+
+export const TableCell = ({
+  children,
+  className = "",
+  colSpan,
+}: TableCellProps) => {
+  return (
+    <td
+      className={cn("px-6 py-4 text-sm text-ctp-text", className)}
+      colSpan={colSpan}
+    >
+      {children}
+    </td>
+  );
+};
diff --git a/packages/ui/src/components/TextInput.tsx b/packages/ui/src/components/TextInput.tsx
new file mode 100644
index 0000000..94b0d96
--- /dev/null
+++ b/packages/ui/src/components/TextInput.tsx
@@ -0,0 +1,80 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const inputVariants = cva(
+  "flex h-10 w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-ctp-subtext0 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      state: {
+        default: "border-ctp-surface1 focus-visible:ring-ctp-blue",
+        success: "border-ctp-green focus-visible:ring-ctp-green",
+        error: "border-ctp-red focus-visible:ring-ctp-red",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  },
+);
+
+interface TextInputProps
+  extends Omit<VariantProps<typeof inputVariants>, "state"> {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  error?: string;
+  state?: "default" | "success" | "error";
+  type?:
+    | "text"
+    | "email"
+    | "password"
+    | "number"
+    | "tel"
+    | "url"
+    | "date"
+    | "datetime-local";
+  className?: string;
+  id?: string;
+  required?: boolean;
+}
+
+export const TextInput = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  disabled = false,
+  error,
+  state = "default",
+  type = "text",
+  className = "",
+  id,
+  required = false,
+}: TextInputProps) => {
+  const inputId =
+    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+  const inputState = error ? "error" : state;
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label htmlFor={inputId} className="text-sm font-medium text-ctp-text">
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        required={required}
+        className={cn(inputVariants({ state: inputState }), className)}
+      />
+      {error && <p className="text-sm text-ctp-red">{error}</p>}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/Textarea.tsx b/packages/ui/src/components/Textarea.tsx
new file mode 100644
index 0000000..3da48cd
--- /dev/null
+++ b/packages/ui/src/components/Textarea.tsx
@@ -0,0 +1,75 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const textareaVariants = cva(
+  "flex w-full rounded-md border bg-transparent px-3 py-2 text-sm transition-colors placeholder:text-ctp-subtext0 focus-visible:outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 resize-vertical",
+  {
+    variants: {
+      state: {
+        default: "border-ctp-surface1 focus-visible:ring-ctp-blue",
+        success: "border-ctp-green focus-visible:ring-ctp-green",
+        error: "border-ctp-red focus-visible:ring-ctp-red",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  },
+);
+
+interface TextareaProps
+  extends Omit<VariantProps<typeof textareaVariants>, "state"> {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  error?: string;
+  state?: "default" | "success" | "error";
+  className?: string;
+  id?: string;
+  required?: boolean;
+  rows?: number;
+}
+
+export const Textarea = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  disabled = false,
+  error,
+  state = "default",
+  className = "",
+  id,
+  required = false,
+  rows = 4,
+}: TextareaProps) => {
+  const textareaId =
+    id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+  const textareaState = error ? "error" : state;
+
+  return (
+    <div className="space-y-2">
+      {label && (
+        <label
+          htmlFor={textareaId}
+          className="text-sm font-medium text-ctp-text"
+        >
+          {label}
+        </label>
+      )}
+      <textarea
+        id={textareaId}
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
+        disabled={disabled}
+        required={required}
+        rows={rows}
+        className={cn(textareaVariants({ state: textareaState }), className)}
+      />
+      {error && <p className="text-sm text-ctp-red">{error}</p>}
+    </div>
+  );
+};
diff --git a/packages/ui/src/components/icons/CheckIcon.tsx b/packages/ui/src/components/icons/CheckIcon.tsx
new file mode 100644
index 0000000..ef818ab
--- /dev/null
+++ b/packages/ui/src/components/icons/CheckIcon.tsx
@@ -0,0 +1,22 @@
+interface CheckIconProps {
+  className?: string;
+}
+
+export const CheckIcon = ({ className }: CheckIconProps) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <title>Copied</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M5 13l4 4L19 7"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/ChevronDownIcon.tsx b/packages/ui/src/components/icons/ChevronDownIcon.tsx
new file mode 100644
index 0000000..00d3ec8
--- /dev/null
+++ b/packages/ui/src/components/icons/ChevronDownIcon.tsx
@@ -0,0 +1,27 @@
+interface ChevronDownIconProps {
+  className?: string;
+  isOpen?: boolean;
+}
+
+export const ChevronDownIcon = ({
+  className = "",
+  isOpen = false,
+}: ChevronDownIconProps) => {
+  const rotation = isOpen ? "rotate-180" : "";
+  return (
+    <svg
+      className={`${className} ${rotation} transition-transform`}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M19 9l-7 7-7-7"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/CloseIcon.tsx b/packages/ui/src/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000..58538d4
--- /dev/null
+++ b/packages/ui/src/components/icons/CloseIcon.tsx
@@ -0,0 +1,25 @@
+interface CloseIconProps {
+  className?: string;
+}
+
+/**
+ * Close icon component
+ */
+export const CloseIcon = ({ className = "w-4 h-4" }: CloseIconProps) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <title>Close icon</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/DeleteIcon.tsx b/packages/ui/src/components/icons/DeleteIcon.tsx
new file mode 100644
index 0000000..f4c733b
--- /dev/null
+++ b/packages/ui/src/components/icons/DeleteIcon.tsx
@@ -0,0 +1,25 @@
+interface DeleteIconProps {
+  className?: string;
+}
+
+/**
+ * Delete icon component
+ */
+export const DeleteIcon = ({ className = "w-4 h-4" }: DeleteIconProps) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <title>Delete icon</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/DocumentIcon.tsx b/packages/ui/src/components/icons/DocumentIcon.tsx
new file mode 100644
index 0000000..4f8b0d8
--- /dev/null
+++ b/packages/ui/src/components/icons/DocumentIcon.tsx
@@ -0,0 +1,19 @@
+export const DocumentIcon = () => {
+  return (
+    <svg
+      className="w-5 h-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      aria-label="Document icon"
+    >
+      <title>Document</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/EditIcon.tsx b/packages/ui/src/components/icons/EditIcon.tsx
new file mode 100644
index 0000000..b6ea5b2
--- /dev/null
+++ b/packages/ui/src/components/icons/EditIcon.tsx
@@ -0,0 +1,25 @@
+interface EditIconProps {
+  className?: string;
+}
+
+/**
+ * Edit icon component
+ */
+export const EditIcon = ({ className = "w-4 h-4" }: EditIconProps) => {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <title>Edit icon</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/ErrorIcon.tsx b/packages/ui/src/components/icons/ErrorIcon.tsx
new file mode 100644
index 0000000..1695543
--- /dev/null
+++ b/packages/ui/src/components/icons/ErrorIcon.tsx
@@ -0,0 +1,19 @@
+interface ErrorIconProps {
+  className?: string;
+}
+
+/**
+ * Error icon component
+ */
+export const ErrorIcon = ({ className = "w-5 h-5" }: ErrorIconProps) => {
+  return (
+    <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+      <title>Error icon</title>
+      <path
+        fillRule="evenodd"
+        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/LinkIcon.tsx b/packages/ui/src/components/icons/LinkIcon.tsx
new file mode 100644
index 0000000..bca2c55
--- /dev/null
+++ b/packages/ui/src/components/icons/LinkIcon.tsx
@@ -0,0 +1,23 @@
+interface LinkIconProps {
+  className?: string;
+}
+
+export const LinkIcon = ({ className }: LinkIconProps) => {
+  return (
+    <svg
+      className={className ?? "w-5 h-5"}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      aria-label="Link icon"
+    >
+      <title>Link</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/LoadingIcon.tsx b/packages/ui/src/components/icons/LoadingIcon.tsx
new file mode 100644
index 0000000..9937ea6
--- /dev/null
+++ b/packages/ui/src/components/icons/LoadingIcon.tsx
@@ -0,0 +1,31 @@
+interface LoadingIconProps {
+  className?: string;
+}
+
+/**
+ * Loading spinner icon component
+ */
+export const LoadingIcon = ({ className = "w-4 h-4" }: LoadingIconProps) => {
+  return (
+    <svg
+      className={`${className} animate-spin`}
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <title>Loading icon</title>
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/LocationIcon.tsx b/packages/ui/src/components/icons/LocationIcon.tsx
new file mode 100644
index 0000000..dcdc22a
--- /dev/null
+++ b/packages/ui/src/components/icons/LocationIcon.tsx
@@ -0,0 +1,27 @@
+interface LocationIconProps {
+  className?: string;
+}
+
+export const LocationIcon = ({ className = "w-4 h-4" }: LocationIconProps) => (
+  <svg
+    className={className}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    aria-label="Location"
+  >
+    <title>Location icon</title>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+    />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/components/icons/SalaryIcon.tsx b/packages/ui/src/components/icons/SalaryIcon.tsx
new file mode 100644
index 0000000..a6fdc0c
--- /dev/null
+++ b/packages/ui/src/components/icons/SalaryIcon.tsx
@@ -0,0 +1,21 @@
+interface SalaryIconProps {
+  className?: string;
+}
+
+export const SalaryIcon = ({ className = "w-4 h-4" }: SalaryIconProps) => (
+  <svg
+    className={className}
+    fill="none"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+    aria-label="Salary"
+  >
+    <title>Salary icon</title>
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/components/icons/ToastIcon.tsx b/packages/ui/src/components/icons/ToastIcon.tsx
new file mode 100644
index 0000000..47fa07c
--- /dev/null
+++ b/packages/ui/src/components/icons/ToastIcon.tsx
@@ -0,0 +1,58 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+const iconVariants = cva("w-5 h-5", {
+  variants: {
+    level: {
+      success: "text-green-600",
+      warning: "text-yellow-600",
+      info: "text-blue-600",
+      error: "text-red-600",
+    },
+  },
+  defaultVariants: {
+    level: "info",
+  },
+});
+
+interface ToastIconProps extends VariantProps<typeof iconVariants> {
+  level: "success" | "warning" | "info" | "error";
+}
+
+/**
+ * Toast icon component with CVA styling
+ */
+export const ToastIcon = ({ level }: ToastIconProps) => {
+  const iconProps = {
+    className: iconVariants({ level }),
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24",
+  };
+
+  return (
+    <svg {...iconProps}>
+      <title>{level.charAt(0).toUpperCase() + level.slice(1)} icon</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d={getIconPath(level)}
+      />
+    </svg>
+  );
+};
+
+/**
+ * Get the SVG path for the given toast level
+ */
+function getIconPath(level: "success" | "warning" | "info" | "error"): string {
+  const iconPaths = {
+    success: "M5 13l4 4L19 7",
+    warning:
+      "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z",
+    info: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z",
+    error: "M6 18L18 6M6 6l12 12",
+  };
+
+  return iconPaths[level];
+}
diff --git a/packages/ui/src/components/icons/UploadIcon.tsx b/packages/ui/src/components/icons/UploadIcon.tsx
new file mode 100644
index 0000000..7da2a70
--- /dev/null
+++ b/packages/ui/src/components/icons/UploadIcon.tsx
@@ -0,0 +1,19 @@
+export const UploadIcon = () => {
+  return (
+    <svg
+      className="w-5 h-5"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      aria-label="Upload icon"
+    >
+      <title>Upload</title>
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/components/icons/index.ts b/packages/ui/src/components/icons/index.ts
new file mode 100644
index 0000000..c794a39
--- /dev/null
+++ b/packages/ui/src/components/icons/index.ts
@@ -0,0 +1,13 @@
+export { CheckIcon } from "./CheckIcon";
+export { ChevronDownIcon } from "./ChevronDownIcon";
+export { CloseIcon } from "./CloseIcon";
+export { DeleteIcon } from "./DeleteIcon";
+export { DocumentIcon } from "./DocumentIcon";
+export { EditIcon } from "./EditIcon";
+export { ErrorIcon } from "./ErrorIcon";
+export { LinkIcon } from "./LinkIcon";
+export { LoadingIcon } from "./LoadingIcon";
+export { LocationIcon } from "./LocationIcon";
+export { SalaryIcon } from "./SalaryIcon";
+export { ToastIcon } from "./ToastIcon";
+export { UploadIcon } from "./UploadIcon";
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
new file mode 100644
index 0000000..fbbfaae
--- /dev/null
+++ b/packages/ui/src/components/index.ts
@@ -0,0 +1,18 @@
+// UI Components
+
+export * from "./Badge";
+export * from "./Button";
+export * from "./Card";
+export * from "./Checkbox";
+export * from "./IconButton";
+// Icons
+export * from "./icons";
+export * from "./PageHeader";
+export * from "./Placeholder";
+export * from "./RangeSlider";
+export * from "./SearchableSelect";
+export * from "./Select";
+export * from "./StatusBadge";
+export * from "./Table";
+export * from "./Textarea";
+export * from "./TextInput";
diff --git a/packages/ui/src/index.css b/packages/ui/src/index.css
new file mode 100644
index 0000000..873c0e0
--- /dev/null
+++ b/packages/ui/src/index.css
@@ -0,0 +1,53 @@
+@theme {
+  /* Catppuccin Mocha color palette */
+  --color-ctp-rosewater: #f5e0dc;
+  --color-ctp-flamingo: #f2cdcd;
+  --color-ctp-pink: #f5c2e7;
+  --color-ctp-mauve: #cba6f7;
+  --color-ctp-red: #f38ba8;
+  --color-ctp-maroon: #eba0ac;
+  --color-ctp-peach: #fab387;
+  --color-ctp-yellow: #f9e2af;
+  --color-ctp-green: #a6e3a1;
+  --color-ctp-teal: #94e2d5;
+  --color-ctp-sky: #89dceb;
+  --color-ctp-sapphire: #74c7ec;
+  --color-ctp-blue: #89b4fa;
+  --color-ctp-lavender: #b4befe;
+  --color-ctp-text: #cdd6f4;
+  --color-ctp-subtext1: #bac2de;
+  --color-ctp-subtext0: #a6adc8;
+  --color-ctp-overlay2: #9399b2;
+  --color-ctp-overlay1: #7f849c;
+  --color-ctp-overlay0: #6c7086;
+  --color-ctp-surface2: #585b70;
+  --color-ctp-surface1: #45475a;
+  --color-ctp-surface0: #313244;
+  --color-ctp-base: #1e1e2e;
+  --color-ctp-mantle: #181825;
+  --color-ctp-crust: #11111b;
+}
+
+/* Custom scrollbar styles provided by the UI package */
+.scrollbar-thin {
+  scrollbar-width: thin;
+}
+.scrollbar-thin::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scrollbar-thumb-ctp-surface2::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--ctp-surface2) / 1);
+  border-radius: 4px;
+}
+.scrollbar-track-ctp-surface0::-webkit-scrollbar-track {
+  background-color: rgb(var(--ctp-surface0) / 1);
+}
+.hover\:scrollbar-thumb-ctp-overlay0:hover::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--ctp-overlay0) / 1);
+}
+
+.cv-calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
new file mode 100644
index 0000000..2bdfd9e
--- /dev/null
+++ b/packages/ui/src/index.ts
@@ -0,0 +1,45 @@
+// Utilities
+
+// Display Components
+export { Badge } from "./components/Badge";
+// Form Components
+export { Button } from "./components/Button";
+export { Calendar } from "./components/Calendar";
+export { Checkbox } from "./components/Checkbox";
+// Date Components
+export { FormattedDate } from "./components/FormattedDate";
+export { FormattedDateRange } from "./components/FormattedDateRange";
+export { IconButton } from "./components/IconButton";
+// Icons
+export {
+  CheckIcon,
+  ChevronDownIcon,
+  CloseIcon,
+  DeleteIcon,
+  DocumentIcon,
+  EditIcon,
+  ErrorIcon,
+  LinkIcon,
+  LoadingIcon,
+  LocationIcon,
+  SalaryIcon,
+  ToastIcon,
+  UploadIcon,
+} from "./components/icons";
+export { PageHeader } from "./components/PageHeader";
+export { Placeholder } from "./components/Placeholder";
+export { RangeSlider } from "./components/RangeSlider";
+export { SearchableSelect } from "./components/SearchableSelect";
+export { Select } from "./components/Select";
+export { StatusBadge } from "./components/StatusBadge";
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+} from "./components/Table";
+export { Textarea } from "./components/Textarea";
+export { TextInput } from "./components/TextInput";
+export { cn } from "./lib/cn";
diff --git a/packages/ui/src/lib/cn.ts b/packages/ui/src/lib/cn.ts
new file mode 100644
index 0000000..7298e23
--- /dev/null
+++ b/packages/ui/src/lib/cn.ts
@@ -0,0 +1,10 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx for conditional classes and tailwind-merge to resolve conflicts
+ */
+export const cn = (...inputs: ClassValue[]) => {
+  return twMerge(clsx(inputs));
+};
diff --git a/packages/ui/src/lib/date.ts b/packages/ui/src/lib/date.ts
new file mode 100644
index 0000000..c4e0b57
--- /dev/null
+++ b/packages/ui/src/lib/date.ts
@@ -0,0 +1,54 @@
+export type DateDisplayFormat = "short" | "long" | "time";
+
+export const formatDisplayDate = (
+  date: Date,
+  format: DateDisplayFormat,
+): string => {
+  if (format === "long") {
+    return date.toLocaleDateString("en-US", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  }
+
+  if (format === "time") {
+    return date.toLocaleTimeString("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+    });
+  }
+
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+};
+
+export const getDaysInMonth = (month: number, year: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+export const getFirstDayOfMonth = (month: number, year: number): number => {
+  return new Date(year, month, 1).getDay();
+};
+
+export const isSameDate = (date1: Date, date2: Date): boolean => {
+  return date1.toDateString() === date2.toDateString();
+};
+
+export const isToday = (date: Date): boolean => {
+  return isSameDate(date, new Date());
+};
+
+export const isDateInRange = (
+  date: Date,
+  minDate?: Date | null,
+  maxDate?: Date | null,
+): boolean => {
+  if (minDate && date < minDate) return false;
+  if (maxDate && date > maxDate) return false;
+  return true;
+};
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
new file mode 100644
index 0000000..7b37d50
--- /dev/null
+++ b/packages/ui/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig/tsconfig.library.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}