B2B-88: add starter kit structure and elements

2025-06-08 16:18:30 +03:00
parent 657a36a298
commit e7b25600cb
1280 changed files with 77893 additions and 5688 deletions
--- a/packages/ui/src/shadcn/accordion.tsx
+++ b/packages/ui/src/shadcn/accordion.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem: React.FC<
+  React.ComponentPropsWithRef<typeof AccordionPrimitive.Item>
+> = ({ className, ...props }) => (
+  <AccordionPrimitive.Item className={cn('border-b', className)} {...props} />
+);
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger: React.FC<
+  React.ComponentPropsWithRef<typeof AccordionPrimitive.Trigger>
+> = ({ className, children, ...props }) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+);
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent: React.FC<
+  React.ComponentPropsWithRef<typeof AccordionPrimitive.Content>
+> = ({ className, children, ...props }) => (
+  <AccordionPrimitive.Content
+    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    {...props}
+  >
+    <div className={cn('pt-0 pb-4', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+);
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/packages/ui/src/shadcn/alert-dialog.tsx
+++ b/packages/ui/src/shadcn/alert-dialog.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '../lib/utils';
+import { buttonVariants } from './button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay: React.FC<
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent: React.FC<
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+> = ({ className, ...props }) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      className={cn(
+        'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+);
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col gap-y-3 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle: React.FC<
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Title
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+);
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription: React.FC<
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Description
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+);
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction: React.FC<
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Action
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+);
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel: React.FC<
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Cancel
+    className={cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
--- a/packages/ui/src/shadcn/alert.tsx
+++ b/packages/ui/src/shadcn/alert.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const alertVariants = cva(
+  '[&>svg]:text-foreground relative flex w-full flex-col gap-y-2 rounded-lg border bg-linear-to-r px-4 py-3.5 text-sm [&>svg]:absolute [&>svg]:top-4 [&>svg]:left-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-7',
+  {
+    variants: {
+      variant: {
+        default: 'bg-background text-foreground',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
+        success:
+          'border-green-600/50 text-green-600 dark:border-green-600 [&>svg]:text-green-600',
+        warning:
+          'border-orange-600/50 text-orange-600 dark:border-orange-600 [&>svg]:text-orange-600',
+        info: 'border-blue-600/50 text-blue-600 dark:border-blue-600 [&>svg]:text-blue-600',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+const Alert: React.FC<
+  React.ComponentPropsWithRef<'div'> & VariantProps<typeof alertVariants>
+> = ({ className, variant, ...props }) => (
+  <div
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+);
+Alert.displayName = 'Alert';
+
+const AlertTitle: React.FC<React.ComponentPropsWithRef<'h5'>> = ({
+  className,
+  ...props
+}) => (
+  <h5
+    className={cn('leading-none font-bold tracking-tight', className)}
+    {...props}
+  />
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription: React.FC<React.ComponentPropsWithRef<'div'>> = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn('text-sm font-normal [&_p]:leading-relaxed', className)}
+    {...props}
+  />
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription };
--- a/packages/ui/src/shadcn/avatar.tsx
+++ b/packages/ui/src/shadcn/avatar.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../lib/utils';
+
+const Avatar: React.FC<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+> = ({ className, ...props }) => (
+  <AvatarPrimitive.Root
+    className={cn(
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      className,
+    )}
+    {...props}
+  />
+);
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage: React.FC<
+  React.ComponentPropsWithRef<typeof AvatarPrimitive.Image>
+> = ({ className, ...props }) => (
+  <AvatarPrimitive.Image
+    className={cn('aspect-square h-full w-full object-cover', className)}
+    {...props}
+  />
+);
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback: React.FC<
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+> = ({ className, ...props }) => (
+  <AvatarPrimitive.Fallback
+    className={cn(
+      'bg-muted flex h-full w-full items-center justify-center rounded-full',
+      className,
+    )}
+    {...props}
+  />
+);
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
--- a/packages/ui/src/shadcn/badge.tsx
+++ b/packages/ui/src/shadcn/badge.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const badgeVariants = cva(
+  'focus:ring-ring inline-flex items-center rounded-md border px-1.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground border-transparent',
+        secondary: 'bg-secondary text-secondary-foreground border-transparent',
+        destructive: 'text-destructive border-destructive',
+        outline: 'text-foreground',
+        success: 'border-green-500 text-green-500',
+        warning: 'border-orange-500 text-orange-500',
+        info: 'border-blue-500 text-blue-500',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
--- a/packages/ui/src/shadcn/breadcrumb.tsx
+++ b/packages/ui/src/shadcn/breadcrumb.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+
+import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
+import { Slot } from '@radix-ui/react-slot';
+
+import { cn } from '../lib/utils';
+
+const Breadcrumb: React.FC<
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode;
+  }
+> = ({ ...props }) => <nav aria-label="breadcrumb" {...props} />;
+Breadcrumb.displayName = 'Breadcrumb';
+
+const BreadcrumbList: React.FC<React.ComponentPropsWithRef<'ol'>> = ({
+  className,
+  ...props
+}) => (
+  <ol
+    className={cn(
+      'text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words',
+      className,
+    )}
+    {...props}
+  />
+);
+BreadcrumbList.displayName = 'BreadcrumbList';
+
+const BreadcrumbItem: React.FC<React.ComponentPropsWithRef<'li'>> = ({
+  className,
+  ...props
+}) => (
+  <li
+    className={cn('inline-flex items-center gap-1.5', className)}
+    {...props}
+  />
+);
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+
+const BreadcrumbLink: React.FC<
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean;
+  }
+> = ({ asChild, className, ...props }) => {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      className={cn(
+        'text-foreground transition-colors hover:underline',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+
+const BreadcrumbPage: React.FC<React.ComponentPropsWithoutRef<'span'>> = ({
+  className,
+  ...props
+}) => (
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn('text-foreground font-normal', className)}
+    {...props}
+  />
+);
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn('[&>svg]:size-3.5', className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+);
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis';
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
--- a/packages/ui/src/shadcn/button.tsx
+++ b/packages/ui/src/shadcn/button.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const buttonVariants = cva(
+  'focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-xs',
+        outline:
+          'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-xs',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'decoration-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        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 interface ButtonProps
+  extends React.ComponentPropsWithRef<'button'>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+};
+
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
--- a/packages/ui/src/shadcn/calendar.tsx
+++ b/packages/ui/src/shadcn/calendar.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import * as React from 'react';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '../lib/utils';
+import { buttonVariants } from './button';
+
+export type { DateRange } from 'react-day-picker';
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'gap-x-2 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100',
+        ),
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside: 'text-muted-foreground opacity-50',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => (
+          <ChevronLeft className="h-4 w-4" {...props} />
+        ),
+        IconRight: ({ ...props }) => (
+          <ChevronRight className="h-4 w-4" {...props} />
+        ),
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };
--- a/packages/ui/src/shadcn/card.tsx
+++ b/packages/ui/src/shadcn/card.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div
+    className={cn('bg-card text-card-foreground rounded-xl border', className)}
+    {...props}
+  />
+);
+Card.displayName = 'Card';
+
+const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement>> = ({
+  className,
+  ...props
+}) => (
+  <h3
+    className={cn('leading-none font-semibold tracking-tight', className)}
+    {...props}
+  />
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({
+  className,
+  ...props
+}) => (
+  <p className={cn('text-muted-foreground text-sm', className)} {...props} />
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => <div className={cn('p-6 pt-0', className)} {...props} />;
+CardContent.displayName = 'CardContent';
+
+const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => (
+  <div className={cn('flex items-center p-6 pt-0', className)} {...props} />
+);
+CardFooter.displayName = 'CardFooter';
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
--- a/packages/ui/src/shadcn/chart.tsx
+++ b/packages/ui/src/shadcn/chart.tsx
@@ -0,0 +1,361 @@
+'use client';
+
+import * as React from 'react';
+
+import * as RechartsPrimitive from 'recharts';
+
+import { cn } from '../lib/utils';
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: '', dark: '.dark' } as const;
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>;
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error('useChart must be used within a <ChartContainer />');
+  }
+
+  return context;
+}
+
+const ChartContainer: React.FC<
+  React.ComponentProps<'div'> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >['children'];
+  }
+> = ({ id, className, children, config, ...props }) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+};
+ChartContainer.displayName = 'Chart';
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme ?? config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join('\n')}
+}
+`,
+          )
+          .join('\n'),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent: React.FC<
+  React.ComponentPropsWithRef<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentPropsWithRef<'div'> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: 'line' | 'dot' | 'dashed';
+      nameKey?: string;
+      labelKey?: string;
+    }
+> = ({
+  ref,
+  active,
+  payload,
+  className,
+  indicator = 'dot',
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}) => {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel ?? !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+    const value =
+      !labelKey && typeof label === 'string'
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn('font-medium', labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn('font-medium', labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== 'dot';
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl',
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color ?? item.payload.fill ?? item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',
+                indicator === 'dot' && 'items-center',
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          'shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)',
+                          {
+                            'h-2.5 w-2.5': indicator === 'dot',
+                            'w-1': indicator === 'line',
+                            'w-0 border-[1.5px] border-dashed bg-transparent':
+                              indicator === 'dashed',
+                            'my-0.5': nestLabel && indicator === 'dashed',
+                          },
+                        )}
+                        style={
+                          {
+                            '--color-bg': indicatorColor,
+                            '--color-border': indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      'flex flex-1 justify-between leading-none',
+                      nestLabel ? 'items-end' : 'items-center',
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label ?? item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+ChartTooltipContent.displayName = 'ChartTooltip';
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent: React.FC<
+  React.ComponentPropsWithRef<'div'> &
+    Pick<RechartsPrimitive.LegendProps, 'payload' | 'verticalAlign'> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+> = ({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = 'bottom',
+  nameKey,
+  ref,
+}) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'flex items-center justify-center gap-4',
+        verticalAlign === 'top' ? 'pb-3' : 'pt-3',
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey ?? item.dataKey ?? 'value'}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              '[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3',
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+ChartLegendContent.displayName = 'ChartLegend';
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== 'object' || !payload) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    'payload' in payload &&
+    typeof payload.payload === 'object' &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === 'string'
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
--- a/packages/ui/src/shadcn/checkbox.tsx
+++ b/packages/ui/src/shadcn/checkbox.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
+
+const Checkbox: React.FC<
+  React.ComponentPropsWithRef<typeof CheckboxPrimitive.Root>
+> = ({ className, ...props }) => (
+  <CheckboxPrimitive.Root
+    className={cn(
+      'peer border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-xs border shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn('flex items-center justify-center text-current')}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
--- a/packages/ui/src/shadcn/collapsible.tsx
+++ b/packages/ui/src/shadcn/collapsible.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/packages/ui/src/shadcn/command.tsx
+++ b/packages/ui/src/shadcn/command.tsx
@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../lib/utils';
+import { Dialog, DialogContent } from './dialog';
+
+const Command: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive>
+> = ({ className, ...props }) => (
+  <CommandPrimitive
+    className={cn(
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      className,
+    )}
+    {...props}
+  />
+);
+Command.displayName = CommandPrimitive.displayName;
+
+type CommandDialogProps = DialogProps;
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Input>
+> = ({ className, ...props }) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      className={cn(
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+);
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive.List>
+> = ({ className, ...props }) => (
+  <CommandPrimitive.List
+    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
+    {...props}
+  />
+);
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Empty>
+> = (props) => (
+  <CommandPrimitive.Empty className="py-6 text-center text-sm" {...props} />
+);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Group>
+> = ({ className, ...props }) => (
+  <CommandPrimitive.Group
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Separator>
+> = ({ className, ...props }) => (
+  <CommandPrimitive.Separator
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+);
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem: React.FC<
+  React.ComponentPropsWithRef<typeof CommandPrimitive.Item>
+> = ({ className, ...props }) => (
+  <CommandPrimitive.Item
+    className={cn(
+      "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+);
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/packages/ui/src/shadcn/data-table.tsx
+++ b/packages/ui/src/shadcn/data-table.tsx
@@ -0,0 +1,86 @@
+'use client';
+
+import type { ColumnDef } from '@tanstack/react-table';
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+import { Trans } from '../makerkit/trans';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from './table';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  // TODO: remove when https://github.com/TanStack/table/issues/5567 gets fixed
+  'use no memo';
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="rounded-md border">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                return (
+                  <TableHead key={header.id}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                );
+              })}
+            </TableRow>
+          ))}
+        </TableHeader>
+
+        <TableBody>
+          {table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-row-id={row.id}
+                data-state={row.getIsSelected() && 'selected'}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell key={cell.id}>
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          ) : (
+            <TableRow>
+              <TableCell colSpan={columns.length} className="h-24 text-center">
+                <Trans i18nKey={'common:noData'} />
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
--- a/packages/ui/src/shadcn/dialog.tsx
+++ b/packages/ui/src/shadcn/dialog.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay: React.FC<
+  React.ComponentPropsWithRef<typeof DialogPrimitive.Overlay>
+> = ({ className, ...props }) => (
+  <DialogPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent: React.FC<
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+> = ({ className, children, ...props }) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      className={cn(
+        'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col space-y-1.5 text-left', className)}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle: React.FC<
+  React.ComponentPropsWithRef<typeof DialogPrimitive.Title>
+> = ({ className, ...props }) => (
+  <DialogPrimitive.Title
+    className={cn(
+      'text-lg leading-none font-semibold tracking-tight',
+      className,
+    )}
+    {...props}
+  />
+);
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription: React.FC<
+  React.ComponentPropsWithRef<typeof DialogPrimitive.Description>
+> = ({ className, ...props }) => (
+  <DialogPrimitive.Description
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+);
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/packages/ui/src/shadcn/dropdown-menu.tsx
+++ b/packages/ui/src/shadcn/dropdown-menu.tsx
@@ -0,0 +1,190 @@
+'use client';
+
+import * as React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from '@radix-ui/react-icons';
+
+import { cn } from '../lib/utils';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+> = ({ className, inset, children, ...props }) => (
+  <DropdownMenuPrimitive.SubTrigger
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden select-none',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+);
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.SubContent>
+> = ({ className, ...props }) => (
+  <DropdownMenuPrimitive.SubContent
+    className={cn(
+      'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+      className,
+    )}
+    {...props}
+  />
+);
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Content>
+> = ({ className, sideOffset = 4, ...props }) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 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',
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+);
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+> = ({ className, inset, ...props }) => (
+  <DropdownMenuPrimitive.Item
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+);
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.CheckboxItem>
+> = ({ className, children, checked, ...props }) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+);
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.RadioItem>
+> = ({ className, children, ...props }) => (
+  <DropdownMenuPrimitive.RadioItem
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+);
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel: React.FC<
+  React.ComponentPropsWithRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+> = ({ className, inset, ...props }) => (
+  <DropdownMenuPrimitive.Label
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className,
+    )}
+    {...props}
+  />
+);
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator: React.FC<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+> = ({ className, ...props }) => (
+  <DropdownMenuPrimitive.Separator
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+);
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
--- a/packages/ui/src/shadcn/form.tsx
+++ b/packages/ui/src/shadcn/form.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import * as React from 'react';
+
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import { Slot } from '@radix-ui/react-slot';
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+
+import { cn } from '../lib/utils';
+import { Trans } from '../makerkit/trans';
+import { Label } from './label';
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue,
+);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error('useFormField should be used within <FormField>');
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue,
+);
+
+const FormItem: React.FC<React.ComponentPropsWithRef<'div'>> = ({
+  className,
+  ...props
+}) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div className={cn('flex flex-col gap-y-2', className)} {...props} />
+    </FormItemContext.Provider>
+  );
+};
+FormItem.displayName = 'FormItem';
+
+const FormLabel: React.FC<
+  React.ComponentPropsWithRef<typeof LabelPrimitive.Root>
+> = ({ className, ...props }) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      className={cn(error && 'text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+};
+FormLabel.displayName = 'FormLabel';
+
+const FormControl: React.FC<React.ComponentPropsWithoutRef<typeof Slot>> = ({
+  ...props
+}) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+};
+FormControl.displayName = 'FormControl';
+
+const FormDescription: React.FC<React.ComponentPropsWithRef<'p'>> = ({
+  className,
+  ...props
+}) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-[0.8rem]', className)}
+      {...props}
+    />
+  );
+};
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage: React.FC<React.ComponentPropsWithRef<'p'>> = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      id={formMessageId}
+      className={cn('text-destructive text-[0.8rem] font-medium', className)}
+      {...props}
+    >
+      {typeof body === 'string' ? (
+        <Trans i18nKey={body} defaults={body} />
+      ) : (
+        body
+      )}
+    </p>
+  );
+};
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
--- a/packages/ui/src/shadcn/heading.tsx
+++ b/packages/ui/src/shadcn/heading.tsx
@@ -0,0 +1,81 @@
+import { cn } from '../lib/utils';
+
+type Level = 1 | 2 | 3 | 4 | 5 | 6;
+
+export function Heading({
+  level,
+  children,
+  className,
+}: React.PropsWithChildren<{ level?: Level; className?: string }>) {
+  switch (level) {
+    case 1:
+      return (
+        <h1
+          className={cn(
+            `font-heading scroll-m-20 text-3xl font-bold tracking-tight lg:text-4xl dark:text-white`,
+            className,
+          )}
+        >
+          {children}
+        </h1>
+      );
+    case 2:
+      return (
+        <h2
+          className={cn(
+            `font-heading scroll-m-20 pb-2 text-2xl font-semibold tracking-tight transition-colors first:mt-0 lg:text-3xl`,
+            className,
+          )}
+        >
+          {children}
+        </h2>
+      );
+    case 3:
+      return (
+        <h3
+          className={cn(
+            'font-heading scroll-m-20 text-xl font-semibold tracking-tight lg:text-2xl',
+            className,
+          )}
+        >
+          {children}
+        </h3>
+      );
+    case 4:
+      return (
+        <h4
+          className={cn(
+            'font-heading scroll-m-20 text-lg font-semibold tracking-tight lg:text-xl',
+            className,
+          )}
+        >
+          {children}
+        </h4>
+      );
+    case 5:
+      return (
+        <h5
+          className={cn(
+            'font-heading scroll-m-20 text-base font-medium lg:text-lg',
+            className,
+          )}
+        >
+          {children}
+        </h5>
+      );
+    case 6:
+      return (
+        <h6
+          className={cn(
+            'font-heading scroll-m-20 text-base font-medium',
+            className,
+          )}
+        >
+          {children}
+        </h6>
+      );
+
+    default:
+      return <Heading level={1}>{children}</Heading>;
+  }
+}
--- a/packages/ui/src/shadcn/index.ts
+++ b/packages/ui/src/shadcn/index.ts
@@ -0,0 +1 @@
+export { cn } from '../lib/utils';
--- a/packages/ui/src/shadcn/input-otp.tsx
+++ b/packages/ui/src/shadcn/input-otp.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import * as React from 'react';
+
+import { DashIcon } from '@radix-ui/react-icons';
+import { OTPInput, OTPInputContext } from 'input-otp';
+
+import { cn } from '../lib/utils';
+
+const InputOTP: React.FC<React.ComponentPropsWithoutRef<typeof OTPInput>> = ({
+  className,
+  containerClassName,
+  ...props
+}) => (
+  <OTPInput
+    containerClassName={cn(
+      'flex items-center gap-2 has-disabled:opacity-50',
+      containerClassName,
+    )}
+    className={cn('disabled:cursor-not-allowed', className)}
+    {...props}
+  />
+);
+InputOTP.displayName = 'InputOTP';
+
+const InputOTPGroup: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
+  className,
+  ...props
+}) => <div className={cn('flex items-center', className)} {...props} />;
+
+InputOTPGroup.displayName = 'InputOTPGroup';
+
+const InputOTPSlot: React.FC<
+  React.ComponentPropsWithRef<'div'> & { index: number }
+> = ({ index, className, ...props }) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const slot = inputOTPContext.slots[index];
+
+  if (!slot) {
+    return null;
+  }
+
+  const { char, isActive, hasFakeCaret } = slot;
+
+  return (
+    <div
+      className={cn(
+        'border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md',
+        isActive && 'ring-ring z-10 ring-1',
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+};
+InputOTPSlot.displayName = 'InputOTPSlot';
+
+const InputOTPSeparator: React.FC<React.ComponentPropsWithoutRef<'div'>> = ({
+  ...props
+}) => (
+  <div role="separator" {...props}>
+    <DashIcon />
+  </div>
+);
+InputOTPSeparator.displayName = 'InputOTPSeparator';
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/packages/ui/src/shadcn/input.tsx
+++ b/packages/ui/src/shadcn/input.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+export type InputProps = React.ComponentPropsWithRef<'input'>;
+
+const Input: React.FC<InputProps> = ({
+  className,
+  type = 'text',
+  ...props
+}) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        'border-input file:text-foreground hover:border-ring/50 placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base shadow-2xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+Input.displayName = 'Input';
+
+export { Input };
--- a/packages/ui/src/shadcn/label.tsx
+++ b/packages/ui/src/shadcn/label.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import * as React from 'react';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const labelVariants = cva(
+  'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+);
+
+const Label: React.FC<
+  React.ComponentPropsWithRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+> = ({ className, ...props }) => (
+  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
+);
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/packages/ui/src/shadcn/navigation-menu.tsx
+++ b/packages/ui/src/shadcn/navigation-menu.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import * as React from 'react';
+
+import { ChevronDownIcon } from '@radix-ui/react-icons';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const NavigationMenu: React.FC<
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Root>
+> = ({ className, children, ...props }) => (
+  <NavigationMenuPrimitive.Root
+    className={cn(
+      'relative z-10 flex max-w-max flex-1 items-center justify-center',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+);
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList: React.FC<
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>
+> = ({ className, ...props }) => (
+  <NavigationMenuPrimitive.List
+    className={cn(
+      'group flex flex-1 list-none items-center justify-center space-x-1',
+      className,
+    )}
+    {...props}
+  />
+);
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  'group bg-background hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-active:bg-accent/50 data-[state=open]:bg-accent/50 inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors focus:outline-hidden disabled:pointer-events-none disabled:opacity-50',
+);
+
+const NavigationMenuTrigger: React.FC<
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Trigger>
+> = ({ className, children, ...props }) => (
+  <NavigationMenuPrimitive.Trigger
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    {...props}
+  >
+    {children}{' '}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+);
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent: React.FC<
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+> = ({ className, ...props }) => (
+  <NavigationMenuPrimitive.Content
+    className={cn(
+      '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 top-0 left-0 w-full md:absolute md:w-auto',
+      className,
+    )}
+    {...props}
+  />
+);
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport: React.FC<
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+> = ({ className, ...props }) => (
+  <div className={cn('absolute top-full left-0 flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-xs md:w-[var(--radix-navigation-menu-viewport-width)]',
+        className,
+      )}
+      {...props}
+    />
+  </div>
+);
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator: React.FC<
+  React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Indicator>
+> = ({ className, ...props }) => (
+  <NavigationMenuPrimitive.Indicator
+    className={cn(
+      'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+      className,
+    )}
+    {...props}
+  >
+    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+);
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};
--- a/packages/ui/src/shadcn/popover.tsx
+++ b/packages/ui/src/shadcn/popover.tsx
@@ -0,0 +1,33 @@
+'use client';
+
+import * as React from 'react';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent: React.FC<
+  React.ComponentProps<typeof PopoverPrimitive.Content>
+> = ({ className, align = 'center', sideOffset = 4, ...props }) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+);
+
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/packages/ui/src/shadcn/progress.tsx
+++ b/packages/ui/src/shadcn/progress.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { cn } from '../lib/utils';
+
+const Progress: React.FC<
+  React.ComponentProps<typeof ProgressPrimitive.Root>
+> = ({ className, value, ...props }) => (
+  <ProgressPrimitive.Root
+    className={cn(
+      'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+      className,
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="bg-primary h-full w-full flex-1 transition-all"
+      style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+);
+
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
--- a/packages/ui/src/shadcn/radio-group.tsx
+++ b/packages/ui/src/shadcn/radio-group.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import * as React from 'react';
+
+import { CheckIcon } from '@radix-ui/react-icons';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+import { cn } from '../lib/utils';
+
+const RadioGroup: React.FC<
+  React.ComponentPropsWithRef<typeof RadioGroupPrimitive.Root>
+> = ({ className, ...props }) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+    />
+  );
+};
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem: React.FC<
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+> = ({ className, ...props }) => {
+  return (
+    <RadioGroupPrimitive.Item
+      className={cn(
+        'border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow-xs focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="fill-primary h-3.5 w-3.5" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+};
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+const RadioGroupItemLabel = (
+  props: React.PropsWithChildren<{
+    className?: string;
+    selected?: boolean;
+  }>,
+) => {
+  return (
+    <label
+      className={cn(
+        props.className,
+        'flex cursor-pointer rounded-md' +
+          ' border-input items-center space-x-4 border' +
+          ' transition-duration-500 focus-within:border-primary p-4 text-sm transition-all',
+        {
+          [`bg-muted`]: props.selected,
+          [`hover:bg-muted`]: !props.selected,
+        },
+      )}
+    >
+      {props.children}
+    </label>
+  );
+};
+RadioGroupItemLabel.displayName = 'RadioGroupItemLabel';
+
+export { RadioGroup, RadioGroupItem, RadioGroupItemLabel };
--- a/packages/ui/src/shadcn/scroll-area.tsx
+++ b/packages/ui/src/shadcn/scroll-area.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import * as React from 'react';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '../lib/utils';
+
+const ScrollArea: React.FC<
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+> = ({ className, children, ...props }) => (
+  <ScrollAreaPrimitive.Root
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+);
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar: React.FC<
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+> = ({ className, orientation = 'vertical', ...props }) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    orientation={orientation}
+    className={cn(
+      'flex touch-none transition-colors select-none',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+);
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/packages/ui/src/shadcn/select.tsx
+++ b/packages/ui/src/shadcn/select.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import * as React from 'react';
+
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@radix-ui/react-icons';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+import { cn } from '../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger: React.FC<
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Trigger>
+> = ({ className, children, ...props }) => (
+  <SelectPrimitive.Trigger
+    className={cn(
+      'border-input ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-2xs focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+);
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton: React.FC<
+  React.ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>
+> = ({ className, ...props }) => (
+  <SelectPrimitive.ScrollUpButton
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+);
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton: React.FC<
+  React.ComponentPropsWithRef<typeof SelectPrimitive.ScrollDownButton>
+> = ({ className, ...props }) => (
+  <SelectPrimitive.ScrollDownButton
+    className={cn(
+      'flex cursor-default items-center justify-center py-1',
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+);
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent: React.FC<
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+> = ({ className, children, position = 'popper', ...props }) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      className={cn(
+        'bg-popover text-popover-foreground 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 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md',
+        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',
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel: React.FC<
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Label>
+> = ({ className, ...props }) => (
+  <SelectPrimitive.Label
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+);
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem: React.FC<
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Item>
+> = ({ className, children, ...props }) => (
+  <SelectPrimitive.Item
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-xs py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+);
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator: React.FC<
+  React.ComponentPropsWithRef<typeof SelectPrimitive.Separator>
+> = ({ className, ...props }) => (
+  <SelectPrimitive.Separator
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+);
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
--- a/packages/ui/src/shadcn/separator.tsx
+++ b/packages/ui/src/shadcn/separator.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+import { cn } from '../lib/utils';
+
+const Separator: React.FC<
+  React.ComponentPropsWithRef<typeof SeparatorPrimitive.Root>
+> = ({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}) => (
+  <SeparatorPrimitive.Root
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'bg-border shrink-0',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className,
+    )}
+    {...props}
+  />
+);
+
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/packages/ui/src/shadcn/sheet.tsx
+++ b/packages/ui/src/shadcn/sheet.tsx
@@ -0,0 +1,133 @@
+'use client';
+
+import * as React from 'react';
+
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '../lib/utils';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay: React.FC<
+  React.ComponentPropsWithRef<typeof SheetPrimitive.Overlay>
+> = ({ className, ...props }) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className,
+    )}
+    {...props}
+  />
+);
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b',
+        bottom:
+          'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t',
+        left: 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        right:
+          'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent: React.FC<SheetContentProps> = ({
+  side = 'right',
+  className,
+  children,
+  ...props
+}) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col gap-y-3 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle: React.FC<
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+> = ({ className, ...props }) => (
+  <SheetPrimitive.Title
+    className={cn('text-foreground text-lg font-semibold', className)}
+    {...props}
+  />
+);
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription: React.FC<
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+> = ({ className, ...props }) => (
+  <SheetPrimitive.Description
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+);
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};
--- a/packages/ui/src/shadcn/sidebar.tsx
+++ b/packages/ui/src/shadcn/sidebar.tsx
--- a/packages/ui/src/shadcn/skeleton.tsx
+++ b/packages/ui/src/shadcn/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from '../lib/utils';
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('bg-primary/10 animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
--- a/packages/ui/src/shadcn/sonner.tsx
+++ b/packages/ui/src/shadcn/sonner.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, toast } from 'sonner';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          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',
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };
--- a/packages/ui/src/shadcn/switch.tsx
+++ b/packages/ui/src/shadcn/switch.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+import { cn } from '../lib/utils';
+
+const Switch: React.FC<
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+> = ({ className, ...props }) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+      )}
+    />
+  </SwitchPrimitives.Root>
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
--- a/packages/ui/src/shadcn/table.tsx
+++ b/packages/ui/src/shadcn/table.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+const Table: React.FC<React.HTMLAttributes<HTMLTableElement>> = ({
+  className,
+  ...props
+}) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+);
+Table.displayName = 'Table';
+
+const TableHeader: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => <thead className={cn('[&_tr]:border-b', className)} {...props} />;
+TableHeader.displayName = 'TableHeader';
+
+const TableBody: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => (
+  <tbody className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+);
+TableBody.displayName = 'TableBody';
+
+const TableFooter: React.FC<React.HTMLAttributes<HTMLTableSectionElement>> = ({
+  className,
+  ...props
+}) => (
+  <tfoot
+    className={cn(
+      'bg-muted/50 border-t font-medium last:[&>tr]:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+);
+TableFooter.displayName = 'TableFooter';
+
+const TableRow: React.FC<React.HTMLAttributes<HTMLTableRowElement>> = ({
+  className,
+  ...props
+}) => (
+  <tr
+    className={cn(
+      'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+      className,
+    )}
+    {...props}
+  />
+);
+TableRow.displayName = 'TableRow';
+
+const TableHead: React.FC<React.ThHTMLAttributes<HTMLTableCellElement>> = ({
+  className,
+  ...props
+}) => (
+  <th
+    className={cn(
+      'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
+    )}
+    {...props}
+  />
+);
+TableHead.displayName = 'TableHead';
+
+const TableCell: React.FC<React.TdHTMLAttributes<HTMLTableCellElement>> = ({
+  className,
+  ...props
+}) => (
+  <td
+    className={cn(
+      'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      className,
+    )}
+    {...props}
+  />
+);
+TableCell.displayName = 'TableCell';
+
+const TableCaption: React.FC<React.HTMLAttributes<HTMLTableCaptionElement>> = ({
+  className,
+  ...props
+}) => (
+  <caption
+    className={cn('text-muted-foreground mt-4 text-sm', className)}
+    {...props}
+  />
+);
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
--- a/packages/ui/src/shadcn/tabs.tsx
+++ b/packages/ui/src/shadcn/tabs.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import * as React from 'react';
+
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList: React.FC<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+> = ({ className, ...props }) => (
+  <TabsPrimitive.List
+    className={cn(
+      'bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1',
+      className,
+    )}
+    {...props}
+  />
+);
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger: React.FC<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+> = ({ className, ...props }) => (
+  <TabsPrimitive.Trigger
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded-xs px-3 py-1.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs',
+      className,
+    )}
+    {...props}
+  />
+);
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent: React.FC<
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+> = ({ className, ...props }) => (
+  <TabsPrimitive.Content
+    className={cn(
+      'ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
+      className,
+    )}
+    {...props}
+  />
+);
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/packages/ui/src/shadcn/textarea.tsx
+++ b/packages/ui/src/shadcn/textarea.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '../lib/utils';
+
+export type TextareaProps = React.ComponentPropsWithRef<'textarea'>;
+
+const Textarea: React.FC<TextareaProps> = ({ className, ...props }) => {
+  return (
+    <textarea
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
--- a/packages/ui/src/shadcn/tooltip.tsx
+++ b/packages/ui/src/shadcn/tooltip.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import * as React from 'react';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent: React.FC<
+  React.ComponentPropsWithRef<typeof TooltipPrimitive.Content>
+> = ({ className, sideOffset = 4, ...props }) => (
+  <TooltipPrimitive.Content
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-primary text-primary-foreground 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 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs',
+      className,
+    )}
+    {...props}
+  />
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };