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"