feat: add Base UI Tailwind component library

Add composable wrappers for 37 Base UI component families.

Expose primitive and convenience APIs with shared styling utilities.

Add the registry manifest, installer CLI, generation and export checks.

Include a smoke example covering primitive and shadcn-style imports.

src/components/ui/accordion/header.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import { cn } from "@/lib/utils"
+
+export type AccordionHeaderProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Header> & {
+  className?: string
+}
+
+const BaseAccordionHeader = BaseAccordion.Header as React.ElementType
+
+export const AccordionHeader = React.forwardRef<HTMLElement, AccordionHeaderProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAccordionHeader
+      ref={ref}
+      className={cn(
+        "flex",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AccordionHeader.displayName = "AccordionHeader"

src/components/ui/accordion/index.ts

@@ -0,0 +1,30 @@
+import { AccordionRoot } from "./root"
+import { AccordionItem } from "./item"
+import { AccordionHeader } from "./header"
+import { AccordionTrigger } from "./trigger"
+import { AccordionPanel } from "./panel"
+
+const AccordionPrimitive = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel,
+}
+
+export default AccordionPrimitive
+
+export {
+  AccordionRoot as Accordion,
+  AccordionRoot,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionPanel,
+}
+
+export type { AccordionRootProps } from "./root"
+export type { AccordionItemProps } from "./item"
+export type { AccordionHeaderProps } from "./header"
+export type { AccordionTriggerProps } from "./trigger"
+export type { AccordionPanelProps } from "./panel"

src/components/ui/accordion/item.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import { cn } from "@/lib/utils"
+
+export type AccordionItemProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Item> & {
+  className?: string
+}
+
+const BaseAccordionItem = BaseAccordion.Item as React.ElementType
+
+export const AccordionItem = React.forwardRef<HTMLElement, AccordionItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAccordionItem
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+AccordionItem.displayName = "AccordionItem"

src/components/ui/accordion/panel.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import { cn } from "@/lib/utils"
+
+export type AccordionPanelProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel> & {
+  className?: string
+}
+
+const BaseAccordionPanel = BaseAccordion.Panel as React.ElementType
+
+export const AccordionPanel = React.forwardRef<HTMLElement, AccordionPanelProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAccordionPanel
+      ref={ref}
+      className={cn(
+        "h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] data-ending-style:h-0 data-starting-style:h-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AccordionPanel.displayName = "AccordionPanel"

src/components/ui/accordion/root.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import { cn } from "@/lib/utils"
+
+export type AccordionRootProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Root> & {
+  className?: string
+}
+
+const BaseAccordionRoot = BaseAccordion.Root as React.ElementType
+
+export const AccordionRoot = React.forwardRef<HTMLElement, AccordionRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAccordionRoot
+      ref={ref}
+      className={cn(
+        "flex w-full max-w-80 flex-col border border-neutral-950 text-neutral-950 dark:border-white dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AccordionRoot.displayName = "AccordionRoot"

src/components/ui/accordion/trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
+import { cn } from "@/lib/utils"
+
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger> & {
+  className?: string
+}
+
+const BaseAccordionTrigger = BaseAccordion.Trigger as React.ElementType
+
+export const AccordionTrigger = React.forwardRef<HTMLElement, AccordionTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAccordionTrigger
+      ref={ref}
+      className={cn(
+        "group flex w-full items-center justify-between gap-4 bg-transparent px-3 py-2 text-left text-sm font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 focus-visible:relative focus-visible:z-1 focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-neutral-950 dark:focus-visible:outline-white dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AccordionTrigger.displayName = "AccordionTrigger"

src/components/ui/alert-dialog/backdrop.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogBackdropProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Backdrop> & {
+  className?: string
+}
+
+const BaseAlertDialogBackdrop = BaseAlertDialog.Backdrop as React.ElementType
+
+export const AlertDialogBackdrop = React.forwardRef<HTMLElement, AlertDialogBackdropProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogBackdrop
+      ref={ref}
+      className={cn(
+        "z-40",
+        "fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-350 ease-out data-ending-style:duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogBackdrop.displayName = "AlertDialogBackdrop"

src/components/ui/alert-dialog/close.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogCloseProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Close> & {
+  className?: string
+}
+
+const BaseAlertDialogClose = BaseAlertDialog.Close as React.ElementType
+
+export const AlertDialogClose = React.forwardRef<HTMLElement, AlertDialogCloseProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogClose
+      ref={ref}
+      className={cn(
+        "flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 [&:not([data-disabled]):active]:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800 dark:[&:not([data-disabled]):active]:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:focus-visible:outline-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogClose.displayName = "AlertDialogClose"

src/components/ui/alert-dialog/content.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { AlertDialogBackdrop } from "./backdrop"
+import { AlertDialogPortal } from "./portal"
+import { AlertDialogPopup, type AlertDialogPopupProps } from "./popup"
+
+export type AlertDialogContentProps = AlertDialogPopupProps
+
+export const AlertDialogContent = React.forwardRef<HTMLElement, AlertDialogContentProps>(
+  ({ className, ...props }, ref) => (
+    <AlertDialogPortal>
+      <AlertDialogBackdrop />
+        <AlertDialogPopup ref={ref} className={cn(className)} {...props} />
+    </AlertDialogPortal>
+  ),
+)
+
+AlertDialogContent.displayName = "AlertDialogContent"

src/components/ui/alert-dialog/description.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Description> & {
+  className?: string
+}
+
+const BaseAlertDialogDescription = BaseAlertDialog.Description as React.ElementType
+
+export const AlertDialogDescription = React.forwardRef<HTMLElement, AlertDialogDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogDescription
+      ref={ref}
+      className={cn(
+        "text-sm text-neutral-600 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogDescription.displayName = "AlertDialogDescription"

src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,52 @@
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { AlertDialogRoot } from "./root"
+import { AlertDialogBackdrop } from "./backdrop"
+import { AlertDialogClose } from "./close"
+import { AlertDialogDescription } from "./description"
+import { AlertDialogPopup } from "./popup"
+import { AlertDialogPortal } from "./portal"
+import { AlertDialogTitle } from "./title"
+import { AlertDialogTrigger } from "./trigger"
+import { AlertDialogViewport } from "./viewport"
+import { AlertDialogContent } from "./content"
+
+const AlertDialogPrimitive = {
+  Root: AlertDialogRoot,
+  Backdrop: AlertDialogBackdrop,
+  Close: AlertDialogClose,
+  Description: AlertDialogDescription,
+  Popup: AlertDialogPopup,
+  Portal: AlertDialogPortal,
+  Title: AlertDialogTitle,
+  Trigger: AlertDialogTrigger,
+  Viewport: AlertDialogViewport,
+  createHandle: BaseAlertDialog.createHandle,
+}
+
+export default AlertDialogPrimitive
+
+export {
+  AlertDialogRoot as AlertDialog,
+  AlertDialogRoot,
+  AlertDialogBackdrop,
+  AlertDialogClose,
+  AlertDialogDescription,
+  AlertDialogPopup,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AlertDialogViewport,
+  AlertDialogContent,
+  BaseAlertDialog,
+}
+
+export type { AlertDialogRootProps } from "./root"
+export type { AlertDialogBackdropProps } from "./backdrop"
+export type { AlertDialogCloseProps } from "./close"
+export type { AlertDialogDescriptionProps } from "./description"
+export type { AlertDialogPopupProps } from "./popup"
+export type { AlertDialogPortalProps } from "./portal"
+export type { AlertDialogTitleProps } from "./title"
+export type { AlertDialogTriggerProps } from "./trigger"
+export type { AlertDialogViewportProps } from "./viewport"
+export type { AlertDialogContentProps } from "./content"

src/components/ui/alert-dialog/popup.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogPopupProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Popup> & {
+  className?: string
+}
+
+const BaseAlertDialogPopup = BaseAlertDialog.Popup as React.ElementType
+
+export const AlertDialogPopup = React.forwardRef<HTMLElement, AlertDialogPopupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogPopup
+      ref={ref}
+      className={cn(
+        "z-50",
+        "fixed top-1/2 left-1/2 -mt-8 flex w-96 max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 bg-white dark:bg-neutral-950 p-4 text-neutral-950 dark:text-white border border-neutral-950 dark:border-white shadow-[0.25rem_0.25rem_0_rgb(0_0_0/12%)] dark:shadow-none transition-[transform,opacity] duration-350 ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-150 data-ending-style:ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogPopup.displayName = "AlertDialogPopup"

src/components/ui/alert-dialog/portal.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+import { usePortalContainer } from "@/lib/portal-container"
+
+export type AlertDialogPortalProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Portal> & {
+  className?: string
+}
+
+const BaseAlertDialogPortal = BaseAlertDialog.Portal as React.ElementType
+
+export const AlertDialogPortal = React.forwardRef<HTMLElement, AlertDialogPortalProps>(
+  ({ className, container, ...props }, ref) => {
+    const portalContainer = usePortalContainer()
+
+    return (
+      <BaseAlertDialogPortal
+        ref={ref}
+        className={cn(className)}
+        container={container ?? portalContainer ?? undefined}
+        {...props}
+      />
+    )
+  },
+)
+
+AlertDialogPortal.displayName = "AlertDialogPortal"

src/components/ui/alert-dialog/root.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogRootProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Root> & {
+  className?: string
+}
+
+const BaseAlertDialogRoot = BaseAlertDialog.Root as React.ElementType
+
+export const AlertDialogRoot = React.forwardRef<HTMLElement, AlertDialogRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogRoot
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogRoot.displayName = "AlertDialogRoot"

src/components/ui/alert-dialog/title.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Title> & {
+  className?: string
+}
+
+const BaseAlertDialogTitle = BaseAlertDialog.Title as React.ElementType
+
+export const AlertDialogTitle = React.forwardRef<HTMLElement, AlertDialogTitleProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogTitle
+      ref={ref}
+      className={cn(
+        "text-base font-bold",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogTitle.displayName = "AlertDialogTitle"

src/components/ui/alert-dialog/trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Trigger> & {
+  className?: string
+}
+
+const BaseAlertDialogTrigger = BaseAlertDialog.Trigger as React.ElementType
+
+export const AlertDialogTrigger = React.forwardRef<HTMLElement, AlertDialogTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogTrigger
+      ref={ref}
+      className={cn(
+        "flex h-8 items-center justify-center gap-2 border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 [&:not([data-disabled]):active]:bg-neutral-200 data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800 dark:[&:not([data-disabled]):active]:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400 dark:focus-visible:outline-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogTrigger.displayName = "AlertDialogTrigger"

src/components/ui/alert-dialog/viewport.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-dialog"
+import { cn } from "@/lib/utils"
+
+export type AlertDialogViewportProps = React.ComponentPropsWithoutRef<typeof BaseAlertDialog.Viewport> & {
+  className?: string
+}
+
+const BaseAlertDialogViewport = BaseAlertDialog.Viewport as React.ElementType
+
+export const AlertDialogViewport = React.forwardRef<HTMLElement, AlertDialogViewportProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAlertDialogViewport
+      ref={ref}
+      className={cn(
+        "z-50 outline-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AlertDialogViewport.displayName = "AlertDialogViewport"

src/components/ui/autocomplete/arrow.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteArrowProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Arrow> & {
+  className?: string
+}
+
+const BaseAutocompleteArrow = BaseAutocomplete.Arrow as React.ElementType
+
+export const AutocompleteArrow = React.forwardRef<HTMLElement, AutocompleteArrowProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteArrow
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center text-neutral-500 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteArrow.displayName = "AutocompleteArrow"

src/components/ui/autocomplete/backdrop.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteBackdropProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Backdrop> & {
+  className?: string
+}
+
+const BaseAutocompleteBackdrop = BaseAutocomplete.Backdrop as React.ElementType
+
+export const AutocompleteBackdrop = React.forwardRef<HTMLElement, AutocompleteBackdropProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteBackdrop
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 backdrop-blur-[1px] transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteBackdrop.displayName = "AutocompleteBackdrop"

src/components/ui/autocomplete/clear.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteClearProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Clear> & {
+  className?: string
+}
+
+const BaseAutocompleteClear = BaseAutocomplete.Clear as React.ElementType
+
+export const AutocompleteClear = React.forwardRef<HTMLElement, AutocompleteClearProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteClear
+      ref={ref}
+      className={cn(
+        "combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteClear.displayName = "AutocompleteClear"

src/components/ui/autocomplete/collection.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteCollectionProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Collection> & {
+  className?: string
+}
+
+const BaseAutocompleteCollection = BaseAutocomplete.Collection as React.ElementType
+
+export const AutocompleteCollection = React.forwardRef<HTMLElement, AutocompleteCollectionProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteCollection
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteCollection.displayName = "AutocompleteCollection"

src/components/ui/autocomplete/empty.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteEmptyProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Empty> & {
+  className?: string
+}
+
+const BaseAutocompleteEmpty = BaseAutocomplete.Empty as React.ElementType
+
+export const AutocompleteEmpty = React.forwardRef<HTMLElement, AutocompleteEmptyProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteEmpty
+      ref={ref}
+      className={cn(
+        "text-sm text-neutral-600 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteEmpty.displayName = "AutocompleteEmpty"

src/components/ui/autocomplete/group-label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteGroupLabelProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.GroupLabel> & {
+  className?: string
+}
+
+const BaseAutocompleteGroupLabel = BaseAutocomplete.GroupLabel as React.ElementType
+
+export const AutocompleteGroupLabel = React.forwardRef<HTMLElement, AutocompleteGroupLabelProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteGroupLabel
+      ref={ref}
+      className={cn(
+        "flex min-h-8 items-center pr-6 pl-3 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteGroupLabel.displayName = "AutocompleteGroupLabel"

src/components/ui/autocomplete/group.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteGroupProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Group> & {
+  className?: string
+}
+
+const BaseAutocompleteGroup = BaseAutocomplete.Group as React.ElementType
+
+export const AutocompleteGroup = React.forwardRef<HTMLElement, AutocompleteGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteGroup
+      ref={ref}
+      className={cn(
+        "not-last:mb-1",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteGroup.displayName = "AutocompleteGroup"

src/components/ui/autocomplete/icon.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteIconProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Icon> & {
+  className?: string
+}
+
+const BaseAutocompleteIcon = BaseAutocomplete.Icon as React.ElementType
+
+export const AutocompleteIcon = React.forwardRef<HTMLElement, AutocompleteIconProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteIcon
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center text-neutral-500 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteIcon.displayName = "AutocompleteIcon"

src/components/ui/autocomplete/index.ts

@@ -0,0 +1,92 @@
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { AutocompleteRoot } from "./root"
+import { AutocompleteValue } from "./value"
+import { AutocompleteTrigger } from "./trigger"
+import { AutocompleteInput } from "./input"
+import { AutocompleteInputGroup } from "./input-group"
+import { AutocompleteIcon } from "./icon"
+import { AutocompleteClear } from "./clear"
+import { AutocompleteList } from "./list"
+import { AutocompletePortal } from "./portal"
+import { AutocompleteBackdrop } from "./backdrop"
+import { AutocompletePositioner } from "./positioner"
+import { AutocompletePopup } from "./popup"
+import { AutocompleteArrow } from "./arrow"
+import { AutocompleteGroup } from "./group"
+import { AutocompleteGroupLabel } from "./group-label"
+import { AutocompleteItem } from "./item"
+import { AutocompleteRow } from "./row"
+import { AutocompleteCollection } from "./collection"
+import { AutocompleteEmpty } from "./empty"
+
+const AutocompletePrimitive = {
+  Root: AutocompleteRoot,
+  Value: AutocompleteValue,
+  Trigger: AutocompleteTrigger,
+  Input: AutocompleteInput,
+  InputGroup: AutocompleteInputGroup,
+  Icon: AutocompleteIcon,
+  Clear: AutocompleteClear,
+  List: AutocompleteList,
+  Portal: AutocompletePortal,
+  Backdrop: AutocompleteBackdrop,
+  Positioner: AutocompletePositioner,
+  Popup: AutocompletePopup,
+  Arrow: AutocompleteArrow,
+  Group: AutocompleteGroup,
+  GroupLabel: AutocompleteGroupLabel,
+  Item: AutocompleteItem,
+  Row: AutocompleteRow,
+  Collection: AutocompleteCollection,
+  Empty: AutocompleteEmpty,
+  Separator: BaseAutocomplete.Separator,
+  Status: BaseAutocomplete.Status,
+  useFilter: BaseAutocomplete.useFilter,
+  useFilteredItems: BaseAutocomplete.useFilteredItems,
+}
+
+export default AutocompletePrimitive
+
+export {
+  AutocompleteRoot as Autocomplete,
+  AutocompleteRoot,
+  AutocompleteValue,
+  AutocompleteTrigger,
+  AutocompleteInput,
+  AutocompleteInputGroup,
+  AutocompleteIcon,
+  AutocompleteClear,
+  AutocompleteList,
+  AutocompletePortal,
+  AutocompleteBackdrop,
+  AutocompletePositioner,
+  AutocompletePopup,
+  AutocompleteArrow,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteItem,
+  AutocompleteRow,
+  AutocompleteCollection,
+  AutocompleteEmpty,
+  BaseAutocomplete,
+}
+
+export type { AutocompleteRootProps } from "./root"
+export type { AutocompleteValueProps } from "./value"
+export type { AutocompleteTriggerProps } from "./trigger"
+export type { AutocompleteInputProps } from "./input"
+export type { AutocompleteInputGroupProps } from "./input-group"
+export type { AutocompleteIconProps } from "./icon"
+export type { AutocompleteClearProps } from "./clear"
+export type { AutocompleteListProps } from "./list"
+export type { AutocompletePortalProps } from "./portal"
+export type { AutocompleteBackdropProps } from "./backdrop"
+export type { AutocompletePositionerProps } from "./positioner"
+export type { AutocompletePopupProps } from "./popup"
+export type { AutocompleteArrowProps } from "./arrow"
+export type { AutocompleteGroupProps } from "./group"
+export type { AutocompleteGroupLabelProps } from "./group-label"
+export type { AutocompleteItemProps } from "./item"
+export type { AutocompleteRowProps } from "./row"
+export type { AutocompleteCollectionProps } from "./collection"
+export type { AutocompleteEmptyProps } from "./empty"

src/components/ui/autocomplete/input-group.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteInputGroupProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.InputGroup> & {
+  className?: string
+}
+
+const BaseAutocompleteInputGroup = BaseAutocomplete.InputGroup as React.ElementType
+
+export const AutocompleteInputGroup = React.forwardRef<HTMLElement, AutocompleteInputGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteInputGroup
+      ref={ref}
+      className={cn(
+        "flex items-center gap-2",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteInputGroup.displayName = "AutocompleteInputGroup"

src/components/ui/autocomplete/input.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteInputProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Input> & {
+  className?: string
+}
+
+const BaseAutocompleteInput = BaseAutocomplete.Input as React.ElementType
+
+export const AutocompleteInput = React.forwardRef<HTMLElement, AutocompleteInputProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteInput
+      ref={ref}
+      className={cn(
+        "h-8 w-[16rem] border border-neutral-950 bg-white dark:bg-neutral-950 px-2 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 placeholder:opacity-100 placeholder:text-neutral-500 placeholder:[-webkit-text-fill-color:var(--color-neutral-500)] dark:placeholder:text-neutral-400 dark:placeholder:[-webkit-text-fill-color:var(--color-neutral-400)] focus:outline-2 focus:outline-solid focus:-outline-offset-1 focus:outline-neutral-950 dark:focus:outline-white dark:border-white dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteInput.displayName = "AutocompleteInput"

src/components/ui/autocomplete/item.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteItemProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Item> & {
+  className?: string
+}
+
+const BaseAutocompleteItem = BaseAutocomplete.Item as React.ElementType
+
+export const AutocompleteItem = React.forwardRef<HTMLElement, AutocompleteItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteItem
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center gap-2 py-2 pr-2 pl-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-0 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteItem.displayName = "AutocompleteItem"

src/components/ui/autocomplete/list.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteListProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.List> & {
+  className?: string
+}
+
+const BaseAutocompleteList = BaseAutocomplete.List as React.ElementType
+
+export const AutocompleteList = React.forwardRef<HTMLElement, AutocompleteListProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteList
+      ref={ref}
+      className={cn(
+        "outline-0 overflow-y-auto scroll-py-1 py-1 overscroll-contain max-h-[min(22.5rem,var(--available-height))] data-empty:p-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteList.displayName = "AutocompleteList"

src/components/ui/autocomplete/popup.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompletePopupProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Popup> & {
+  className?: string
+}
+
+const BaseAutocompletePopup = BaseAutocomplete.Popup as React.ElementType
+const defaultAutocompletePopupClassName =
+  "w-[var(--anchor-width)] max-w-[var(--available-width)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+
+export const AutocompletePopup = React.forwardRef<HTMLElement, AutocompletePopupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompletePopup
+      ref={ref}
+      className={cn(className ?? defaultAutocompletePopupClassName)}
+      {...props}
+    />
+  ),
+)
+
+AutocompletePopup.displayName = "AutocompletePopup"

src/components/ui/autocomplete/portal.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompletePortalProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Portal> & {
+  className?: string
+}
+
+const BaseAutocompletePortal = BaseAutocomplete.Portal as React.ElementType
+
+export const AutocompletePortal = React.forwardRef<HTMLElement, AutocompletePortalProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompletePortal
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+AutocompletePortal.displayName = "AutocompletePortal"

src/components/ui/autocomplete/positioner.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompletePositionerProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Positioner> & {
+  className?: string
+}
+
+const BaseAutocompletePositioner = BaseAutocomplete.Positioner as React.ElementType
+
+export const AutocompletePositioner = React.forwardRef<HTMLElement, AutocompletePositionerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompletePositioner
+      ref={ref}
+      className={cn(
+        "outline-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompletePositioner.displayName = "AutocompletePositioner"

src/components/ui/autocomplete/root.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteRootProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Root> & {
+  className?: string
+}
+
+const BaseAutocompleteRoot = BaseAutocomplete.Root as React.ElementType
+
+export const AutocompleteRoot = React.forwardRef<HTMLElement, AutocompleteRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteRoot
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteRoot.displayName = "AutocompleteRoot"

src/components/ui/autocomplete/row.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteRowProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Row> & {
+  className?: string
+}
+
+const BaseAutocompleteRow = BaseAutocomplete.Row as React.ElementType
+
+export const AutocompleteRow = React.forwardRef<HTMLElement, AutocompleteRowProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteRow
+      ref={ref}
+      className={cn(
+        "grid grid-cols-5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteRow.displayName = "AutocompleteRow"

src/components/ui/autocomplete/trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteTriggerProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Trigger> & {
+  className?: string
+}
+
+const BaseAutocompleteTrigger = BaseAutocomplete.Trigger as React.ElementType
+
+export const AutocompleteTrigger = React.forwardRef<HTMLElement, AutocompleteTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteTrigger
+      ref={ref}
+      className={cn(
+        "flex size-8 items-center justify-center border border-neutral-950 bg-transparent text-xl leading-none text-neutral-950 outline-none hover:bg-neutral-100 active:bg-neutral-200 focus-visible:outline-2 focus-visible:[outline-style:solid] focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-[popup-open]:bg-neutral-100 dark:border-white dark:text-white dark:hover:bg-neutral-800 dark:active:bg-neutral-700 dark:data-[popup-open]:bg-neutral-800",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteTrigger.displayName = "AutocompleteTrigger"

src/components/ui/autocomplete/value.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete"
+import { cn } from "@/lib/utils"
+
+export type AutocompleteValueProps = React.ComponentPropsWithoutRef<typeof BaseAutocomplete.Value> & {
+  className?: string
+}
+
+const BaseAutocompleteValue = BaseAutocomplete.Value as React.ElementType
+
+export const AutocompleteValue = React.forwardRef<HTMLElement, AutocompleteValueProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAutocompleteValue
+      ref={ref}
+      className={cn(
+        "text-sm text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AutocompleteValue.displayName = "AutocompleteValue"

src/components/ui/avatar/fallback.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar"
+import { cn } from "@/lib/utils"
+
+export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback> & {
+  className?: string
+}
+
+const BaseAvatarFallback = BaseAvatar.Fallback as React.ElementType
+
+export const AvatarFallback = React.forwardRef<HTMLElement, AvatarFallbackProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAvatarFallback
+      ref={ref}
+      className={cn(
+        "flex size-full items-center justify-center text-sm",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AvatarFallback.displayName = "AvatarFallback"

src/components/ui/avatar/image.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar"
+import { cn } from "@/lib/utils"
+
+export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Image> & {
+  className?: string
+}
+
+const BaseAvatarImage = BaseAvatar.Image as React.ElementType
+
+export const AvatarImage = React.forwardRef<HTMLElement, AvatarImageProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAvatarImage
+      ref={ref}
+      className={cn(
+        "size-full object-cover",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AvatarImage.displayName = "AvatarImage"

src/components/ui/avatar/index.ts

@@ -0,0 +1,22 @@
+import { AvatarRoot } from "./root"
+import { AvatarImage } from "./image"
+import { AvatarFallback } from "./fallback"
+
+const AvatarPrimitive = {
+  Root: AvatarRoot,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+}
+
+export default AvatarPrimitive
+
+export {
+  AvatarRoot as Avatar,
+  AvatarRoot,
+  AvatarImage,
+  AvatarFallback,
+}
+
+export type { AvatarRootProps } from "./root"
+export type { AvatarImageProps } from "./image"
+export type { AvatarFallbackProps } from "./fallback"

src/components/ui/avatar/root.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar"
+import { cn } from "@/lib/utils"
+
+export type AvatarRootProps = React.ComponentPropsWithoutRef<typeof BaseAvatar.Root> & {
+  className?: string
+}
+
+const BaseAvatarRoot = BaseAvatar.Root as React.ElementType
+
+export const AvatarRoot = React.forwardRef<HTMLElement, AvatarRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseAvatarRoot
+      ref={ref}
+      className={cn(
+        "inline-flex size-8 items-center justify-center overflow-hidden rounded-full bg-neutral-200 align-middle text-sm leading-none font-normal text-neutral-950 select-none dark:bg-neutral-800 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+AvatarRoot.displayName = "AvatarRoot"

src/components/ui/button/index.ts

@@ -0,0 +1,4 @@
+import { Button } from "./root"
+
+export { Button, type ButtonProps } from "./root"
+export default Button

src/components/ui/button/root.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Button as BaseButton } from "@base-ui/react/button"
+import { cn } from "@/lib/utils"
+
+export type ButtonProps = React.ComponentPropsWithoutRef<typeof BaseButton> & {
+  className?: string
+}
+
+const BaseButtonElement = BaseButton as React.ElementType
+
+export const Button = React.forwardRef<HTMLElement, ButtonProps>(
+  ({ className, ...props }, ref) => (
+    <BaseButtonElement
+      ref={ref}
+      className={cn(
+        "flex h-8 items-center justify-center gap-2 rounded-none border border-neutral-950 bg-white px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 select-none [&:not([data-disabled]):hover]:bg-neutral-100 [&:not([data-disabled]):active]:bg-neutral-200 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:cursor-default data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:cursor-default disabled:border-neutral-500 disabled:text-neutral-500 dark:border-white dark:bg-neutral-950 dark:text-white dark:[&:not([data-disabled]):hover]:bg-neutral-800 dark:[&:not([data-disabled]):active]:bg-neutral-700 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+Button.displayName = "Button"

src/components/ui/checkbox-group/index.ts

@@ -0,0 +1,4 @@
+import { CheckboxGroup } from "./root"
+
+export { CheckboxGroup, type CheckboxGroupProps } from "./root"
+export default CheckboxGroup

src/components/ui/checkbox-group/root.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+import * as React from "react"
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group"
+import { cn } from "@/lib/utils"
+
+export type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup> & { className?: string }
+
+const BaseCheckboxGroupElement = BaseCheckboxGroup as React.ElementType
+
+export const CheckboxGroup = React.forwardRef<HTMLElement, CheckboxGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckboxGroupElement
+      ref={ref}
+      className={cn("flex flex-col items-start gap-1 text-neutral-950 dark:text-white", className)}
+      {...props}
+    />
+  ),
+)
+
+CheckboxGroup.displayName = "CheckboxGroup"

src/components/ui/checkbox/index.ts

@@ -0,0 +1,18 @@
+import { CheckboxRoot } from "./root"
+import { CheckboxIndicator } from "./indicator"
+
+const CheckboxPrimitive = {
+  Root: CheckboxRoot,
+  Indicator: CheckboxIndicator,
+}
+
+export default CheckboxPrimitive
+
+export {
+  CheckboxRoot as Checkbox,
+  CheckboxRoot,
+  CheckboxIndicator,
+}
+
+export type { CheckboxRootProps } from "./root"
+export type { CheckboxIndicatorProps } from "./indicator"

src/components/ui/checkbox/indicator.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
+import { cn } from "@/lib/utils"
+
+export type CheckboxIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseCheckbox.Indicator> & {
+  className?: string
+}
+
+const BaseCheckboxIndicator = BaseCheckbox.Indicator as React.ElementType
+
+export const CheckboxIndicator = React.forwardRef<HTMLElement, CheckboxIndicatorProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckboxIndicator
+      ref={ref}
+      className={cn(
+        "flex data-unchecked:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+CheckboxIndicator.displayName = "CheckboxIndicator"

src/components/ui/checkbox/root.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
+import { cn } from "@/lib/utils"
+
+export type CheckboxRootProps = React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & {
+  className?: string
+}
+
+const BaseCheckboxRoot = BaseCheckbox.Root as React.ElementType
+
+export const CheckboxRoot = React.forwardRef<HTMLElement, CheckboxRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckboxRoot
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center rounded-none border border-neutral-950 bg-white p-0 text-white data-checked:bg-neutral-950 data-checked:text-white focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-neutral-950 dark:border-white dark:bg-neutral-950 dark:text-neutral-950 dark:data-checked:bg-white dark:data-checked:text-neutral-950 dark:focus-visible:outline-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+CheckboxRoot.displayName = "CheckboxRoot"

src/components/ui/collapsible/index.ts

@@ -0,0 +1,22 @@
+import { CollapsibleRoot } from "./root"
+import { CollapsibleTrigger } from "./trigger"
+import { CollapsiblePanel } from "./panel"
+
+const CollapsiblePrimitive = {
+  Root: CollapsibleRoot,
+  Trigger: CollapsibleTrigger,
+  Panel: CollapsiblePanel,
+}
+
+export default CollapsiblePrimitive
+
+export {
+  CollapsibleRoot as Collapsible,
+  CollapsibleRoot,
+  CollapsibleTrigger,
+  CollapsiblePanel,
+}
+
+export type { CollapsibleRootProps } from "./root"
+export type { CollapsibleTriggerProps } from "./trigger"
+export type { CollapsiblePanelProps } from "./panel"

src/components/ui/collapsible/panel.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
+import { cn } from "@/lib/utils"
+
+export type CollapsiblePanelProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel> & {
+  className?: string
+}
+
+const BaseCollapsiblePanel = BaseCollapsible.Panel as React.ElementType
+
+export const CollapsiblePanel = React.forwardRef<HTMLElement, CollapsiblePanelProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCollapsiblePanel
+      ref={ref}
+      className={cn(
+        "flex h-(--collapsible-panel-height) flex-col justify-end overflow-hidden text-sm transition-[height] duration-150 ease-[ease-out] [&[hidden]:not([hidden='until-found'])]:hidden data-ending-style:h-0 data-starting-style:h-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+CollapsiblePanel.displayName = "CollapsiblePanel"

src/components/ui/collapsible/root.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
+import { cn } from "@/lib/utils"
+
+export type CollapsibleRootProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root> & {
+  className?: string
+}
+
+const BaseCollapsibleRoot = BaseCollapsible.Root as React.ElementType
+
+export const CollapsibleRoot = React.forwardRef<HTMLElement, CollapsibleRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCollapsibleRoot
+      ref={ref}
+      className={cn(
+        "flex min-h-36 w-48 flex-col justify-center text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+CollapsibleRoot.displayName = "CollapsibleRoot"

src/components/ui/collapsible/trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
+import { cn } from "@/lib/utils"
+
+export type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger> & {
+  className?: string
+}
+
+const BaseCollapsibleTrigger = BaseCollapsible.Trigger as React.ElementType
+
+export const CollapsibleTrigger = React.forwardRef<HTMLElement, CollapsibleTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCollapsibleTrigger
+      ref={ref}
+      className={cn(
+        "group flex h-8 items-center justify-between gap-2 rounded-none border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 pl-3 pr-2 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none [&:not([data-disabled]):hover]:bg-neutral-100 dark:[&:not([data-disabled]):hover]:bg-neutral-800 [&:not([data-disabled]):active]:bg-neutral-200 dark:[&:not([data-disabled]):active]:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white data-disabled:border-neutral-500 data-disabled:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-disabled:border-neutral-400 dark:data-disabled:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+CollapsibleTrigger.displayName = "CollapsibleTrigger"

src/components/ui/combobox/arrow.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxArrowProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Arrow> & {
+  className?: string
+}
+
+const BaseComboboxArrow = BaseCombobox.Arrow as React.ElementType
+
+export const ComboboxArrow = React.forwardRef<HTMLElement, ComboboxArrowProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxArrow
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center text-neutral-500 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxArrow.displayName = "ComboboxArrow"

src/components/ui/combobox/backdrop.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxBackdropProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Backdrop> & {
+  className?: string
+}
+
+const BaseComboboxBackdrop = BaseCombobox.Backdrop as React.ElementType
+
+export const ComboboxBackdrop = React.forwardRef<HTMLElement, ComboboxBackdropProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxBackdrop
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 backdrop-blur-[1px] transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxBackdrop.displayName = "ComboboxBackdrop"

src/components/ui/combobox/chip-remove.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxChipRemoveProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.ChipRemove> & {
+  className?: string
+}
+
+const BaseComboboxChipRemove = BaseCombobox.ChipRemove as React.ElementType
+
+export const ComboboxChipRemove = React.forwardRef<HTMLElement, ComboboxChipRemoveProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxChipRemove
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxChipRemove.displayName = "ComboboxChipRemove"

src/components/ui/combobox/chip.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxChipProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip> & {
+  className?: string
+}
+
+const BaseComboboxChip = BaseCombobox.Chip as React.ElementType
+
+export const ComboboxChip = React.forwardRef<HTMLElement, ComboboxChipProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxChip
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxChip.displayName = "ComboboxChip"

src/components/ui/combobox/chips.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxChipsProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Chips> & {
+  className?: string
+}
+
+const BaseComboboxChips = BaseCombobox.Chips as React.ElementType
+
+export const ComboboxChips = React.forwardRef<HTMLElement, ComboboxChipsProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxChips
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxChips.displayName = "ComboboxChips"

src/components/ui/combobox/clear.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxClearProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Clear> & {
+  className?: string
+}
+
+const BaseComboboxClear = BaseCombobox.Clear as React.ElementType
+
+export const ComboboxClear = React.forwardRef<HTMLElement, ComboboxClearProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxClear
+      ref={ref}
+      className={cn(
+        "combobox-clear flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxClear.displayName = "ComboboxClear"

src/components/ui/combobox/collection.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxCollectionProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Collection> & {
+  className?: string
+}
+
+const BaseComboboxCollection = BaseCombobox.Collection as React.ElementType
+
+export const ComboboxCollection = React.forwardRef<HTMLElement, ComboboxCollectionProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxCollection
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxCollection.displayName = "ComboboxCollection"

src/components/ui/combobox/empty.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxEmptyProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty> & {
+  className?: string
+}
+
+const BaseComboboxEmpty = BaseCombobox.Empty as React.ElementType
+
+export const ComboboxEmpty = React.forwardRef<HTMLElement, ComboboxEmptyProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxEmpty
+      ref={ref}
+      className={cn(
+        "text-sm text-neutral-600 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxEmpty.displayName = "ComboboxEmpty"

src/components/ui/combobox/group-label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxGroupLabelProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel> & {
+  className?: string
+}
+
+const BaseComboboxGroupLabel = BaseCombobox.GroupLabel as React.ElementType
+
+export const ComboboxGroupLabel = React.forwardRef<HTMLElement, ComboboxGroupLabelProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxGroupLabel
+      ref={ref}
+      className={cn(
+        "py-2 pr-2 pl-8 text-sm leading-4 text-neutral-500 select-none dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxGroupLabel.displayName = "ComboboxGroupLabel"

src/components/ui/combobox/group.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxGroupProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Group> & {
+  className?: string
+}
+
+const BaseComboboxGroup = BaseCombobox.Group as React.ElementType
+
+export const ComboboxGroup = React.forwardRef<HTMLElement, ComboboxGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxGroup
+      ref={ref}
+      className={cn(
+        "block pb-2 last:pb-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxGroup.displayName = "ComboboxGroup"

src/components/ui/combobox/icon.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxIconProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Icon> & {
+  className?: string
+}
+
+const BaseComboboxIcon = BaseCombobox.Icon as React.ElementType
+
+export const ComboboxIcon = React.forwardRef<HTMLElement, ComboboxIconProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxIcon
+      ref={ref}
+      className={cn(
+        "text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxIcon.displayName = "ComboboxIcon"

src/components/ui/combobox/index.ts

@@ -0,0 +1,112 @@
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { ComboboxRoot } from "./root"
+import { ComboboxLabel } from "./label"
+import { ComboboxValue } from "./value"
+import { ComboboxInput } from "./input"
+import { ComboboxInputGroup } from "./input-group"
+import { ComboboxTrigger } from "./trigger"
+import { ComboboxList } from "./list"
+import { ComboboxPortal } from "./portal"
+import { ComboboxBackdrop } from "./backdrop"
+import { ComboboxPositioner } from "./positioner"
+import { ComboboxPopup } from "./popup"
+import { ComboboxArrow } from "./arrow"
+import { ComboboxIcon } from "./icon"
+import { ComboboxGroup } from "./group"
+import { ComboboxGroupLabel } from "./group-label"
+import { ComboboxItem } from "./item"
+import { ComboboxItemIndicator } from "./item-indicator"
+import { ComboboxChips } from "./chips"
+import { ComboboxChip } from "./chip"
+import { ComboboxChipRemove } from "./chip-remove"
+import { ComboboxRow } from "./row"
+import { ComboboxCollection } from "./collection"
+import { ComboboxEmpty } from "./empty"
+import { ComboboxClear } from "./clear"
+
+const ComboboxPrimitive = {
+  Root: ComboboxRoot,
+  Label: ComboboxLabel,
+  Value: ComboboxValue,
+  Input: ComboboxInput,
+  InputGroup: ComboboxInputGroup,
+  Trigger: ComboboxTrigger,
+  List: ComboboxList,
+  Portal: ComboboxPortal,
+  Backdrop: ComboboxBackdrop,
+  Positioner: ComboboxPositioner,
+  Popup: ComboboxPopup,
+  Arrow: ComboboxArrow,
+  Icon: ComboboxIcon,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
+  Item: ComboboxItem,
+  ItemIndicator: ComboboxItemIndicator,
+  Chips: ComboboxChips,
+  Chip: ComboboxChip,
+  ChipRemove: ComboboxChipRemove,
+  Row: ComboboxRow,
+  Collection: ComboboxCollection,
+  Empty: ComboboxEmpty,
+  Clear: ComboboxClear,
+  Separator: BaseCombobox.Separator,
+  Status: BaseCombobox.Status,
+  useFilter: BaseCombobox.useFilter,
+  useFilteredItems: BaseCombobox.useFilteredItems,
+}
+
+export default ComboboxPrimitive
+
+export {
+  ComboboxRoot as Combobox,
+  ComboboxRoot,
+  ComboboxLabel,
+  ComboboxValue,
+  ComboboxInput,
+  ComboboxInputGroup,
+  ComboboxTrigger,
+  ComboboxList,
+  ComboboxPortal,
+  ComboboxBackdrop,
+  ComboboxPositioner,
+  ComboboxPopup,
+  ComboboxArrow,
+  ComboboxIcon,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipRemove,
+  ComboboxRow,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxClear,
+  BaseCombobox,
+}
+
+export type { ComboboxRootProps } from "./root"
+export type { ComboboxLabelProps } from "./label"
+export type { ComboboxValueProps } from "./value"
+export type { ComboboxInputProps } from "./input"
+export type { ComboboxInputGroupProps } from "./input-group"
+export type { ComboboxTriggerProps } from "./trigger"
+export type { ComboboxListProps } from "./list"
+export type { ComboboxPortalProps } from "./portal"
+export type { ComboboxBackdropProps } from "./backdrop"
+export type { ComboboxPositionerProps } from "./positioner"
+export type { ComboboxPopupProps } from "./popup"
+export type { ComboboxArrowProps } from "./arrow"
+export type { ComboboxIconProps } from "./icon"
+export type { ComboboxGroupProps } from "./group"
+export type { ComboboxGroupLabelProps } from "./group-label"
+export type { ComboboxItemProps } from "./item"
+export type { ComboboxItemIndicatorProps } from "./item-indicator"
+export type { ComboboxChipsProps } from "./chips"
+export type { ComboboxChipProps } from "./chip"
+export type { ComboboxChipRemoveProps } from "./chip-remove"
+export type { ComboboxRowProps } from "./row"
+export type { ComboboxCollectionProps } from "./collection"
+export type { ComboboxEmptyProps } from "./empty"
+export type { ComboboxClearProps } from "./clear"

src/components/ui/combobox/input-group.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxInputGroupProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.InputGroup> & {
+  className?: string
+}
+
+const BaseComboboxInputGroup = BaseCombobox.InputGroup as React.ElementType
+
+export const ComboboxInputGroup = React.forwardRef<HTMLElement, ComboboxInputGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxInputGroup
+      ref={ref}
+      className={cn(
+        "relative h-8 w-56 border border-neutral-950 bg-white dark:bg-neutral-950 focus-within:outline-2 focus-within:outline-solid focus-within:-outline-offset-1 focus-within:outline-neutral-950 dark:focus-within:outline-white dark:border-white [&>input]:pr-10 has-[.combobox-clear]:[&>input]:pr-18",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxInputGroup.displayName = "ComboboxInputGroup"

src/components/ui/combobox/input.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxInputProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Input> & {
+  className?: string
+}
+
+const BaseComboboxInput = BaseCombobox.Input as React.ElementType
+
+export const ComboboxInput = React.forwardRef<HTMLElement, ComboboxInputProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxInput
+      ref={ref}
+      className={cn(
+        "h-full w-full border-0 bg-white pl-2 dark:bg-neutral-950 text-sm any-pointer-coarse:text-base font-normal text-neutral-950 outline-none placeholder:text-neutral-500 dark:placeholder:text-neutral-400 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxInput.displayName = "ComboboxInput"

src/components/ui/combobox/item-indicator.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxItemIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.ItemIndicator> & {
+  className?: string
+}
+
+const BaseComboboxItemIndicator = BaseCombobox.ItemIndicator as React.ElementType
+
+export const ComboboxItemIndicator = React.forwardRef<HTMLElement, ComboboxItemIndicatorProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxItemIndicator
+      ref={ref}
+      className={cn(
+        "col-start-1",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxItemIndicator.displayName = "ComboboxItemIndicator"

src/components/ui/combobox/item.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxItemProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Item> & {
+  className?: string
+}
+
+const BaseComboboxItem = BaseCombobox.Item as React.ElementType
+
+export const ComboboxItem = React.forwardRef<HTMLElement, ComboboxItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxItem
+      ref={ref}
+      className={cn(
+        "grid cursor-default grid-cols-[1rem_1fr] items-center gap-2 p-2 text-sm leading-4 outline-none select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxItem.displayName = "ComboboxItem"

src/components/ui/combobox/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxLabelProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Label> & {
+  className?: string
+}
+
+const BaseComboboxLabel = BaseCombobox.Label as React.ElementType
+
+export const ComboboxLabel = React.forwardRef<HTMLElement, ComboboxLabelProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxLabel
+      ref={ref}
+      className={cn(
+        "cursor-default text-sm leading-5 font-bold text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxLabel.displayName = "ComboboxLabel"

src/components/ui/combobox/list.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxListProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.List> & {
+  className?: string
+}
+
+const BaseComboboxList = BaseCombobox.List as React.ElementType
+
+export const ComboboxList = React.forwardRef<HTMLElement, ComboboxListProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxList
+      ref={ref}
+      className={cn(
+        "max-h-[min(22.5rem,var(--available-height))] overflow-y-auto overscroll-contain py-1 scroll-py-1 outline-0 data-empty:p-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxList.displayName = "ComboboxList"

src/components/ui/combobox/popup.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxPopupProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup> & {
+  className?: string
+}
+
+const BaseComboboxPopup = BaseCombobox.Popup as React.ElementType
+const defaultComboboxPopupClassName =
+  "w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] border border-neutral-950 bg-white text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] transition-[transform,opacity] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-150 data-ending-style:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none"
+
+export const ComboboxPopup = React.forwardRef<HTMLElement, ComboboxPopupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxPopup
+      ref={ref}
+      className={cn(className ?? defaultComboboxPopupClassName)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxPopup.displayName = "ComboboxPopup"

src/components/ui/combobox/portal.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxPortalProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Portal> & {
+  className?: string
+}
+
+const BaseComboboxPortal = BaseCombobox.Portal as React.ElementType
+
+export const ComboboxPortal = React.forwardRef<HTMLElement, ComboboxPortalProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxPortal
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxPortal.displayName = "ComboboxPortal"

src/components/ui/combobox/positioner.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxPositionerProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Positioner> & {
+  className?: string
+}
+
+const BaseComboboxPositioner = BaseCombobox.Positioner as React.ElementType
+
+export const ComboboxPositioner = React.forwardRef<HTMLElement, ComboboxPositionerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxPositioner
+      ref={ref}
+      className={cn(
+        "outline-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxPositioner.displayName = "ComboboxPositioner"

src/components/ui/combobox/root.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxRootProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Root> & {
+  className?: string
+}
+
+const BaseComboboxRoot = BaseCombobox.Root as React.ElementType
+
+export const ComboboxRoot = React.forwardRef<HTMLElement, ComboboxRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxRoot
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ComboboxRoot.displayName = "ComboboxRoot"

src/components/ui/combobox/row.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxRowProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Row> & {
+  className?: string
+}
+
+const BaseComboboxRow = BaseCombobox.Row as React.ElementType
+
+export const ComboboxRow = React.forwardRef<HTMLElement, ComboboxRowProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxRow
+      ref={ref}
+      className={cn(
+        "grid grid-cols-5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxRow.displayName = "ComboboxRow"

src/components/ui/combobox/trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxTriggerProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Trigger> & {
+  className?: string
+}
+
+const BaseComboboxTrigger = BaseCombobox.Trigger as React.ElementType
+
+export const ComboboxTrigger = React.forwardRef<HTMLElement, ComboboxTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxTrigger
+      ref={ref}
+      className={cn(
+        "flex h-full w-6 items-center justify-center border-0 bg-transparent p-0 text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxTrigger.displayName = "ComboboxTrigger"

src/components/ui/combobox/value.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+export type ComboboxValueProps = React.ComponentPropsWithoutRef<typeof BaseCombobox.Value> & {
+  className?: string
+}
+
+const BaseComboboxValue = BaseCombobox.Value as React.ElementType
+
+export const ComboboxValue = React.forwardRef<HTMLElement, ComboboxValueProps>(
+  ({ className, ...props }, ref) => (
+    <BaseComboboxValue
+      ref={ref}
+      className={cn(
+        "text-sm text-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ComboboxValue.displayName = "ComboboxValue"

src/components/ui/context-menu/arrow.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuArrowProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Arrow> & {
+  className?: string
+}
+
+const BaseContextMenuArrow = BaseContextMenu.Arrow as React.ElementType
+
+export const ContextMenuArrow = React.forwardRef<HTMLElement, ContextMenuArrowProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuArrow
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center text-neutral-500 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuArrow.displayName = "ContextMenuArrow"

src/components/ui/context-menu/backdrop.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuBackdropProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Backdrop> & {
+  className?: string
+}
+
+const BaseContextMenuBackdrop = BaseContextMenu.Backdrop as React.ElementType
+
+export const ContextMenuBackdrop = React.forwardRef<HTMLElement, ContextMenuBackdropProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuBackdrop
+      ref={ref}
+      className={cn(
+        "fixed inset-0 z-50 bg-black/20 backdrop-blur-[1px] transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuBackdrop.displayName = "ContextMenuBackdrop"

src/components/ui/context-menu/checkbox-item-indicator.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuCheckboxItemIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItemIndicator> & {
+  className?: string
+}
+
+const BaseContextMenuCheckboxItemIndicator = BaseContextMenu.CheckboxItemIndicator as React.ElementType
+
+export const ContextMenuCheckboxItemIndicator = React.forwardRef<HTMLElement, ContextMenuCheckboxItemIndicatorProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuCheckboxItemIndicator
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center text-current",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuCheckboxItemIndicator.displayName = "ContextMenuCheckboxItemIndicator"

src/components/ui/context-menu/checkbox-item.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem> & {
+  className?: string
+}
+
+const BaseContextMenuCheckboxItem = BaseContextMenu.CheckboxItem as React.ElementType
+
+export const ContextMenuCheckboxItem = React.forwardRef<HTMLElement, ContextMenuCheckboxItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuCheckboxItem
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuCheckboxItem.displayName = "ContextMenuCheckboxItem"

src/components/ui/context-menu/group-label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuGroupLabelProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel> & {
+  className?: string
+}
+
+const BaseContextMenuGroupLabel = BaseContextMenu.GroupLabel as React.ElementType
+
+export const ContextMenuGroupLabel = React.forwardRef<HTMLElement, ContextMenuGroupLabelProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuGroupLabel
+      ref={ref}
+      className={cn(
+        "flex min-h-8 items-center pr-6 pl-3 text-sm leading-none font-normal text-neutral-500 select-none outline-none dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuGroupLabel.displayName = "ContextMenuGroupLabel"

src/components/ui/context-menu/group.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuGroupProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group> & {
+  className?: string
+}
+
+const BaseContextMenuGroup = BaseContextMenu.Group as React.ElementType
+
+export const ContextMenuGroup = React.forwardRef<HTMLElement, ContextMenuGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuGroup
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuGroup.displayName = "ContextMenuGroup"

src/components/ui/context-menu/index.ts

@@ -0,0 +1,85 @@
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { ContextMenuRoot } from "./root"
+import { ContextMenuTrigger } from "./trigger"
+import { ContextMenuBackdrop } from "./backdrop"
+import { ContextMenuPortal } from "./portal"
+import { ContextMenuPositioner } from "./positioner"
+import { ContextMenuPopup } from "./popup"
+import { ContextMenuArrow } from "./arrow"
+import { ContextMenuGroup } from "./group"
+import { ContextMenuGroupLabel } from "./group-label"
+import { ContextMenuItem } from "./item"
+import { ContextMenuCheckboxItem } from "./checkbox-item"
+import { ContextMenuCheckboxItemIndicator } from "./checkbox-item-indicator"
+import { ContextMenuLinkItem } from "./link-item"
+import { ContextMenuRadioGroup } from "./radio-group"
+import { ContextMenuRadioItem } from "./radio-item"
+import { ContextMenuRadioItemIndicator } from "./radio-item-indicator"
+import { ContextMenuSubmenuRoot } from "./submenu-root"
+import { ContextMenuSubmenuTrigger } from "./submenu-trigger"
+
+const ContextMenuPrimitive = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Backdrop: ContextMenuBackdrop,
+  Portal: ContextMenuPortal,
+  Positioner: ContextMenuPositioner,
+  Popup: ContextMenuPopup,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  GroupLabel: ContextMenuGroupLabel,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  CheckboxItemIndicator: ContextMenuCheckboxItemIndicator,
+  LinkItem: ContextMenuLinkItem,
+  RadioGroup: ContextMenuRadioGroup,
+  RadioItem: ContextMenuRadioItem,
+  RadioItemIndicator: ContextMenuRadioItemIndicator,
+  SubmenuRoot: ContextMenuSubmenuRoot,
+  SubmenuTrigger: ContextMenuSubmenuTrigger,
+  Separator: BaseContextMenu.Separator,
+}
+
+export default ContextMenuPrimitive
+
+export {
+  ContextMenuRoot as ContextMenu,
+  ContextMenuRoot,
+  ContextMenuTrigger,
+  ContextMenuBackdrop,
+  ContextMenuPortal,
+  ContextMenuPositioner,
+  ContextMenuPopup,
+  ContextMenuArrow,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuCheckboxItemIndicator,
+  ContextMenuLinkItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuRadioItemIndicator,
+  ContextMenuSubmenuRoot,
+  ContextMenuSubmenuTrigger,
+  BaseContextMenu,
+}
+
+export type { ContextMenuRootProps } from "./root"
+export type { ContextMenuTriggerProps } from "./trigger"
+export type { ContextMenuBackdropProps } from "./backdrop"
+export type { ContextMenuPortalProps } from "./portal"
+export type { ContextMenuPositionerProps } from "./positioner"
+export type { ContextMenuPopupProps } from "./popup"
+export type { ContextMenuArrowProps } from "./arrow"
+export type { ContextMenuGroupProps } from "./group"
+export type { ContextMenuGroupLabelProps } from "./group-label"
+export type { ContextMenuItemProps } from "./item"
+export type { ContextMenuCheckboxItemProps } from "./checkbox-item"
+export type { ContextMenuCheckboxItemIndicatorProps } from "./checkbox-item-indicator"
+export type { ContextMenuLinkItemProps } from "./link-item"
+export type { ContextMenuRadioGroupProps } from "./radio-group"
+export type { ContextMenuRadioItemProps } from "./radio-item"
+export type { ContextMenuRadioItemIndicatorProps } from "./radio-item-indicator"
+export type { ContextMenuSubmenuRootProps } from "./submenu-root"
+export type { ContextMenuSubmenuTriggerProps } from "./submenu-trigger"

src/components/ui/context-menu/item.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuItemProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item> & {
+  className?: string
+}
+
+const BaseContextMenuItem = BaseContextMenu.Item as React.ElementType
+
+export const ContextMenuItem = React.forwardRef<HTMLElement, ContextMenuItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuItem
+      ref={ref}
+      className={cn(
+        "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuItem.displayName = "ContextMenuItem"

src/components/ui/context-menu/link-item.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuLinkItemProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.LinkItem> & {
+  className?: string
+}
+
+const BaseContextMenuLinkItem = BaseContextMenu.LinkItem as React.ElementType
+
+export const ContextMenuLinkItem = React.forwardRef<HTMLElement, ContextMenuLinkItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuLinkItem
+      ref={ref}
+      className={cn(
+        "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 text-inherit no-underline outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuLinkItem.displayName = "ContextMenuLinkItem"

src/components/ui/context-menu/popup.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuPopupProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup> & {
+  className?: string
+}
+
+const BaseContextMenuPopup = BaseContextMenu.Popup as React.ElementType
+
+export const ContextMenuPopup = React.forwardRef<HTMLElement, ContextMenuPopupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuPopup
+      ref={ref}
+      className={cn(
+        "origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0_rgb(0_0_0_/_12%)] outline-none transition-[transform,opacity] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-ending-style:duration-150 data-ending-style:ease-out data-[ending-style]:scale-[0.98] data-[ending-style]:opacity-0 data-[starting-style]:scale-[0.98] data-[starting-style]:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuPopup.displayName = "ContextMenuPopup"

src/components/ui/context-menu/portal.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuPortalProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Portal> & {
+  className?: string
+}
+
+const BaseContextMenuPortal = BaseContextMenu.Portal as React.ElementType
+
+export const ContextMenuPortal = React.forwardRef<HTMLElement, ContextMenuPortalProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuPortal
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuPortal.displayName = "ContextMenuPortal"

src/components/ui/context-menu/positioner.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuPositionerProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Positioner> & {
+  className?: string
+}
+
+const BaseContextMenuPositioner = BaseContextMenu.Positioner as React.ElementType
+
+export const ContextMenuPositioner = React.forwardRef<HTMLElement, ContextMenuPositionerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuPositioner
+      ref={ref}
+      className={cn(
+        "outline-none",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuPositioner.displayName = "ContextMenuPositioner"

src/components/ui/context-menu/radio-group.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioGroup> & {
+  className?: string
+}
+
+const BaseContextMenuRadioGroup = BaseContextMenu.RadioGroup as React.ElementType
+
+export const ContextMenuRadioGroup = React.forwardRef<HTMLElement, ContextMenuRadioGroupProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuRadioGroup
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuRadioGroup.displayName = "ContextMenuRadioGroup"

src/components/ui/context-menu/radio-item-indicator.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuRadioItemIndicatorProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItemIndicator> & {
+  className?: string
+}
+
+const BaseContextMenuRadioItemIndicator = BaseContextMenu.RadioItemIndicator as React.ElementType
+
+export const ContextMenuRadioItemIndicator = React.forwardRef<HTMLElement, ContextMenuRadioItemIndicatorProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuRadioItemIndicator
+      ref={ref}
+      className={cn(
+        "flex size-4 shrink-0 items-center justify-center text-current",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuRadioItemIndicator.displayName = "ContextMenuRadioItemIndicator"

src/components/ui/context-menu/radio-item.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem> & {
+  className?: string
+}
+
+const BaseContextMenuRadioItem = BaseContextMenu.RadioItem as React.ElementType
+
+export const ContextMenuRadioItem = React.forwardRef<HTMLElement, ContextMenuRadioItemProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuRadioItem
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center gap-2 py-2 pr-8 pl-4 text-sm leading-4 outline-none select-none data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[disabled]:text-neutral-500 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[disabled]:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuRadioItem.displayName = "ContextMenuRadioItem"

src/components/ui/context-menu/root.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuRootProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Root> & {
+  className?: string
+}
+
+const BaseContextMenuRoot = BaseContextMenu.Root as React.ElementType
+
+export const ContextMenuRoot = React.forwardRef<HTMLElement, ContextMenuRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuRoot
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuRoot.displayName = "ContextMenuRoot"

src/components/ui/context-menu/submenu-root.tsx

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuSubmenuRootProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuRoot> & {
+  className?: string
+}
+
+const BaseContextMenuSubmenuRoot = BaseContextMenu.SubmenuRoot as React.ElementType
+
+export const ContextMenuSubmenuRoot = React.forwardRef<HTMLElement, ContextMenuSubmenuRootProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuSubmenuRoot
+      ref={ref}
+      className={cn(className)}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuSubmenuRoot.displayName = "ContextMenuSubmenuRoot"

src/components/ui/context-menu/submenu-trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuSubmenuTriggerProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger> & {
+  className?: string
+}
+
+const BaseContextMenuSubmenuTrigger = BaseContextMenu.SubmenuTrigger as React.ElementType
+
+export const ContextMenuSubmenuTrigger = React.forwardRef<HTMLElement, ContextMenuSubmenuTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuSubmenuTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 font-normal outline-none select-none data-[popup-open]:relative data-[popup-open]:z-0 data-[popup-open]:before:absolute data-[popup-open]:before:inset-x-1 data-[popup-open]:before:inset-y-0 data-[popup-open]:before:z-[-1] data-[popup-open]:before:bg-neutral-100 data-[popup-open]:before:content-[''] data-[highlighted]:relative data-[highlighted]:z-0 data-[highlighted]:text-white data-[highlighted]:before:absolute data-[highlighted]:before:inset-x-1 data-[highlighted]:before:inset-y-0 data-[highlighted]:before:z-[-1] data-[highlighted]:before:bg-neutral-950 data-[highlighted]:before:content-[''] data-[highlighted]:data-[popup-open]:before:bg-neutral-950 data-[disabled]:text-neutral-500 dark:data-[popup-open]:before:bg-neutral-800 dark:data-[highlighted]:text-neutral-950 dark:data-[highlighted]:before:bg-white dark:data-[highlighted]:data-[popup-open]:before:bg-white dark:data-[disabled]:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuSubmenuTrigger.displayName = "ContextMenuSubmenuTrigger"

src/components/ui/context-menu/trigger.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu"
+import { cn } from "@/lib/utils"
+
+export type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger> & {
+  className?: string
+}
+
+const BaseContextMenuTrigger = BaseContextMenu.Trigger as React.ElementType
+
+export const ContextMenuTrigger = React.forwardRef<HTMLElement, ContextMenuTriggerProps>(
+  ({ className, ...props }, ref) => (
+    <BaseContextMenuTrigger
+      ref={ref}
+      className={cn(
+        "flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+ContextMenuTrigger.displayName = "ContextMenuTrigger"

src/components/ui/dialog/backdrop.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as BaseDialog } from "@base-ui/react/dialog"
+import { cn } from "@/lib/utils"
+
+export type DialogBackdropProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Backdrop> & {
+  className?: string
+}
+
+const BaseDialogBackdrop = BaseDialog.Backdrop as React.ElementType
+const defaultDialogBackdropClassName =
+  "fixed inset-0 min-h-dvh bg-black opacity-20 transition-opacity duration-[350ms] ease-out data-ending-style:duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:opacity-50 supports-[-webkit-touch-callout:none]:absolute"
+
+export const DialogBackdrop = React.forwardRef<HTMLElement, DialogBackdropProps>(
+  ({ className, ...props }, ref) => (
+    <BaseDialogBackdrop
+      ref={ref}
+      className={cn("z-40", className ?? defaultDialogBackdropClassName)}
+      {...props}
+    />
+  ),
+)
+
+DialogBackdrop.displayName = "DialogBackdrop"

src/components/ui/dialog/close.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as BaseDialog } from "@base-ui/react/dialog"
+import { cn } from "@/lib/utils"
+
+export type DialogCloseProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Close> & {
+  className?: string
+}
+
+const BaseDialogClose = BaseDialog.Close as React.ElementType
+
+export const DialogClose = React.forwardRef<HTMLElement, DialogCloseProps>(
+  ({ className, ...props }, ref) => (
+    <BaseDialogClose
+      ref={ref}
+      className={cn(
+        "flex h-8 items-center justify-center gap-2 border border-neutral-950 dark:border-white bg-white dark:bg-neutral-950 px-3 text-sm leading-none whitespace-nowrap font-normal text-neutral-950 dark:text-white select-none [&:not([data-disabled]):hover]:bg-neutral-100 dark:[&:not([data-disabled]):hover]:bg-neutral-800 [&:not([data-disabled]):active]:bg-neutral-200 dark:[&:not([data-disabled]):active]:bg-neutral-700 data-[disabled]:border-neutral-500 data-[disabled]:text-neutral-500 disabled:border-neutral-500 disabled:text-neutral-500 dark:data-[disabled]:border-neutral-400 dark:data-[disabled]:text-neutral-400 focus-visible:outline-2 focus-visible:[outline-style:solid] focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+DialogClose.displayName = "DialogClose"

src/components/ui/dialog/content.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import { DialogBackdrop } from "./backdrop"
+import { DialogPortal } from "./portal"
+import { DialogPopup, type DialogPopupProps } from "./popup"
+
+export type DialogContentProps = DialogPopupProps
+
+export const DialogContent = React.forwardRef<HTMLElement, DialogContentProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPortal>
+      <DialogBackdrop />
+        <DialogPopup ref={ref} className={cn(className)} {...props} />
+    </DialogPortal>
+  ),
+)
+
+DialogContent.displayName = "DialogContent"

src/components/ui/dialog/description.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as BaseDialog } from "@base-ui/react/dialog"
+import { cn } from "@/lib/utils"
+
+export type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof BaseDialog.Description> & {
+  className?: string
+}
+
+const BaseDialogDescription = BaseDialog.Description as React.ElementType
+
+export const DialogDescription = React.forwardRef<HTMLElement, DialogDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <BaseDialogDescription
+      ref={ref}
+      className={cn(
+        "text-sm text-neutral-600 dark:text-neutral-400",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+
+DialogDescription.displayName = "DialogDescription"