diff --git a/packages/lytenyte-ui-react/LICENSE b/packages/lytenyte-ui-react/LICENSE
new file mode 100644
index 000000000..52a87aa62
--- /dev/null
+++ b/packages/lytenyte-ui-react/LICENSE
@@ -0,0 +1,13 @@
+Copyright 2025 1771 Technologies
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/packages/lytenyte-ui-react/package.json b/packages/lytenyte-ui-react/package.json
new file mode 100644
index 000000000..f2e273df4
--- /dev/null
+++ b/packages/lytenyte-ui-react/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@1771technologies/lytenyte-ui-react",
+  "description": "LyteNyte React component library",
+  "license": "Apache-2.0",
+  "keywords": [
+    "TODO"
+  ],
+  "version": "0.0.1",
+  "type": "module",
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "homepage": "https://1771technologies.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1771-technologies/lytenyte.git",
+    "directory": "packages/lytenyte-ui-react"
+  },
+  "bugs": {
+    "url": "https://github.com/1771-technologies/lytenyte/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.js"
+      }
+    }
+  },
+  "dependencies": {
+    "@1771technologies/lytenyte-design": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "18.0.0 || ^19.0.0",
+    "react-dom": "18.0.0 || ^19.0.0"
+  }
+}
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-context.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-context.tsx
new file mode 100644
index 000000000..9ecc1dc72
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-context.tsx
@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+
+export interface AccordionContextValue {
+  readonly rootId: string;
+  readonly collapsible: boolean;
+  readonly hiddenUntilFound: boolean;
+  readonly keepMounted: boolean;
+  readonly disabled: boolean;
+  readonly value: any[];
+  readonly attrs: Record<string, string | boolean | undefined>;
+  readonly orientation: "vertical" | "horizontal";
+  readonly onValueChange: (v: any) => void;
+}
+
+const context = createContext({} as AccordionContextValue);
+
+export const AccordionRootProvider = context.Provider;
+export const useAccordionRoot = () => useContext(context);
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-header.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-header.tsx
new file mode 100644
index 000000000..7144b7401
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-header.tsx
@@ -0,0 +1,28 @@
+import { forwardRef } from "react";
+import { useSlot } from "../hooks/use-slot.js";
+import { useAccordionItem } from "./accordion-item-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import type { Accordion } from "./accordion";
+import { DATA_ACCORDION_HEADER } from "../constants.js";
+
+function AccordionHeaderBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Accordion.Header.Props,
+  ref: Accordion.Header.Props["ref"],
+) {
+  const ctx = useAccordionItem();
+
+  const className = useClassName(providedClassName, ctx.state);
+  const style = useStyle(providedStyle, ctx.state);
+
+  const slot = useSlot({
+    slot: render ?? <h3 />,
+    ref,
+    props: [props, { className, style, [DATA_ACCORDION_HEADER]: "", ...ctx.attrs }],
+    state: ctx.state,
+  });
+
+  return slot;
+}
+
+export const AccordionHeader = forwardRef(AccordionHeaderBase);
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-item-context.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-item-context.tsx
new file mode 100644
index 000000000..c23b7ef88
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-item-context.tsx
@@ -0,0 +1,20 @@
+import type { Dispatch, SetStateAction } from "react";
+import { createContext, useContext } from "react";
+import type { Accordion } from "./accordion.js";
+
+export interface AccordionItemContext {
+  readonly collapsible: boolean;
+  readonly hiddenUntilFound: boolean;
+  readonly attrs: Record<string, string | boolean | undefined>;
+  readonly state: Accordion.Item.State;
+  readonly toggle: () => void;
+  readonly triggerId: string;
+  readonly setTriggerId: Dispatch<SetStateAction<string>>;
+  readonly panelId: string;
+  readonly setPanelId: Dispatch<SetStateAction<string>>;
+  readonly onOpenChangeComplete?: (open: boolean) => void;
+}
+
+const context = createContext({} as AccordionItemContext);
+export const AccordionItemProvider = context.Provider;
+export const useAccordionItem = () => useContext(context);
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-item.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-item.tsx
new file mode 100644
index 000000000..30876a4d4
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-item.tsx
@@ -0,0 +1,106 @@
+import { forwardRef, useId, useMemo, useState, type ReactElement } from "react";
+import { useSlot } from "../hooks/use-slot.js";
+import type { AccordionItemContext } from "./accordion-item-context";
+import { AccordionItemProvider } from "./accordion-item-context.js";
+import { useAccordionRoot } from "./accordion-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import type { Accordion } from "./accordion.js";
+import { useEvent } from "../hooks/use-event.js";
+import { DATA_ACCORDION_ITEM, DATA_CLOSED, DATA_DISABLED, DATA_OPEN } from "../constants.js";
+
+function AccordionItemBase<T>(
+  {
+    value: providedValue,
+    collapsible,
+    onOpenChange,
+    onOpenChangeComplete,
+    disabled: providedDisabled,
+    style: providedStyle,
+    className: providedClassName,
+    render,
+    ...props
+  }: Accordion.Item.Props<T>,
+  ref: Accordion.Item.Props<T>["ref"],
+) {
+  const fallbackValue = useId();
+  const value = providedValue ?? fallbackValue;
+
+  const [triggerId, setTriggerId] = useState(useId());
+  const [panelId, setPanelId] = useState(useId());
+
+  const root = useAccordionRoot();
+
+  const disabled = providedDisabled ?? root.disabled;
+
+  const state = useMemo<Accordion.Item.State>(() => {
+    const open = root.value.includes(value);
+
+    return {
+      disabled,
+      orientation: root.orientation,
+      value: root.value,
+      open,
+    };
+  }, [disabled, root.orientation, root.value, value]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const attrs = useMemo(() => {
+    return {
+      ...root.attrs,
+      [DATA_CLOSED]: !state.open || undefined,
+      [DATA_OPEN]: state.open || undefined,
+      [DATA_DISABLED]: disabled || undefined,
+    };
+  }, [disabled, root.attrs, state.open]);
+
+  const toggle = useEvent(function toggle() {
+    if (disabled) return;
+
+    const isOpen = root.value.includes(value);
+    if (isOpen && !(collapsible ?? root.collapsible)) return;
+
+    root.onValueChange(value);
+    onOpenChange?.(!isOpen);
+  });
+
+  const slot = useSlot<Accordion.Item.State>({
+    slot: render ?? <div />,
+    props: [props, { className, style, [DATA_ACCORDION_ITEM]: "", ...attrs, onClick: () => {} }],
+    ref: ref,
+    state,
+  });
+
+  const contextValue = useMemo<AccordionItemContext>(() => {
+    return {
+      collapsible: collapsible ?? root.collapsible,
+      hiddenUntilFound: root.hiddenUntilFound,
+      state,
+      attrs,
+      toggle,
+      triggerId,
+      setTriggerId,
+      panelId,
+      setPanelId,
+      onOpenChangeComplete,
+    };
+  }, [
+    attrs,
+    collapsible,
+    onOpenChangeComplete,
+    panelId,
+    root.collapsible,
+    root.hiddenUntilFound,
+    state,
+    toggle,
+    triggerId,
+  ]);
+
+  return <AccordionItemProvider value={contextValue}>{slot}</AccordionItemProvider>;
+}
+
+export const AccordionItem = forwardRef(AccordionItemBase) as <T>(
+  props: Accordion.Item.Props<T>,
+) => ReactElement;
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-panel.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-panel.tsx
new file mode 100644
index 000000000..c4f6f0bb1
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-panel.tsx
@@ -0,0 +1,108 @@
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { useAccordionItem } from "./accordion-item-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import type { Accordion } from "./accordion";
+import { useAccordionRoot } from "./accordion-context.js";
+import { useIsoEffect } from "../hooks/use-iso-effect.js";
+import { useTransitionedOpen, type TransitionStatus } from "../hooks/use-transition-status.js";
+import { useCombinedRefs } from "../hooks/use-combined-ref.js";
+import { CSS_PANEL_HEIGHT, CSS_PANEL_WIDTH, DATA_ACCORDION_PANEL } from "../constants.js";
+
+function AccordionPanelBase(
+  {
+    render,
+    style: providedStyle,
+    className: providedClassName,
+    keepMounted: providedKeepMounted,
+    hiddenUntilFound: providedHiddenUntilFound,
+    ...props
+  }: Accordion.Panel.Props,
+  ref: Accordion.Panel.Props["ref"],
+) {
+  const ctx = useAccordionItem();
+  const rootCtx = useAccordionRoot();
+  const isHiddenUntilFound = providedHiddenUntilFound ?? rootCtx.hiddenUntilFound;
+
+  const onStatusChange = useCallback(
+    (next: TransitionStatus, _prev: TransitionStatus, el: HTMLElement) => {
+      if (next === "idle") {
+        el.style.setProperty(CSS_PANEL_HEIGHT, "auto");
+        el.style.setProperty(CSS_PANEL_WIDTH, "auto");
+        ctx.onOpenChangeComplete?.(true);
+      } else if (next === "closed") {
+        ctx.onOpenChangeComplete?.(false);
+        if (isHiddenUntilFound) {
+          el.setAttribute("hidden", "until-found");
+        }
+      } else {
+        if (next === "start" && isHiddenUntilFound) {
+          el.removeAttribute("hidden");
+        }
+        el.style.setProperty(CSS_PANEL_HEIGHT, `${el.scrollHeight}px`);
+        el.style.setProperty(CSS_PANEL_WIDTH, `${el.scrollWidth}px`);
+      }
+    },
+    [ctx, isHiddenUntilFound],
+  );
+
+  const { mounted, ref: transitionRef } = useTransitionedOpen(ctx.state.open, onStatusChange);
+
+  const panelRef = useRef<HTMLElement | null>(null);
+
+  // Set hidden="until-found" before first paint for initially-closed panels.
+  // Subsequent open/close transitions are handled by onStatusChange.
+  useIsoEffect(() => {
+    const el = panelRef.current;
+    if (!el) return;
+    if (isHiddenUntilFound && !ctx.state.open) {
+      el.setAttribute("hidden", "until-found");
+    } else {
+      el.removeAttribute("hidden");
+    }
+  }, [isHiddenUntilFound]);
+
+  useEffect(() => {
+    if (!isHiddenUntilFound) return;
+    const el = panelRef.current;
+    if (!el) return;
+
+    const onBeforeMatch = () => {
+      if (!ctx.state.open) ctx.toggle();
+    };
+
+    el.addEventListener("beforematch", onBeforeMatch);
+    return () => el.removeEventListener("beforematch", onBeforeMatch);
+  }, [isHiddenUntilFound, ctx.state.open, ctx.toggle, ctx]);
+
+  useIsoEffect(() => {
+    if (!props.id) return;
+    ctx.setPanelId(props.id);
+  }, [props.id]);
+
+  const className = useClassName(providedClassName, ctx.state);
+  const style = useStyle(providedStyle, ctx.state);
+
+  const slot = useSlot({
+    slot: render ?? <div />,
+    ref: useCombinedRefs(ref, transitionRef, panelRef),
+    props: [
+      {
+        id: ctx.panelId,
+        role: "region",
+        "aria-labelledby": ctx.triggerId,
+      },
+      props,
+      { className, style, [DATA_ACCORDION_PANEL]: "", ...ctx.attrs },
+    ],
+    state: ctx.state,
+  });
+
+  const keepMounted = isHiddenUntilFound || providedKeepMounted || rootCtx.keepMounted;
+  if (!mounted && !keepMounted) return null;
+
+  return slot;
+}
+
+export const AccordionPanel = forwardRef(AccordionPanelBase);
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-root.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-root.tsx
new file mode 100644
index 000000000..a7618aefa
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-root.tsx
@@ -0,0 +1,162 @@
+import type { JSX } from "react";
+import { forwardRef, useId, useMemo, type KeyboardEvent } from "react";
+import { useSlot } from "../hooks/use-slot.js";
+import { useControlled } from "../hooks/use-controlled.js";
+import type { AccordionContextValue } from "./accordion-context.js";
+import { AccordionRootProvider } from "./accordion-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import type { Accordion } from "./accordion.js";
+import { useEvent } from "../hooks/use-event.js";
+import { DATA_ACCORDION_ROOT, DATA_DISABLED, DATA_ORIENTATION, DATA_ROOT_ID } from "../constants.js";
+import { useDirection } from "../direction-provider/direction-provider.js";
+
+function AccordionRootImpl<T = any>(
+  {
+    render,
+    collapsible,
+    value: providedValue,
+    defaultValue,
+    hiddenUntilFound,
+    disabled: providedDisabled,
+    multiple,
+    loopFocus,
+    orientation: providedOrientation,
+    style: providedStyle,
+    className: providedClassName,
+    keepMounted,
+    onValueChange: providedValueChange,
+    ...props
+  }: Accordion.Props<T>,
+  forwarded: Accordion.Props<T>["ref"],
+) {
+  const rootId = useId();
+  const [value, setValue] = useControlled({
+    controlled: providedValue,
+    default: defaultValue ?? [],
+  });
+  const disabled = providedDisabled ?? false;
+  const orientation = providedOrientation ?? "vertical";
+
+  const onValueChange = useEvent(function onValueChange(v: T) {
+    if (multiple) {
+      const next = value.includes(v) ? value.filter((x) => x != v) : [...value, v];
+
+      setValue(next);
+      providedValueChange?.(next);
+    } else {
+      const next = value.includes(v) ? [] : [v];
+
+      setValue(next);
+      providedValueChange?.(next);
+    }
+  });
+
+  const state = useMemo<Accordion.State>(() => {
+    return { value, disabled, orientation };
+  }, [value, disabled, orientation]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const sharedAttrs = useMemo(() => {
+    return {
+      [DATA_ORIENTATION]: providedOrientation,
+      [DATA_DISABLED]: disabled || undefined,
+    };
+  }, [disabled, providedOrientation]);
+
+  const direction = useDirection();
+
+  const handleKeyDown = useEvent((e: KeyboardEvent<HTMLElement>) => {
+    const isVertical = orientation === "vertical";
+
+    let move: "next" | "prev" | "first" | "last" | null = null;
+
+    if (isVertical) {
+      if (e.key === "ArrowDown") move = "next";
+      if (e.key === "ArrowUp") move = "prev";
+    } else {
+      if (e.key === "ArrowRight") move = direction === "rtl" ? "prev" : "next";
+      if (e.key === "ArrowLeft") move = direction === "rtl" ? "next" : "prev";
+    }
+
+    if (e.key === "Home") move = "first";
+    if (e.key === "End") move = "last";
+
+    if (!move) return;
+
+    const rootEl = e.currentTarget;
+    const selector = `[${DATA_ROOT_ID}="${rootId}"]`;
+    const triggers = Array.from(rootEl.querySelectorAll<HTMLElement>(selector));
+
+    if (triggers.length === 0) return;
+
+    const active = (e.target as HTMLElement).closest?.(selector);
+    const currentIndex = active ? triggers.indexOf(active as HTMLElement) : -1;
+    if (currentIndex === -1) return; // Focus is not a trigger, so we should do nothing.
+
+    e.preventDefault();
+
+    const loop = loopFocus ?? true;
+    let nextIndex: number;
+
+    switch (move) {
+      case "next":
+        nextIndex = currentIndex + 1;
+        if (nextIndex >= triggers.length) nextIndex = loop ? 0 : triggers.length - 1;
+        break;
+      case "prev":
+        nextIndex = currentIndex - 1;
+        if (nextIndex < 0) nextIndex = loop ? triggers.length - 1 : 0;
+        break;
+      case "first":
+        nextIndex = 0;
+        break;
+      case "last":
+        nextIndex = triggers.length - 1;
+        break;
+    }
+
+    triggers[nextIndex]?.focus();
+  });
+
+  const slot = useSlot<Accordion.State<T>>({
+    slot: render ?? <div />,
+    props: [
+      { dir: direction, onKeyDown: handleKeyDown } satisfies JSX.IntrinsicElements["div"],
+      props,
+      { className, style, [DATA_ACCORDION_ROOT]: "", ...sharedAttrs },
+    ],
+    ref: forwarded,
+    state: state,
+  });
+
+  const contextValue = useMemo<AccordionContextValue>(() => {
+    return {
+      rootId,
+      collapsible: collapsible ?? true,
+      disabled: disabled,
+      hiddenUntilFound: hiddenUntilFound ?? false,
+      keepMounted: keepMounted ?? false,
+      value,
+      attrs: sharedAttrs,
+      orientation: orientation,
+      onValueChange,
+    };
+  }, [
+    rootId,
+    collapsible,
+    disabled,
+    hiddenUntilFound,
+    keepMounted,
+    onValueChange,
+    orientation,
+    sharedAttrs,
+    value,
+  ]);
+
+  return <AccordionRootProvider value={contextValue}>{slot}</AccordionRootProvider>;
+}
+
+export const AccordionRoot = forwardRef(AccordionRootImpl);
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion-trigger.tsx b/packages/lytenyte-ui-react/src/accordion/accordion-trigger.tsx
new file mode 100644
index 000000000..ee9ce7da2
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion-trigger.tsx
@@ -0,0 +1,53 @@
+import type { JSX } from "react";
+import { forwardRef } from "react";
+import { useAccordionItem } from "./accordion-item-context.js";
+import { useAccordionRoot } from "./accordion-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import type { Accordion } from "./accordion";
+import { useIsoEffect } from "../hooks/use-iso-effect.js";
+import { DATA_ACCORDION_TRIGGER, DATA_ROOT_ID } from "../constants.js";
+
+function AccordionTriggerBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Accordion.Trigger.Props,
+  ref: Accordion.Trigger.Props["ref"],
+) {
+  const ctx = useAccordionItem();
+  const rootCtx = useAccordionRoot();
+
+  const className = useClassName(providedClassName, ctx.state);
+  const style = useStyle(providedStyle, ctx.state);
+
+  useIsoEffect(() => {
+    if (!props.id) return;
+    ctx.setTriggerId(props.id);
+  }, [props.id]);
+
+  const slot = useSlot({
+    slot: render ?? <button />,
+    ref,
+    props: [
+      {
+        id: ctx.triggerId,
+        "aria-disabled": ctx.state.disabled || undefined,
+        "aria-expanded": ctx.state.open,
+        "aria-controls": ctx.panelId,
+      } satisfies JSX.IntrinsicElements["div"],
+      props,
+      {
+        className,
+        style,
+        [DATA_ROOT_ID]: rootCtx.rootId,
+        [DATA_ACCORDION_TRIGGER]: "",
+        ...ctx.attrs,
+        onClick: () => ctx.toggle(),
+      },
+    ],
+    state: ctx.state,
+  });
+
+  return slot;
+}
+
+export const AccordionTrigger = forwardRef(AccordionTriggerBase);
diff --git a/packages/lytenyte-ui-react/src/accordion/accordion.tsx b/packages/lytenyte-ui-react/src/accordion/accordion.tsx
new file mode 100644
index 000000000..45ad73207
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/accordion/accordion.tsx
@@ -0,0 +1,296 @@
+import type { JSX } from "react";
+import type { ClassNameWithState, SlotComponent, StyleWithState } from "../type.js";
+import { AccordionRoot } from "./accordion-root.js";
+import { AccordionItem } from "./accordion-item.js";
+import { AccordionHeader } from "./accordion-header.js";
+import { AccordionTrigger } from "./accordion-trigger.js";
+import { AccordionPanel } from "./accordion-panel.js";
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Panel: AccordionPanel,
+};
+
+export namespace Accordion {
+  export type AccordionOrientation = "vertical" | "horizontal";
+  export interface State<T = any> {
+    readonly value: T[];
+    readonly disabled: boolean;
+    readonly orientation: AccordionOrientation;
+  }
+
+  export type Props<T = any> = Omit<JSX.IntrinsicElements["div"], "className" | "style"> & {
+    /**
+     * Override the default element that is rendered by the accordion root.
+     * The slot element provided must accept a valid ref attribute.
+     *
+     * Accepts a `ReactElement` or a function that
+     * will given the accordion state and returns a `ReactElement`
+     *
+     * @default <div />
+     */
+    readonly render?: SlotComponent<State<T>>;
+
+    /**
+     * Whether an accordion item can be closed after it has been expanded. Setting the
+     * `collapsible` property on the root level changes the default for all accordion items.
+     *
+     * @default true
+     */
+    readonly collapsible?: boolean;
+
+    /**
+     * The initial value of the expanded accordion items. Use when you want to set the initial
+     * state of the accordion but do not want to control state updates.
+     */
+    readonly defaultValue?: T[];
+
+    /**
+     * The controlled value of the accordion. If this value is set, then the `defaultValue` property
+     * will be ignored. Use this property when you want to have direct control over the accordion state.
+     *
+     * Set the `onValueChange` property to handle accordion expansion changes.
+     */
+    readonly value?: T[];
+
+    /**
+     * Allows the browser's built-in page search to find and expand the panel contents. Overrides
+     * the `keepMounted` prop and uses the `hidden="until-found"` property to hide the element without
+     * removing it from the DOM.
+     *
+     * To learn more about the `hidden` property see
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/hidden)
+     *
+     * @default false
+     */
+    readonly hiddenUntilFound?: boolean;
+
+    /**
+     * Whether the accordion items can receive user interaction. Setting disabled on the Accordion root will apply
+     * to all items, however individual items may override the setting by setting their own
+     * disable state.
+     *
+     * @default false
+     */
+    readonly disabled?: boolean;
+
+    /**
+     * Whether multiple items can be open at the same time.
+     *
+     * If the `value` property is set with multiple items, whilst `multiple` is `false`, the accordion
+     * will respect the `value` property and display multiple open accordions. However, subsequent
+     * expansion changes will collapse/expand accordions to ensure only a single item is open.
+     *
+     * For the most predictable result only use `multiple` if your application logic can handle
+     * `value` states that contain more than a single item.
+     *
+     * @default false
+     */
+    readonly multiple?: boolean;
+
+    /**
+     * Whether to cycle through accordion items when using the arrow keys to navigate the accordion.
+     *
+     * @default true
+     */
+    readonly loopFocus?: boolean;
+
+    /**
+     * The visual orientation of the accordion. Controls whether the roving focus uses left/right
+     * or up/down arrow keys.
+     *
+     * @default "vertical"
+     */
+    readonly orientation?: "horizontal" | "vertical";
+
+    /**
+     * Inline styles applied to the root accordion element, or a function that returns inline styled
+     * based on the Accordion's state.
+     */
+    readonly style?: StyleWithState<State>;
+
+    /**
+     * CSS classes applied to the root accordion element, or a function that returns classes based
+     * on the Accordion's state.
+     */
+    readonly className?: ClassNameWithState<State>;
+
+    /**
+     * Whether to mount the element in the DOM while the panel is closed. This property is ignored
+     * when `hiddenUntilFound` is set to `true`.
+     */
+    readonly keepMounted?: boolean;
+
+    /**
+     * Event handler called when an accordion item is expanded or collapsed. Provides the new
+     * accordion value state when called.
+     */
+    readonly onValueChange?: (change: T[]) => void;
+  };
+
+  export namespace Item {
+    export interface State extends Accordion.State {
+      readonly open: boolean;
+    }
+
+    export type Props<T = any> = Omit<JSX.IntrinsicElements["div"], "className" | "style"> & {
+      /**
+       * The value associated with this accordion item. The value should be unique among all
+       * the accordion items. If the value is present in the Root's `value` the accordion will be
+       * expanded.
+       */
+      readonly value?: T;
+
+      /**
+       * Whether the accordion item can be collapsed and expanded. Overrides the default
+       * root value.
+       */
+      readonly collapsible?: boolean;
+
+      /**
+       * Event handler called when the open state of this accordion item changes. Provides
+       * the new open state as a boolean when called.
+       */
+      readonly onOpenChange?: (change: boolean) => void;
+
+      /**
+       * Event handler called when the open or close animation has fully completed.
+       * Provides the final open state as a boolean.
+       */
+      readonly onOpenChangeComplete?: (open: boolean) => void;
+
+      /**
+       * Whether the accordion item can receive user interaction. Overrides the `disabled`
+       * setting from the accordion root for this specific item.
+       *
+       * @default false
+       */
+      readonly disabled?: boolean;
+
+      /**
+       * Inline styles applied to the item element, or a function that returns inline styles
+       * based on the item's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the item element, or a function that returns classes based
+       * on the item's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the accordion item.
+       * The slot element provided must accept a valid ref attribute.
+       *
+       * Accepts a `ReactElement` or a function that
+       * will given the item state and returns a `ReactElement`.
+       *
+       * @default <div />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Header {
+    export type Props = JSX.IntrinsicElements["h3"] & {
+      /**
+       * Inline styles applied to the header element, or a function that returns inline styles
+       * based on the header's state.
+       */
+      readonly style?: StyleWithState<Item.State>;
+
+      /**
+       * CSS classes applied to the header element, or a function that returns classes based
+       * on the header's state.
+       */
+      readonly className?: ClassNameWithState<Item.State>;
+
+      /**
+       * Override the default element that is rendered by the accordion header.
+       * The slot element provided must accept a valid ref attribute.
+       *
+       * Accepts a `ReactElement` or a function that
+       * will given the header state and returns a `ReactElement`.
+       *
+       * @default <h3 />
+       */
+      readonly render?: SlotComponent<Item.State>;
+    };
+  }
+
+  export namespace Trigger {
+    export type Props = JSX.IntrinsicElements["button"] & {
+      /**
+       * Inline styles applied to the trigger element, or a function that returns inline styles
+       * based on the trigger's state.
+       */
+      readonly style?: StyleWithState<Item.State>;
+
+      /**
+       * CSS classes applied to the trigger element, or a function that returns classes based
+       * on the trigger's state.
+       */
+      readonly className?: ClassNameWithState<Item.State>;
+
+      /**
+       * Override the default element that is rendered by the accordion trigger.
+       * The slot element provided must accept a valid ref attribute.
+       *
+       * Accepts a `ReactElement` or a function that
+       * will given the trigger state and returns a `ReactElement`.
+       *
+       * @default <button />
+       */
+      readonly render?: SlotComponent<Item.State>;
+    };
+  }
+
+  export namespace Panel {
+    export type Props = JSX.IntrinsicElements["div"] & {
+      /**
+       * Allows the browser's built-in page search to find and expand the panel contents. Overrides
+       * the `keepMounted` prop and uses the `hidden="until-found"` property to hide the element without
+       * removing it from the DOM. Overrides the root-level `hiddenUntilFound` setting for this specific panel.
+       *
+       * @default false
+       */
+      readonly hiddenUntilFound?: boolean;
+
+      /**
+       * Whether to keep the panel element mounted in the DOM while it is closed. This property
+       * is ignored when `hiddenUntilFound` is set to `true`. Overrides the root-level `keepMounted`
+       * setting for this specific panel.
+       *
+       * @default false
+       */
+      readonly keepMounted?: boolean;
+
+      /**
+       * Inline styles applied to the panel element, or a function that returns inline styles
+       * based on the panel's state.
+       */
+      readonly style?: StyleWithState<Item.State>;
+
+      /**
+       * CSS classes applied to the panel element, or a function that returns classes based
+       * on the panel's state.
+       */
+      readonly className?: ClassNameWithState<Item.State>;
+
+      /**
+       * Override the default element that is rendered by the accordion panel.
+       * The slot element provided must accept a valid ref attribute.
+       *
+       * Accepts a `ReactElement` or a function that
+       * will given the panel state and returns a `ReactElement`.
+       *
+       * @default <div />
+       */
+      readonly render?: SlotComponent<Item.State>;
+    };
+  }
+}
diff --git a/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-action.tsx b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-action.tsx
new file mode 100644
index 000000000..856dfc77b
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-action.tsx
@@ -0,0 +1,37 @@
+import { forwardRef, useMemo } from "react";
+import { useDialogRoot } from "../dialog/dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import { DATA_ALERT_DIALOG_ACTION } from "../constants.js";
+import type { AlertDialog } from "./alert-dialog.js";
+
+function AlertDialogActionBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: AlertDialog.Action.Props,
+  ref: AlertDialog.Action.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const state: AlertDialog.State = useMemo(() => ({ open: ctx.open, modal: true }), [ctx.open]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <button />,
+    ref,
+    props: [
+      props,
+      {
+        className,
+        style,
+        [DATA_ALERT_DIALOG_ACTION]: "",
+        onClick: () => ctx.onOpenChange(false),
+      },
+    ],
+    state,
+  });
+
+  return slot;
+}
+
+export const AlertDialogAction = forwardRef(AlertDialogActionBase);
diff --git a/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-cancel.tsx b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-cancel.tsx
new file mode 100644
index 000000000..f3174d922
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-cancel.tsx
@@ -0,0 +1,37 @@
+import { forwardRef, useMemo } from "react";
+import { useDialogRoot } from "../dialog/dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import { DATA_ALERT_DIALOG_CANCEL } from "../constants.js";
+import type { AlertDialog } from "./alert-dialog.js";
+
+function AlertDialogCancelBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: AlertDialog.Cancel.Props,
+  ref: AlertDialog.Cancel.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const state: AlertDialog.State = useMemo(() => ({ open: ctx.open, modal: true }), [ctx.open]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <button />,
+    ref,
+    props: [
+      props,
+      {
+        className,
+        style,
+        [DATA_ALERT_DIALOG_CANCEL]: "",
+        onClick: () => ctx.onOpenChange(false),
+      },
+    ],
+    state,
+  });
+
+  return slot;
+}
+
+export const AlertDialogCancel = forwardRef(AlertDialogCancelBase);
diff --git a/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-content.tsx b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-content.tsx
new file mode 100644
index 000000000..7c6fc4b0b
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-content.tsx
@@ -0,0 +1,10 @@
+import { forwardRef } from "react";
+import { DialogContent } from "../dialog/dialog-content.js";
+import { DATA_ALERT_DIALOG_CONTENT } from "../constants.js";
+import type { AlertDialog } from "./alert-dialog.js";
+
+function AlertDialogContentBase(props: AlertDialog.Content.Props, ref: AlertDialog.Content.Props["ref"]) {
+  return <DialogContent role="alertdialog" {...{ [DATA_ALERT_DIALOG_CONTENT]: "" }} {...props} ref={ref} />;
+}
+
+export const AlertDialogContent = forwardRef(AlertDialogContentBase);
diff --git a/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-root.tsx b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-root.tsx
new file mode 100644
index 000000000..6c4de3c20
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog-root.tsx
@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { DialogRoot } from "../dialog/dialog-root.js";
+import { useDialogRoot, DialogRootProvider } from "../dialog/dialog-context.js";
+import type { AlertDialog } from "./alert-dialog.js";
+
+function AlertDialogContextOverride({ children }: { children: React.ReactNode }) {
+  const parent = useDialogRoot();
+
+  const overridden = useMemo(() => ({ ...parent, closeOnEscape: false }), [parent]);
+
+  return <DialogRootProvider value={overridden}>{children}</DialogRootProvider>;
+}
+
+export function AlertDialogRoot({ open, defaultOpen, onOpenChange, children }: AlertDialog.Props) {
+  return (
+    <DialogRoot open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal dismissible={false}>
+      <AlertDialogContextOverride>{children}</AlertDialogContextOverride>
+    </DialogRoot>
+  );
+}
diff --git a/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog.tsx b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog.tsx
new file mode 100644
index 000000000..67b515b51
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/alert-dialog/alert-dialog.tsx
@@ -0,0 +1,128 @@
+import type { JSX } from "react";
+import type { ClassNameWithState, SlotComponent, StyleWithState } from "../type.js";
+import { DialogTrigger } from "../dialog/dialog-trigger.js";
+import { DialogTitle } from "../dialog/dialog-title.js";
+import { DialogDescription } from "../dialog/dialog-description.js";
+import { AlertDialogRoot } from "./alert-dialog-root.js";
+import { AlertDialogContent } from "./alert-dialog-content.js";
+import { AlertDialogCancel } from "./alert-dialog-cancel.js";
+import { AlertDialogAction } from "./alert-dialog-action.js";
+
+export const AlertDialog = {
+  Root: AlertDialogRoot,
+  Trigger: DialogTrigger,
+  Content: AlertDialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Cancel: AlertDialogCancel,
+  Action: AlertDialogAction,
+};
+
+export namespace AlertDialog {
+  export interface State {
+    readonly open: boolean;
+    readonly modal: boolean;
+  }
+
+  export type Props = {
+    /**
+     * The controlled open state of the alert dialog.
+     */
+    readonly open?: boolean;
+
+    /**
+     * The default open state when uncontrolled.
+     *
+     * @default false
+     */
+    readonly defaultOpen?: boolean;
+
+    /**
+     * Event handler called when the alert dialog open state changes.
+     */
+    readonly onOpenChange?: (open: boolean) => void;
+
+    readonly children?: React.ReactNode;
+  };
+
+  export namespace Content {
+    export type Props = Omit<JSX.IntrinsicElements["dialog"], "className" | "style"> & {
+      /**
+       * Whether to keep the content mounted in the DOM when the dialog is closed.
+       *
+       * @default false
+       */
+      readonly keepMounted?: boolean;
+
+      /**
+       * Event handler called when the open or close animation has fully completed.
+       */
+      readonly onOpenChangeComplete?: (open: boolean) => void;
+
+      /**
+       * Inline styles applied to the content element, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the content element, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the alert dialog content.
+       *
+       * @default <dialog />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Cancel {
+    export type Props = JSX.IntrinsicElements["button"] & {
+      /**
+       * Inline styles applied to the cancel button, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the cancel button, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the cancel button.
+       *
+       * @default <button />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Action {
+    export type Props = JSX.IntrinsicElements["button"] & {
+      /**
+       * Inline styles applied to the action button, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the action button, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the action button.
+       *
+       * @default <button />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+}
diff --git a/packages/lytenyte-ui-react/src/constants.ts b/packages/lytenyte-ui-react/src/constants.ts
new file mode 100644
index 000000000..f9d18964e
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/constants.ts
@@ -0,0 +1,25 @@
+export const DATA_OPEN = "data-open";
+export const DATA_CLOSED = "data-closed";
+export const DATA_DISABLED = "data-disabled";
+export const DATA_ORIENTATION = "data-orientation";
+export const DATA_STATUS = "data-status";
+export const DATA_ROOT_ID = "data-root-id";
+export const DATA_ACCORDION_ROOT = "data-accordion-root";
+export const DATA_ACCORDION_ITEM = "data-accordion-item";
+export const DATA_ACCORDION_HEADER = "data-accordion-header";
+export const DATA_ACCORDION_TRIGGER = "data-accordion-trigger";
+export const DATA_ACCORDION_PANEL = "data-accordion-panel";
+export const CSS_PANEL_HEIGHT = "--panel-height";
+export const CSS_PANEL_WIDTH = "--panel-width";
+
+export const DATA_DIALOG_ROOT = "data-dialog-root";
+export const DATA_DIALOG_TRIGGER = "data-dialog-trigger";
+export const DATA_DIALOG_CONTENT = "data-dialog-content";
+export const DATA_DIALOG_TITLE = "data-dialog-title";
+export const DATA_DIALOG_DESCRIPTION = "data-dialog-description";
+export const DATA_DIALOG_CLOSE = "data-dialog-close";
+export const DATA_MODAL = "data-modal";
+
+export const DATA_ALERT_DIALOG_CONTENT = "data-alert-dialog-content";
+export const DATA_ALERT_DIALOG_CANCEL = "data-alert-dialog-cancel";
+export const DATA_ALERT_DIALOG_ACTION = "data-alert-dialog-action";
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-close.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-close.tsx
new file mode 100644
index 000000000..7970b6e46
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-close.tsx
@@ -0,0 +1,37 @@
+import { forwardRef, useMemo } from "react";
+import { useDialogRoot } from "./dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import type { Dialog } from "./dialog.js";
+import { DATA_DIALOG_CLOSE } from "../constants.js";
+
+function DialogCloseBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Dialog.Close.Props,
+  ref: Dialog.Close.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const state: Dialog.State = useMemo(() => ({ open: ctx.open, modal: ctx.modal }), [ctx.modal, ctx.open]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <button />,
+    ref,
+    props: [
+      props,
+      {
+        className,
+        style,
+        [DATA_DIALOG_CLOSE]: "",
+        onClick: () => ctx.onOpenChange(false),
+      },
+    ],
+    state,
+  });
+
+  return slot;
+}
+
+export const DialogClose = forwardRef(DialogCloseBase);
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-content.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-content.tsx
new file mode 100644
index 000000000..8f435cce6
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-content.tsx
@@ -0,0 +1,188 @@
+import { forwardRef, useCallback, useEffect, useRef } from "react";
+import { useDialogRoot } from "./dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import { useIsoEffect } from "../hooks/use-iso-effect.js";
+import { useTransitionedOpen, type TransitionStatus } from "../hooks/use-transition-status.js";
+import { useCombinedRefs } from "../hooks/use-combined-ref.js";
+import { useEvent } from "../hooks/use-event.js";
+import type { Dialog } from "./dialog.js";
+import { DATA_DIALOG_CONTENT, DATA_MODAL, DATA_OPEN, DATA_CLOSED } from "../constants.js";
+
+function DialogContentBase(
+  {
+    render,
+    style: providedStyle,
+    className: providedClassName,
+    keepMounted,
+    onOpenChangeComplete,
+    ...props
+  }: Dialog.Content.Props,
+  ref: Dialog.Content.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const dialogRef = useRef<HTMLDialogElement | null>(null);
+
+  const state: Dialog.State = { open: ctx.open, modal: ctx.modal };
+
+  const onStatusChange = useCallback(
+    (next: TransitionStatus, _prev: TransitionStatus, el: HTMLElement) => {
+      if (next === "idle") {
+        onOpenChangeComplete?.(true);
+      } else if (next === "closed") {
+        const dialog = el as HTMLDialogElement;
+        dialog.close();
+        onOpenChangeComplete?.(false);
+      }
+    },
+    [onOpenChangeComplete],
+  );
+
+  const { mounted, ref: transitionRef } = useTransitionedOpen(ctx.open, onStatusChange);
+
+  // Show the native dialog when the element mounts into the DOM.
+  // `mounted` is needed because on the first render with open=true,
+  // the element doesn't exist yet (returns null). useTransitionedOpen
+  // sets mounted=true on the next render, which re-triggers this effect.
+  useIsoEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    if (ctx.open && !dialog.open) {
+      if (ctx.modal) {
+        dialog.showModal();
+      } else {
+        dialog.show();
+      }
+    }
+  }, [ctx.open, ctx.modal, mounted]);
+
+  // Escape via React onKeyDown (passed in slot props below).
+  // Gated on closeOnEscape so AlertDialog can disable it.
+  // stopPropagation prevents nested dialogs from closing their parents.
+  const handleEscapeKeyDown = useEvent((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      if (ctx.closeOnEscape) {
+        ctx.onOpenChange(false);
+      }
+    }
+  });
+
+  // Block the browser's native cancel event (fired on Escape for modal
+  // dialogs) so the browser doesn't close the dialog out from under us.
+  // We handle close logic ourselves via handleEscapeKeyDown / document listener.
+  const handleCancel = useEvent((e: Event) => {
+    e.preventDefault();
+  });
+
+  // Sync React state if the dialog was closed by something we didn't
+  // intercept (e.g. form[method=dialog] submit). Prevents desync where
+  // the native dialog is closed but React still thinks it's open.
+  const handleClose = useEvent(() => {
+    if (ctx.open) {
+      ctx.onOpenChange(false);
+    }
+  });
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    dialog.addEventListener("cancel", handleCancel);
+    dialog.addEventListener("close", handleClose);
+    return () => {
+      dialog.removeEventListener("cancel", handleCancel);
+      dialog.removeEventListener("close", handleClose);
+    };
+  }, [handleCancel, handleClose, mounted]);
+
+  // Non-modal dialogs don't trap focus, so the user may have focus
+  // outside the dialog. A document-level listener ensures Escape
+  // closes the dialog regardless of where focus is.
+  const handleDocumentKeyDown = useEvent((e: KeyboardEvent) => {
+    if (e.key === "Escape" && ctx.closeOnEscape) {
+      ctx.onOpenChange(false);
+    }
+  });
+
+  useEffect(() => {
+    if (ctx.modal || !ctx.open) return;
+
+    document.addEventListener("keydown", handleDocumentKeyDown);
+    return () => document.removeEventListener("keydown", handleDocumentKeyDown);
+  }, [ctx.modal, ctx.open, handleDocumentKeyDown]);
+
+  // Backdrop click detection for modal dialogs.
+  const handleClick = useEvent((e: React.MouseEvent<HTMLDialogElement>) => {
+    if (!ctx.dismissible) return;
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    // Only close if the click target is the dialog itself (not its children).
+    // When clicking on the backdrop, the target is the <dialog> element, and
+    // the click coordinates fall outside the dialog's content rect.
+    if (e.target !== dialog) return;
+
+    const rect = dialog.getBoundingClientRect();
+    const clickedInside =
+      e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
+
+    if (!clickedInside) {
+      ctx.onOpenChange(false);
+    }
+  });
+
+  // Restore focus to the trigger element when the dialog closes.
+  // Track previous open state so we only restore on open→closed transitions,
+  // not on the initial mount when open is already false.
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (ctx.open) {
+      wasOpen.current = true;
+    } else if (wasOpen.current) {
+      wasOpen.current = false;
+      ctx.triggerRef.current?.focus();
+    }
+  }, [ctx.open, ctx.triggerRef]);
+
+  useIsoEffect(() => {
+    if (!props.id) return;
+    ctx.setTitleId(props.id);
+  }, [props.id]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <dialog />,
+    ref: useCombinedRefs(ref, transitionRef, dialogRef),
+    props: [
+      {
+        role: "dialog",
+        "aria-labelledby": ctx.titleId,
+        "aria-describedby": ctx.descriptionId || undefined,
+        "aria-modal": ctx.modal || undefined,
+      },
+      props,
+      {
+        className,
+        style,
+        onClick: handleClick,
+        onKeyDown: handleEscapeKeyDown,
+        [DATA_DIALOG_CONTENT]: "",
+        [DATA_MODAL]: ctx.modal ? "true" : "false",
+        [DATA_OPEN]: ctx.open || undefined,
+        [DATA_CLOSED]: !ctx.open || undefined,
+      },
+    ],
+    state,
+  });
+
+  if (!mounted && !keepMounted) return null;
+
+  return slot;
+}
+
+export const DialogContent = forwardRef(DialogContentBase);
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-context.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-context.tsx
new file mode 100644
index 000000000..8ba14e238
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-context.tsx
@@ -0,0 +1,19 @@
+import { createContext, useContext, type RefObject } from "react";
+
+export interface DialogContextValue {
+  readonly open: boolean;
+  readonly modal: boolean;
+  readonly dismissible: boolean;
+  readonly closeOnEscape: boolean;
+  readonly titleId: string;
+  readonly setTitleId: (id: string) => void;
+  readonly descriptionId: string | undefined;
+  readonly setDescriptionId: (id: string) => void;
+  readonly triggerRef: RefObject<HTMLElement | null>;
+  readonly onOpenChange: (open: boolean) => void;
+}
+
+const context = createContext({} as DialogContextValue);
+
+export const DialogRootProvider = context.Provider;
+export const useDialogRoot = () => useContext(context);
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-description.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-description.tsx
new file mode 100644
index 000000000..1b641d393
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-description.tsx
@@ -0,0 +1,46 @@
+import { forwardRef, useId, useMemo } from "react";
+import { useDialogRoot } from "./dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import { useIsoEffect } from "../hooks/use-iso-effect.js";
+import type { Dialog } from "./dialog.js";
+import { DATA_DIALOG_DESCRIPTION } from "../constants.js";
+
+function DialogDescriptionBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Dialog.Description.Props,
+  ref: Dialog.Description.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const fallbackId = useId();
+  const state: Dialog.State = useMemo(() => ({ open: ctx.open, modal: ctx.modal }), [ctx.modal, ctx.open]);
+
+  // Register the description ID with the root context so Content
+  // can set aria-describedby. Only set when this component mounts.
+  const resolvedId = props.id ?? fallbackId;
+  useIsoEffect(() => {
+    ctx.setDescriptionId(resolvedId);
+  }, [resolvedId]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <p />,
+    ref,
+    props: [
+      { id: resolvedId },
+      props,
+      {
+        className,
+        style,
+        [DATA_DIALOG_DESCRIPTION]: "",
+      },
+    ],
+    state,
+  });
+
+  return slot;
+}
+
+export const DialogDescription = forwardRef(DialogDescriptionBase);
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-root.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-root.tsx
new file mode 100644
index 000000000..aae529b35
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-root.tsx
@@ -0,0 +1,48 @@
+import { useId, useMemo, useRef, useState } from "react";
+import { useControlled } from "../hooks/use-controlled.js";
+import { useEvent } from "../hooks/use-event.js";
+import { DialogRootProvider, type DialogContextValue } from "./dialog-context.js";
+import type { Dialog } from "./dialog.js";
+
+export function DialogRoot({
+  open: providedOpen,
+  defaultOpen,
+  modal: providedModal,
+  dismissible: providedDismissible,
+  onOpenChange: providedOnOpenChange,
+  children,
+}: Dialog.Props) {
+  const modal = providedModal ?? true;
+  const dismissible = providedDismissible ?? true;
+
+  const [open, setOpen] = useControlled({
+    controlled: providedOpen,
+    default: defaultOpen ?? false,
+  });
+
+  const [titleId, setTitleId] = useState(useId());
+  const [descriptionId, setDescriptionId] = useState<string | undefined>(undefined);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  const onOpenChange = useEvent(function onOpenChange(next: boolean) {
+    setOpen(next);
+    providedOnOpenChange?.(next);
+  });
+
+  const contextValue = useMemo<DialogContextValue>(() => {
+    return {
+      open,
+      modal,
+      dismissible,
+      closeOnEscape: true,
+      titleId,
+      setTitleId,
+      descriptionId,
+      setDescriptionId,
+      triggerRef,
+      onOpenChange,
+    };
+  }, [open, modal, dismissible, titleId, descriptionId, onOpenChange]);
+
+  return <DialogRootProvider value={contextValue}>{children}</DialogRootProvider>;
+}
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-title.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-title.tsx
new file mode 100644
index 000000000..e52e31002
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-title.tsx
@@ -0,0 +1,35 @@
+import { forwardRef, useMemo } from "react";
+import { useDialogRoot } from "./dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import { useIsoEffect } from "../hooks/use-iso-effect.js";
+import type { Dialog } from "./dialog.js";
+import { DATA_DIALOG_TITLE } from "../constants.js";
+
+function DialogTitleBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Dialog.Title.Props,
+  ref: Dialog.Title.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const state: Dialog.State = useMemo(() => ({ open: ctx.open, modal: ctx.modal }), [ctx.modal, ctx.open]);
+
+  useIsoEffect(() => {
+    if (!props.id) return;
+    ctx.setTitleId(props.id);
+  }, [props.id]);
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <h2 />,
+    ref,
+    props: [{ id: ctx.titleId }, props, { className, style, [DATA_DIALOG_TITLE]: "" }],
+    state,
+  });
+
+  return slot;
+}
+
+export const DialogTitle = forwardRef(DialogTitleBase);
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog-trigger.tsx b/packages/lytenyte-ui-react/src/dialog/dialog-trigger.tsx
new file mode 100644
index 000000000..9c97216f1
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog-trigger.tsx
@@ -0,0 +1,37 @@
+import { forwardRef } from "react";
+import { useDialogRoot } from "./dialog-context.js";
+import { useClassName } from "../hooks/use-class-name.js";
+import { useStyle } from "../hooks/use-style.js";
+import { useSlot } from "../hooks/use-slot.js";
+import { useCombinedRefs } from "../hooks/use-combined-ref.js";
+import type { Dialog } from "./dialog.js";
+import { DATA_DIALOG_TRIGGER } from "../constants.js";
+
+function DialogTriggerBase(
+  { render, style: providedStyle, className: providedClassName, ...props }: Dialog.Trigger.Props,
+  ref: Dialog.Trigger.Props["ref"],
+) {
+  const ctx = useDialogRoot();
+  const state: Dialog.State = { open: ctx.open, modal: ctx.modal };
+
+  const className = useClassName(providedClassName, state);
+  const style = useStyle(providedStyle, state);
+
+  const slot = useSlot({
+    slot: render ?? <button />,
+    ref: useCombinedRefs(ref, ctx.triggerRef),
+    props: [
+      {
+        "aria-expanded": ctx.open,
+        "aria-haspopup": "dialog" as const,
+      },
+      props,
+      { className, style, [DATA_DIALOG_TRIGGER]: "", onClick: () => ctx.onOpenChange(true) },
+    ],
+    state,
+  });
+
+  return slot;
+}
+
+export const DialogTrigger = forwardRef(DialogTriggerBase);
diff --git a/packages/lytenyte-ui-react/src/dialog/dialog.tsx b/packages/lytenyte-ui-react/src/dialog/dialog.tsx
new file mode 100644
index 000000000..f774e6051
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/dialog/dialog.tsx
@@ -0,0 +1,188 @@
+import type { JSX } from "react";
+import type { ClassNameWithState, SlotComponent, StyleWithState } from "../type.js";
+import { DialogRoot } from "./dialog-root.js";
+import { DialogTrigger } from "./dialog-trigger.js";
+import { DialogContent } from "./dialog-content.js";
+import { DialogTitle } from "./dialog-title.js";
+import { DialogDescription } from "./dialog-description.js";
+import { DialogClose } from "./dialog-close.js";
+
+export const Dialog = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose,
+};
+
+export namespace Dialog {
+  export interface State {
+    readonly open: boolean;
+    readonly modal: boolean;
+  }
+
+  export type Props = {
+    /**
+     * The controlled open state of the dialog.
+     */
+    readonly open?: boolean;
+
+    /**
+     * The default open state when uncontrolled.
+     *
+     * @default false
+     */
+    readonly defaultOpen?: boolean;
+
+    /**
+     * Whether the dialog is modal. Modal dialogs use `showModal()` and trap focus.
+     * Non-modal dialogs use `show()`.
+     *
+     * @default true
+     */
+    readonly modal?: boolean;
+
+    /**
+     * Whether the dialog can be dismissed by clicking the backdrop.
+     * Escape always closes the dialog regardless of this setting.
+     *
+     * @default true
+     */
+    readonly dismissible?: boolean;
+
+    /**
+     * Event handler called when the dialog open state changes.
+     */
+    readonly onOpenChange?: (open: boolean) => void;
+
+    readonly children?: React.ReactNode;
+  };
+
+  export namespace Trigger {
+    export type Props = JSX.IntrinsicElements["button"] & {
+      /**
+       * Inline styles applied to the trigger element, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the trigger element, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the dialog trigger.
+       *
+       * @default <button />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Content {
+    export type Props = Omit<JSX.IntrinsicElements["dialog"], "className" | "style"> & {
+      /**
+       * Whether to keep the content mounted in the DOM when the dialog is closed.
+       *
+       * @default false
+       */
+      readonly keepMounted?: boolean;
+
+      /**
+       * Event handler called when the open or close animation has fully completed.
+       */
+      readonly onOpenChangeComplete?: (open: boolean) => void;
+
+      /**
+       * Inline styles applied to the content element, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the content element, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the dialog content.
+       *
+       * @default <dialog />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Title {
+    export type Props = JSX.IntrinsicElements["h2"] & {
+      /**
+       * Inline styles applied to the title element, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the title element, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the dialog title.
+       *
+       * @default <h2 />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Description {
+    export type Props = JSX.IntrinsicElements["p"] & {
+      /**
+       * Inline styles applied to the description element, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the description element, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the dialog description.
+       *
+       * @default <p />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+
+  export namespace Close {
+    export type Props = JSX.IntrinsicElements["button"] & {
+      /**
+       * Inline styles applied to the close element, or a function that returns inline styles
+       * based on the dialog's state.
+       */
+      readonly style?: StyleWithState<State>;
+
+      /**
+       * CSS classes applied to the close element, or a function that returns classes based
+       * on the dialog's state.
+       */
+      readonly className?: ClassNameWithState<State>;
+
+      /**
+       * Override the default element that is rendered by the dialog close button.
+       *
+       * @default <button />
+       */
+      readonly render?: SlotComponent<State>;
+    };
+  }
+}
diff --git a/packages/lytenyte-ui-react/src/direction-provider/direction-provider.tsx b/packages/lytenyte-ui-react/src/direction-provider/direction-provider.tsx
new file mode 100644
index 000000000..953a04d11
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/direction-provider/direction-provider.tsx
@@ -0,0 +1,5 @@
+import { createContext, useContext } from "react";
+
+const context = createContext<"ltr" | "rtl">("ltr");
+export const useDirection = () => useContext(context);
+export const DirectionProvider = context.Provider;
diff --git a/packages/lytenyte-ui-react/src/hooks/merge-props.ts b/packages/lytenyte-ui-react/src/hooks/merge-props.ts
new file mode 100644
index 000000000..e3b438e8c
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/merge-props.ts
@@ -0,0 +1,22 @@
+export function mergeProps(slotProps: Record<string, any>, childProps: Record<string, any>) {
+  const finalProps = { ...childProps };
+
+  for (const key in childProps) {
+    const slotProp = slotProps[key];
+    const childProp = childProps[key];
+    const isHandler = /^on[A-Z1-9]/.test(key);
+
+    if (isHandler && slotProp && childProp) {
+      finalProps[key] = (...args: unknown[]) => {
+        const result = childProp(...args);
+        slotProp(...args);
+        return result;
+      };
+    }
+
+    if (key === "style") finalProps[key] = { ...slotProp, ...childProp };
+    if (key === "className") finalProps[key] = [slotProp, childProp].filter(Boolean).join(" ");
+  }
+
+  return { ...slotProps, ...finalProps };
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-class-name.ts b/packages/lytenyte-ui-react/src/hooks/use-class-name.ts
new file mode 100644
index 000000000..e7d8b49b0
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-class-name.ts
@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+import type { ClassNameWithState } from "../type.js";
+
+export function useClassName<T>(cls: ClassNameWithState<T> | undefined, state: T) {
+  return useMemo(() => (typeof cls === "function" ? cls(state) : cls), [cls, state]);
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-combined-ref.ts b/packages/lytenyte-ui-react/src/hooks/use-combined-ref.ts
new file mode 100644
index 000000000..8045fcf57
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-combined-ref.ts
@@ -0,0 +1,16 @@
+import type { Ref } from "react";
+import { useCallback } from "react";
+
+export function useCombinedRefs<T>(...refs: (Ref<any> | null | undefined)[]): React.RefCallback<T> {
+  const combinedRef = useCallback((element: T | null) => {
+    for (let i = 0; i < refs.length; i++) {
+      const r = refs[i];
+      if (!r) continue;
+      if (typeof r === "function") r(element);
+      else r.current = element;
+    }
+    // eslint-disable-next-line react-hooks/use-memo, react-hooks/exhaustive-deps
+  }, refs);
+
+  return combinedRef;
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-controlled.ts b/packages/lytenyte-ui-react/src/hooks/use-controlled.ts
new file mode 100644
index 000000000..79701b282
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-controlled.ts
@@ -0,0 +1,25 @@
+import { useCallback, useRef, useState, type SetStateAction } from "react";
+
+export interface UseControlledProps<T = unknown> {
+  controlled: T | undefined;
+  default: T | undefined;
+}
+
+export function useControlled<T = unknown>({
+  controlled,
+  default: defaultProp,
+}: UseControlledProps<T>): [T, (newValue: T | ((prevValue: T) => T)) => void] {
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  const { current: isControlled } = useRef(controlled !== undefined);
+  const [valueState, setValue] = useState(defaultProp);
+  const value = isControlled ? controlled : valueState;
+
+  const setValueIfUncontrolled = useCallback((newValue: SetStateAction<T>) => {
+    if (!isControlled) {
+      setValue(newValue as T);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return [value as T, setValueIfUncontrolled];
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-event.ts b/packages/lytenyte-ui-react/src/hooks/use-event.ts
new file mode 100644
index 000000000..ed6cdc2c7
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-event.ts
@@ -0,0 +1,27 @@
+import React from "react";
+
+type AnyFunction = (...args: any[]) => any;
+
+const useInsertionEffect =
+  typeof window !== "undefined" ? React.useInsertionEffect || React.useLayoutEffect : () => {};
+
+export function useEvent<TCallback extends AnyFunction>(callback: TCallback): TCallback {
+  const latestRef = React.useRef<TCallback>(doNotInvokeInRender as any);
+  useInsertionEffect(() => {
+    latestRef.current = callback;
+  }, [callback]);
+
+  const stableRef = React.useRef<TCallback>(null as any);
+  if (!stableRef.current) {
+    stableRef.current = function (this: any) {
+      // eslint-disable-next-line prefer-rest-params
+      return latestRef.current.apply(this, arguments as any);
+    } as TCallback;
+  }
+
+  return stableRef.current;
+}
+
+function doNotInvokeInRender() {
+  throw new Error("Don't invoke an event function in render.");
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-iso-effect.ts b/packages/lytenyte-ui-react/src/hooks/use-iso-effect.ts
new file mode 100644
index 000000000..0967b6aed
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-iso-effect.ts
@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from "react";
+
+export const useIsoEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
diff --git a/packages/lytenyte-ui-react/src/hooks/use-slot.ts b/packages/lytenyte-ui-react/src/hooks/use-slot.ts
new file mode 100644
index 000000000..e723869a0
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-slot.ts
@@ -0,0 +1,26 @@
+import type { ReactElement, Ref } from "react";
+import { cloneElement } from "react";
+import { mergeProps } from "./merge-props.js";
+import { useCombinedRefs } from "./use-combined-ref.js";
+
+interface UseSlotProps<T = any> {
+  readonly slot: ReactElement | ((...args: any) => ReactElement);
+  readonly props?: Record<string, any>[];
+  readonly ref?: Ref<any>;
+  readonly state?: T;
+}
+
+export function useSlot<T = any>({ props, slot, state, ref: forwardedRef }: UseSlotProps<T>) {
+  const el = typeof slot === "function" ? slot(state) : slot;
+
+  let merged = {};
+  if (props) for (let i = 0; i < props?.length; i++) merged = mergeProps(merged, props[i]);
+
+  const ref = (el.props as { ref?: React.Ref<unknown> }).ref || (el as any).ref;
+  const mergedProps = mergeProps(merged, el.props as any);
+  const mergedRefs = useCombinedRefs(forwardedRef, ref);
+
+  if (ref || forwardedRef) mergedProps.ref = mergedRefs;
+
+  return cloneElement(el, mergedProps);
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-style.ts b/packages/lytenyte-ui-react/src/hooks/use-style.ts
new file mode 100644
index 000000000..67deebfc4
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-style.ts
@@ -0,0 +1,6 @@
+import { useMemo } from "react";
+import type { StyleWithState } from "../type.js";
+
+export function useStyle<T>(style: StyleWithState<T> | undefined, state: T) {
+  return useMemo(() => (typeof style === "function" ? style(state) : style), [style, state]);
+}
diff --git a/packages/lytenyte-ui-react/src/hooks/use-transition-status.ts b/packages/lytenyte-ui-react/src/hooks/use-transition-status.ts
new file mode 100644
index 000000000..35ca255a9
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/hooks/use-transition-status.ts
@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useEvent } from "./use-event.js";
+import { DATA_STATUS } from "../constants.js";
+
+export type TransitionStatus = "idle" | "start" | "opening" | "closing" | "closed";
+
+export type OnStatusChange = (next: TransitionStatus, prev: TransitionStatus, element: HTMLElement) => void;
+
+export function useTransitionedOpen(open: boolean, onStatusChange?: OnStatusChange) {
+  const [mounted, setMount] = useState(open);
+  const statusRef = useRef<TransitionStatus>("idle");
+  const elementRef = useRef<HTMLElement | null>(null);
+  const onStatusChangeRef = useRef(onStatusChange);
+
+  onStatusChangeRef.current = onStatusChange;
+
+  const transition = useEvent((next: TransitionStatus) => {
+    const prev = statusRef.current;
+    if (prev === next) return;
+
+    const el = elementRef.current;
+    if (el) {
+      el.setAttribute(DATA_STATUS, next);
+      onStatusChangeRef.current?.(next, prev, el);
+    }
+
+    statusRef.current = next;
+  });
+
+  const ref = useCallback((node: HTMLElement | null) => {
+    elementRef.current = node;
+    if (node) {
+      const status = statusRef.current;
+      if (status !== "idle") {
+        onStatusChangeRef.current?.(status, "idle", node);
+      }
+      node.setAttribute(DATA_STATUS, status);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open && !mounted) {
+      transition("start");
+      setMount(true);
+      return;
+    }
+
+    const el = elementRef.current;
+    if (!el) return;
+
+    let rafId: number;
+    let cancelled = false;
+
+    // Waits one animation frame so the browser can run style recalculation,
+    // then checks for active CSS transitions/animations on the element.
+    // If any exist, waits for them to finish before calling onComplete.
+    const waitForAnimations = (onComplete: () => void) => {
+      rafId = requestAnimationFrame(() => {
+        if (cancelled) return;
+        const animations = el.getAnimations();
+
+        if (animations.length === 0) {
+          onComplete();
+          return;
+        }
+
+        Promise.allSettled(animations.map((a) => a.finished)).then(() => {
+          if (!cancelled) onComplete();
+        });
+      });
+    };
+
+    if (open) {
+      // Interrupted close — skip "start", go directly to "opening"
+      // so the CSS transition reverses smoothly from the current height.
+      if (statusRef.current === "closing" || statusRef.current === "closed") {
+        el.style.height = "";
+        transition("opening");
+      }
+
+      // Fresh mount — the browser has painted "start" (height: 0) by the
+      // time this effect runs (useEffect fires after paint), so transitioning
+      // to "opening" creates a CSS transition from 0 → var(--panel-height).
+      if (statusRef.current === "start") {
+        transition("opening");
+      }
+
+      if (statusRef.current === "opening") {
+        // Double rAF: the first crosses the current frame boundary so the
+        // browser runs style recalculation and creates any pending CSS
+        // transitions. The second (inside waitForAnimations) queries them.
+        rafId = requestAnimationFrame(() => {
+          if (cancelled) return;
+          waitForAnimations(() => transition("idle"));
+        });
+      }
+    } else if (!open && mounted) {
+      if (statusRef.current !== "closing") {
+        // Capture the current rendered height BEFORE transition("closing")
+        // sets data-status="closing", which applies CSS height: 0.
+        const currentHeight = el.getBoundingClientRect().height;
+        el.style.height = `${currentHeight}px`;
+        transition("closing");
+      }
+
+      // Frame 1: remove the inline height override so the CSS transition
+      // from the concrete height to 0 begins.
+      // Frame 2 (inside waitForAnimations): the browser has run style
+      // recalculation between frames, so getAnimations() picks up the
+      // running transition and we wait for it to finish before unmounting.
+      rafId = requestAnimationFrame(() => {
+        if (cancelled) return;
+        el.style.height = "";
+        waitForAnimations(() => {
+          transition("closed");
+          setMount(false);
+        });
+      });
+    }
+
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(rafId);
+    };
+  }, [mounted, open, transition]);
+
+  return { mounted, ref };
+}
diff --git a/packages/lytenyte-ui-react/src/index.ts b/packages/lytenyte-ui-react/src/index.ts
new file mode 100644
index 000000000..fa2aa3b02
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/index.ts
@@ -0,0 +1,4 @@
+export { Accordion } from "./accordion/accordion.js";
+export { AlertDialog } from "./alert-dialog/alert-dialog.js";
+export { Dialog } from "./dialog/dialog.js";
+export { DirectionProvider, useDirection } from "./direction-provider/direction-provider.js";
diff --git a/packages/lytenyte-ui-react/src/type.ts b/packages/lytenyte-ui-react/src/type.ts
new file mode 100644
index 000000000..e6c00bcd4
--- /dev/null
+++ b/packages/lytenyte-ui-react/src/type.ts
@@ -0,0 +1,8 @@
+import type { CSSProperties, ReactElement } from "react";
+
+export type SlotComponent<State = object> = ReactElement | ((state: State) => ReactElement);
+
+export type ClassNameWithState<State = object> = string | ((state: State) => string | null | undefined);
+export type StyleWithState<State = object> =
+  | CSSProperties
+  | ((state: State) => CSSProperties | null | undefined);
diff --git a/packages/lytenyte-ui-react/tsconfig.json b/packages/lytenyte-ui-react/tsconfig.json
new file mode 100644
index 000000000..f987afed2
--- /dev/null
+++ b/packages/lytenyte-ui-react/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Enable latest features
+    "lib": ["ESNext", "DOM"],
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false,
+    "types": ["vitest/importMeta"]
+  },
+  "exclude": ["**/__tests__/**", "**/*.stories*", "**/*.spec*", "**/*.test*"],
+  "include": ["src"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c28dc9d8f..98aa929b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -866,6 +866,18 @@ importers:
 
   packages/lytenyte-shared: {}
 
+  packages/lytenyte-ui-react:
+    dependencies:
+      '@1771technologies/lytenyte-design':
+        specifier: workspace:*
+        version: link:../lytenyte-design
+      react:
+        specifier: 19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: 19.2.4
+        version: 19.2.4(react@19.2.4)
+
   packages/sample-data:
     devDependencies:
       csv-parser: