huntabyte · huntabyte · Mar 7, 2026 · Mar 7, 2026 · Mar 8, 2026
diff --git a/.changeset/crazy-vans-follow.md b/.changeset/crazy-vans-follow.md
@@ -0,0 +1,5 @@
+---
+"bits-ui": minor
+---
+
+feat: support CSS transitions
diff --git a/docs/content/styling.md b/docs/content/styling.md
@@ -224,6 +224,30 @@ Here's an example styling an accordion with different states:
 
 ## Advanced Styling Techniques
 
+### CSS Transitions on Mount-Managed Surfaces
+
+Components that manage their mount lifecycle for animations expose transient
+`data-starting-style` and `data-ending-style` attributes on their animated
+surfaces. This is useful for popup content, overlays, and similar parts where
+you want enter and exit transitions without losing the close animation during
+unmount.
+
+```css
+[data-popover-content] {
+  opacity: 1;
+  transform: scale(1);
+  transition:
+    opacity 150ms ease,
+    transform 150ms ease;
+}
+
+[data-popover-content][data-starting-style],
+[data-popover-content][data-ending-style] {
+  opacity: 0;
+  transform: scale(0.96);
+}
+```
+
 ### Combining Data Attributes with CSS Variables
 
 You can combine data attributes with CSS variables to create dynamic styles based on component state. Here's how to animate the accordion content using the `--bits-accordion-content-height` variable and the `data-state` attribute:

diff --git a/docs/src/lib/content/api-reference/accordion.api.ts b/docs/src/lib/content/api-reference/accordion.api.ts
@@ -5,7 +5,13 @@ import type {
 	AccordionRootPropsWithoutHTML,
 	AccordionTriggerPropsWithoutHTML,
 } from "bits-ui";
-import { disabledDataAttr, forceMountProp, orientationDataAttr, withChildProps } from "./shared.js";
+import {
+	disabledDataAttr,
+	forceMountProp,
+	orientationDataAttr,
+	transitionStyleDataAttrs,
+	withChildProps,
+} from "./shared.js";
 import {
 	HeaderLevelProp,
 	OnChangeStringOrArrayProp,
@@ -150,6 +156,7 @@ const content = defineComponentApiSchema<AccordionContentPropsWithoutHTML>({
 	dataAttributes: [
 		orientationDataAttr,
 		disabledDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "accordion-content",
 			description: "Present on the content element.",

diff --git a/docs/src/lib/content/api-reference/alert-dialog.api.ts b/docs/src/lib/content/api-reference/alert-dialog.api.ts
@@ -27,6 +27,7 @@ import {
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
 	restoreScrollDelayProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -104,6 +105,7 @@ const content = defineComponentApiSchema<AlertDialogContentPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "alert-dialog-content",
 			description: "Present on the content element.",
@@ -177,6 +179,7 @@ const overlay = defineComponentApiSchema<AlertDialogOverlayPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "alert-dialog-overlay",
 			description: "Present on the overlay element.",

diff --git a/docs/src/lib/content/api-reference/collapsible.api.ts b/docs/src/lib/content/api-reference/collapsible.api.ts
@@ -7,6 +7,7 @@ import {
 	forceMountProp,
 	onOpenChangeCompleteProp,
 	onOpenChangeProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import { CollapsibleContentChildSnippetProps } from "./extended-types/collapsible/index.js";
@@ -111,6 +112,7 @@ export const content = defineComponentApiSchema<CollapsibleContentPropsWithoutHT
 			name: "disabled",
 			description: "Present when the collapsible is disabled.",
 		}),
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "collapsible-content",
 			description: "Present on the content element.",

diff --git a/docs/src/lib/content/api-reference/combobox.api.ts b/docs/src/lib/content/api-reference/combobox.api.ts
@@ -39,6 +39,7 @@ import {
 	portalProps,
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -163,6 +164,7 @@ export const content = defineComponentApiSchema<ComboboxContentPropsWithoutHTML>
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "combobox-content",
 			description: "Present on the content element.",
@@ -194,6 +196,7 @@ export const contentStatic = defineComponentApiSchema<ComboboxContentStaticProps
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "combobox-content",
 			description: "Present on the content element.",

diff --git a/docs/src/lib/content/api-reference/dialog.api.ts b/docs/src/lib/content/api-reference/dialog.api.ts
@@ -21,6 +21,7 @@ import {
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
 	restoreScrollDelayProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import { HeaderLevelProp, OpenClosedProp } from "./extended-types/shared/index.js";
@@ -110,6 +111,7 @@ export const content = defineComponentApiSchema<DialogContentPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "dialog-content",
 			description: "Present on the content.",
@@ -175,6 +177,7 @@ export const overlay = defineComponentApiSchema<DialogOverlayPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "dialog-overlay",
 			description: "Present on the overlay.",

diff --git a/docs/src/lib/content/api-reference/link-preview.api.ts b/docs/src/lib/content/api-reference/link-preview.api.ts
@@ -20,6 +20,7 @@ import {
 	onOpenChangeCompleteProp,
 	onOpenChangeProp,
 	portalProps,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -98,6 +99,7 @@ export const content = defineComponentApiSchema<LinkPreviewContentPropsWithoutHT
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "link-preview-content",
 			description: "Present on the content element.",
@@ -120,6 +122,7 @@ export const contentStatic = defineComponentApiSchema<LinkPreviewContentStaticPr
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "link-preview-content",
 			description: "Present on the content element.",

diff --git a/docs/src/lib/content/api-reference/menu.api.ts b/docs/src/lib/content/api-reference/menu.api.ts
@@ -40,6 +40,7 @@ import {
 	preventScrollProp,
 	radioGroupItemChildDefinition,
 	radioGroupItemChildrenDefinition,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import {
@@ -282,7 +283,7 @@ type DataAttrs = ComponentAPISchema["dataAttributes"];
 
 const triggerAttrs: DataAttrs = [STATE];
 
-const contentAttrs: DataAttrs = [STATE];
+const contentAttrs: DataAttrs = [STATE, ...transitionStyleDataAttrs];
 
 const arrowAttrs: DataAttrs = [STATE];
 
@@ -340,7 +341,7 @@ const separatorAttrs: DataAttrs = [
 	}),
 ];
 
-const subContentAttrs: DataAttrs = [STATE];
+const subContentAttrs: DataAttrs = [STATE, ...transitionStyleDataAttrs];
 
 const subTriggerAttrs: DataAttrs = [...sharedItemAttrs, STATE];
 

diff --git a/docs/src/lib/content/api-reference/navigation-menu.api.ts b/docs/src/lib/content/api-reference/navigation-menu.api.ts
@@ -14,6 +14,7 @@ import {
 	dismissibleLayerProps,
 	escapeLayerProps,
 	forceMountProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "./shared.js";
 import {
@@ -27,6 +28,7 @@ import {
 	defineEnumProp,
 	defineFunctionProp,
 	defineNumberProp,
+	defineSimpleDataAttr,
 	defineStringProp,
 } from "../utils.js";
 
@@ -133,6 +135,13 @@ export const content = defineComponentApiSchema<NavigationMenuContentPropsWithou
 		forceMount: forceMountProp,
 		...withChildProps({ elType: "HTMLDivElement" }),
 	},
+	dataAttributes: [
+		...transitionStyleDataAttrs,
+		defineSimpleDataAttr({
+			name: "navigation-menu-content",
+			description: "Present on the content element.",
+		}),
+	],
 });
 
 export const link = defineComponentApiSchema<NavigationMenuLinkPropsWithoutHTML>({
@@ -160,6 +169,13 @@ export const indicator = defineComponentApiSchema<NavigationMenuIndicatorPropsWi
 		forceMount: forceMountProp,
 		...withChildProps({ elType: "HTMLSpanElement" }),
 	},
+	dataAttributes: [
+		...transitionStyleDataAttrs,
+		defineSimpleDataAttr({
+			name: "navigation-menu-indicator",
+			description: "Present on the indicator element.",
+		}),
+	],
 });
 
 export const viewport = defineComponentApiSchema<NavigationMenuViewportPropsWithoutHTML>({
@@ -170,6 +186,13 @@ export const viewport = defineComponentApiSchema<NavigationMenuViewportPropsWith
 		forceMount: forceMountProp,
 		...withChildProps({ elType: "HTMLDivElement" }),
 	},
+	dataAttributes: [
+		...transitionStyleDataAttrs,
+		defineSimpleDataAttr({
+			name: "navigation-menu-viewport",
+			description: "Present on the viewport element.",
+		}),
+	],
 });
 
 export const navigationMenu = [root, sub, list, item, trigger, content, link, viewport, indicator];
diff --git a/docs/src/lib/content/api-reference/popover.api.ts b/docs/src/lib/content/api-reference/popover.api.ts
@@ -28,6 +28,7 @@ import {
 	portalProps,
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import {
@@ -111,6 +112,7 @@ export const content = defineComponentApiSchema<PopoverContentPropsWithoutHTML>(
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "popover-content",
 			description: "Present on the content element.",
@@ -141,6 +143,7 @@ export const contentStatic = defineComponentApiSchema<PopoverContentStaticPropsW
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "popover-content",
 			description: "Present on the content element.",
@@ -198,6 +201,7 @@ export const overlay = defineComponentApiSchema<PopoverOverlayPropsWithoutHTML>(
 			description: "Present on the overlay element.",
 		}),
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 	],
 });
 

diff --git a/docs/src/lib/content/api-reference/select.api.ts b/docs/src/lib/content/api-reference/select.api.ts
@@ -16,6 +16,7 @@ import {
 	portalProps,
 	preventOverflowTextSelectionProp,
 	preventScrollProp,
+	transitionStyleDataAttrs,
 	typeSingleOrMultipleProp,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
@@ -153,6 +154,7 @@ export const content = defineComponentApiSchema<SelectContentPropsWithoutHTML>({
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "select-content",
 			description: "Present on the content element.",
@@ -184,6 +186,7 @@ export const contentStatic = defineComponentApiSchema<SelectContentStaticPropsWi
 	},
 	dataAttributes: [
 		stateDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "select-content",
 			description: "Present on the content element.",

diff --git a/docs/src/lib/content/api-reference/shared.ts b/docs/src/lib/content/api-reference/shared.ts
@@ -404,6 +404,20 @@ export const disabledDataAttr = defineSimpleDataAttr({
 	description: "Present when the component is disabled.",
 });
 
+export const startingStyleDataAttr = defineSimpleDataAttr({
+	name: "starting-style",
+	description:
+		"Present during the initial open frame. Use this to define the starting styles for CSS transitions.",
+});
+
+export const endingStyleDataAttr = defineSimpleDataAttr({
+	name: "ending-style",
+	description:
+		"Present while closing before unmount. Use this to define the ending styles for CSS transitions.",
+});
+
+export const transitionStyleDataAttrs = [startingStyleDataAttr, endingStyleDataAttr] as const;
+
 export const valueDateRangeProp = defineComponentPropSchema({
 	type: "DateRange",
 	definition: DateRangeProp,

diff --git a/docs/src/lib/content/api-reference/tooltip.api.ts b/docs/src/lib/content/api-reference/tooltip.api.ts
@@ -23,6 +23,7 @@ import {
 	openChildDefinition,
 	openProp,
 	portalProps,
+	transitionStyleDataAttrs,
 	withChildProps,
 } from "$lib/content/api-reference/shared.js";
 import { TooltipStateDataAttr } from "./extended-types/tooltip/index.js";
@@ -170,6 +171,7 @@ export const content = defineComponentApiSchema<TooltipContentPropsWithoutHTML>(
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "tooltip-content",
 			description: "Present on the tooltip content element.",
@@ -194,6 +196,7 @@ export const contentStatic = defineComponentApiSchema<TooltipContentStaticPropsW
 	},
 	dataAttributes: [
 		openClosedDataAttr,
+		...transitionStyleDataAttrs,
 		defineSimpleDataAttr({
 			name: "tooltip-content",
 			description: "Present on the tooltip content element.",

diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts
@@ -13,7 +13,12 @@ import type {
 	RefAttachment,
 	WithRefOpts,
 } from "$lib/internal/types.js";
-import { boolToStr, boolToEmptyStrOrUndef, getDataOpenClosed } from "$lib/internal/attrs.js";
+import {
+	boolToStr,
+	boolToEmptyStrOrUndef,
+	getDataOpenClosed,
+	getDataTransitionAttrs,
+} from "$lib/internal/attrs.js";
 import { kbd } from "$lib/internal/kbd.js";
 import type { Orientation } from "$lib/shared/index.js";
 import { createBitsAttrs } from "$lib/internal/attrs.js";
@@ -375,6 +380,7 @@ export class AccordionContentState {
 			({
 				id: this.opts.id.current,
 				"data-state": getDataOpenClosed(this.item.isActive),
+				...getDataTransitionAttrs(this.item.contentPresence.transitionStatus),
 				"data-disabled": boolToEmptyStrOrUndef(this.item.isDisabled),
 				"data-orientation": this.item.root.opts.orientation.current,
 				[accordionAttrs.content]: "",

diff --git a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts
@@ -11,6 +11,7 @@ import {
 	boolToStr,
 	boolToEmptyStrOrUndef,
 	getDataOpenClosed,
+	getDataTransitionAttrs,
 } from "$lib/internal/attrs.js";
 import { kbd } from "$lib/internal/kbd.js";
 import type {
@@ -202,6 +203,7 @@ export class CollapsibleContentState {
 						? "until-found"
 						: undefined,
 				"data-state": getDataOpenClosed(this.root.opts.open.current),
+				...getDataTransitionAttrs(this.root.contentPresence.transitionStatus),
 				"data-disabled": boolToEmptyStrOrUndef(this.root.opts.disabled.current),
 				[collapsibleAttrs.content]: "",
 				...(this.opts.hiddenUntilFound.current && !this.shouldRender