diff --git a/apps/docs/utils/TldrawApiModel.ts b/apps/docs/utils/TldrawApiModel.ts
index 222680ce3385..c0e6271446c7 100644
--- a/apps/docs/utils/TldrawApiModel.ts
+++ b/apps/docs/utils/TldrawApiModel.ts
@@ -131,6 +131,21 @@ export class TldrawApiModel extends ApiModel {
 				return this.resolveToken(component, tokens[2])
 			}
 
+			if (
+				tokens.length === 9 &&
+				tokens[0].text === 'import("react").' &&
+				tokens[1].text === 'ForwardRefExoticComponent' &&
+				tokens[2].text === '<' &&
+				tokens[3].kind === ExcerptTokenKind.Reference &&
+				tokens[4].text === ' & import("react").' &&
+				tokens[5].text === 'RefAttributes' &&
+				tokens[6].text === '<' &&
+				tokens[7].kind === ExcerptTokenKind.Reference &&
+				tokens[8].text === '>>'
+			) {
+				return this.resolveToken(component, tokens[3])
+			}
+
 			if (component.variableTypeExcerpt.text === 'import("react").NamedExoticComponent<object>') {
 				// this is a `memo` component with no props
 				return null
diff --git a/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.css b/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.css
index f511639a6fc2..68e2386e68a1 100644
--- a/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.css
+++ b/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.css
@@ -1,4 +1,4 @@
-.tlui-buttons__horizontal select {
+.rich-text-font-extension-select {
 	border: 0;
 	background: transparent;
 	margin: 0 8px;
diff --git a/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.tsx b/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.tsx
index e4183d36907e..b0295dfca467 100644
--- a/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.tsx
+++ b/apps/examples/src/examples/rich-text-font-extensions/RichTextFontExtension.tsx
@@ -72,6 +72,7 @@ const components: TLComponents = {
 		return (
 			<DefaultRichTextToolbar>
 				<select
+					className="rich-text-font-extension-select"
 					value={currentFontFamily}
 					onPointerDown={stopEventPropagation}
 					onChange={(e) => {
@@ -85,6 +86,7 @@ const components: TLComponents = {
 					))}
 				</select>
 				<select
+					className="rich-text-font-extension-select"
 					value={currentFontSize}
 					onPointerDown={stopEventPropagation}
 					onChange={(e) => {
diff --git a/packages/tldraw/api-report.api.md b/packages/tldraw/api-report.api.md
index bcb1381589f9..67176df6a5e7 100644
--- a/packages/tldraw/api-report.api.md
+++ b/packages/tldraw/api-report.api.md
@@ -19,11 +19,13 @@ import { CSSProperties } from 'react';
 import { Editor } from '@tldraw/editor';
 import { Extension } from '@tiptap/core';
 import { Extensions } from '@tiptap/core';
+import { ForwardRefExoticComponent } from 'react';
 import { Geometry2d } from '@tldraw/editor';
 import { Geometry2dFilters } from '@tldraw/editor';
 import { Geometry2dOptions } from '@tldraw/editor';
 import { Group2d } from '@tldraw/editor';
 import { HandleSnapGeometry } from '@tldraw/editor';
+import { HTMLAttributes } from 'react';
 import { IndexKey } from '@tldraw/editor';
 import { JsonObject } from '@tldraw/editor';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -43,6 +45,7 @@ import { ReadonlySharedStyleMap } from '@tldraw/editor';
 import { RecordProps } from '@tldraw/editor';
 import { Rectangle2d } from '@tldraw/editor';
 import { RecursivePartial } from '@tldraw/editor';
+import { RefAttributes } from 'react';
 import { RefObject } from 'react';
 import { Result } from '@tldraw/editor';
 import { RichTextFontVisitorState } from '@tldraw/editor';
@@ -3027,6 +3030,9 @@ export function TldrawUiDropdownMenuTrigger({ children, ...rest }: TLUiDropdownM
 // @public (undocumented)
 export function TldrawUiEventsProvider({ onEvent, children }: EventsProviderProps): JSX_2.Element;
 
+// @public
+export const TldrawUiGrid: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
+
 // @public (undocumented)
 export const TldrawUiIcon: NamedExoticComponent<TLUiIconProps>;
 
@@ -3061,7 +3067,7 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({ id, d
 export function TldrawUiMenuToolItem({ toolId, ...rest }: TLUiMenuToolItemProps): JSX_2.Element | null;
 
 // @public (undocumented)
-export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps): JSX_2.Element;
+export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps): JSX_2.Element;
 
 // @public (undocumented)
 export function TldrawUiPopoverContent({ side, children, align, sideOffset, alignOffset, disableEscapeKeyDown, autoFocusFirstButton, }: TLUiPopoverContentProps): JSX_2.Element;
@@ -3078,6 +3084,9 @@ export interface TldrawUiProps extends TLUiContextProviderProps {
     renderDebugMenuItems?(): React_3.ReactNode;
 }
 
+// @public
+export const TldrawUiRow: ForwardRefExoticComponent<TLUiLayoutProps & RefAttributes<HTMLDivElement>>;
+
 // @public (undocumented)
 export const TldrawUiSlider: React_3.ForwardRefExoticComponent<TLUiSliderProps & React_3.RefAttributes<HTMLDivElement>>;
 
@@ -3970,6 +3979,14 @@ export type TLUiKeyboardShortcutsDialogProps = TLUiDialogProps & {
     children?: ReactNode;
 };
 
+// @public (undocumented)
+export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    // (undocumented)
+    asChild?: boolean;
+    // (undocumented)
+    children: ReactNode;
+}
+
 // @public (undocumented)
 export interface TLUiMainMenuProps {
     // (undocumented)
@@ -4113,6 +4130,8 @@ export interface TLUiPopoverProps {
     // (undocumented)
     children: React_3.ReactNode;
     // (undocumented)
+    className?: string;
+    // (undocumented)
     id: string;
     // (undocumented)
     onOpenChange?(isOpen: boolean): void;
@@ -4256,6 +4275,8 @@ export interface TLUiToolbarProps extends React_3.HTMLAttributes<HTMLDivElement>
     dir?: 'ltr' | 'rtl';
     // (undocumented)
     label: string;
+    // (undocumented)
+    orientation?: 'grid' | 'horizontal';
 }
 
 // @public (undocumented)
diff --git a/packages/tldraw/src/index.ts b/packages/tldraw/src/index.ts
index 41b8610cf253..1894a3670597 100644
--- a/packages/tldraw/src/index.ts
+++ b/packages/tldraw/src/index.ts
@@ -25,6 +25,11 @@ export { DefaultA11yAnnouncer, useSelectedShapesAnnouncer } from './lib/ui/compo
 export { AccessibilityMenu } from './lib/ui/components/AccessibilityMenu'
 export { ColorSchemeMenu } from './lib/ui/components/ColorSchemeMenu'
 export { DefaultDialogs } from './lib/ui/components/Dialogs'
+export {
+	TldrawUiGrid,
+	TldrawUiRow,
+	type TLUiLayoutProps,
+} from './lib/ui/components/primitives/layout'
 export {
 	TldrawUiMenuActionCheckboxItem,
 	type TLUiMenuActionCheckboxItemProps,
diff --git a/packages/tldraw/src/lib/ui.css b/packages/tldraw/src/lib/ui.css
index 107846f8445c..64c017aace9a 100644
--- a/packages/tldraw/src/lib/ui.css
+++ b/packages/tldraw/src/lib/ui.css
@@ -161,12 +161,6 @@
 	}
 }
 
-/* Panel button */
-
-.tlui-button__panel {
-	position: relative;
-}
-
 /* Menu button */
 
 .tlui-button__menu {
@@ -207,7 +201,7 @@
 
 /* Tool lock button */
 
-.tlui-toolbar__lock-button {
+.tlui-main-toolbar__lock-button {
 	position: absolute;
 	top: 4px;
 	right: 0px;
@@ -218,7 +212,7 @@
 	border-radius: var(--radius-2);
 }
 
-.tlui-toolbar__lock-button::after {
+.tlui-main-toolbar__lock-button::after {
 	top: 4px;
 	left: 8px;
 	inset: 4px;
@@ -230,16 +224,6 @@
 	position: relative;
 	height: 48px;
 	width: 48px;
-	margin-left: -2px;
-	margin-right: -2px;
-}
-
-.tlui-button__tool:nth-of-type(1) {
-	margin-left: 0px;
-}
-
-.tlui-button__tool:nth-last-of-type(1) {
-	margin-right: 0px;
 }
 
 .tlui-button__tool::after {
@@ -270,47 +254,30 @@
 	width: 16px;
 }
 
-/* Button Row */
+/* Row layout */
 
-.tlui-buttons__horizontal {
+.tlui-row {
 	display: flex;
 	flex-direction: row;
+	padding: 0 2px;
 }
-.tlui-buttons__horizontal > * {
+.tlui-row > * {
 	margin-left: -2px;
 	margin-right: -2px;
 }
-.tlui-buttons__horizontal > *:nth-child(1) {
-	margin-left: 0px;
-}
-.tlui-buttons__horizontal > *:nth-last-child(1) {
-	margin-right: 0px;
-}
 
-/* Button Grid */
+/* Grid layout */
 
-.tlui-buttons__grid {
+.tlui-grid {
 	display: grid;
-	grid-template-columns: repeat(4, auto);
+	grid-template-columns: repeat(4, 1fr);
 	grid-auto-flow: row;
 	overflow: hidden;
+	padding: 2px;
 }
-.tlui-buttons__grid > .tlui-button {
+.tlui-grid > * {
 	margin: -2px;
 }
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n),
-.tlui-buttons__vertical-align > .tlui-button:nth-of-type(3n) {
-	margin-right: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(4n - 3) {
-	margin-left: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-of-type(-n + 4) {
-	margin-top: 0px;
-}
-.tlui-buttons__grid > .tlui-button:nth-last-of-type(-n + 4) {
-	margin-bottom: 0px;
-}
 
 /* Zoom button */
 
@@ -1033,12 +1000,8 @@
 	border-bottom: 1px solid var(--color-divider);
 }
 
-.tlui-style-panel__row {
-	display: flex;
-}
-/* Only really used for the alignment picker */
-.tlui-style-panel__row__extra-button {
-	margin-left: -2px;
+.tlui-style-panel__dropdown-picker:only-child {
+	width: 100%;
 }
 
 .tlui-style-panel__double-select-picker {
@@ -1154,7 +1117,7 @@
 /* --------------------- Toolbar -------------------- */
 
 /* Wide container */
-.tlui-toolbar {
+.tlui-main-toolbar {
 	grid-column: 1 / span 3;
 	grid-row: 1;
 	display: flex;
@@ -1165,7 +1128,7 @@
 }
 
 /* Centered Content */
-.tlui-toolbar__inner {
+.tlui-main-toolbar__inner {
 	position: relative;
 	width: fit-content;
 	display: flex;
@@ -1173,12 +1136,12 @@
 	align-items: flex-end;
 }
 
-.tlui-toolbar__left {
+.tlui-main-toolbar__left {
 	width: fit-content;
 }
 
 /* Row of controls + lock button */
-.tlui-toolbar__extras {
+.tlui-main-toolbar__extras {
 	position: relative;
 	z-index: var(--layer-above);
 	width: 100%;
@@ -1187,11 +1150,11 @@
 	height: 48px;
 }
 
-.tlui-toolbar__extras:empty {
+.tlui-main-toolbar__extras:empty {
 	display: none;
 }
 
-.tlui-toolbar__extras__controls {
+.tlui-main-toolbar__extras__controls {
 	display: flex;
 	position: relative;
 	flex-direction: row;
@@ -1206,7 +1169,7 @@
 	width: fit-content;
 }
 
-.tlui-toolbar__tools {
+.tlui-main-toolbar__tools {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -1217,37 +1180,29 @@
 	background: var(--color-panel);
 	box-shadow: var(--shadow-2);
 }
-.tlui-toolbar__tools__list {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-}
 
-.tlui-toolbar__overflow {
+.tlui-main-toolbar__overflow {
 	width: 40px;
+	margin-left: 2px;
 }
 
-.tlui-layout__mobile .tlui-toolbar__overflow {
+.tlui-layout__mobile .tlui-main-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.tlui-toolbar *[data-state='open']::after {
+.tlui-main-toolbar *[data-state='open']::after {
 	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
 
 @media (hover: hover) {
-	.tlui-toolbar *[data-state='open']:not(:hover)::after {
+	.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
 		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
 }
 
-.tlui-layout__mobile .tlui-toolbar {
-	transition: transform 0.15s ease-out 0.05s;
-}
-
 /* ------------------- Tooltip -------------------- */
 
 .tlui-tooltip {
diff --git a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx
index 45d0b30f51ac..b80ab41a04c3 100644
--- a/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx
+++ b/packages/tldraw/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx
@@ -62,8 +62,9 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 				<TldrawUiToolbar
 					ref={ref}
 					label={msg('actions-menu.title')}
-					className="tlui-actions-menu tlui-buttons__grid"
+					className="tlui-actions-menu"
 					data-testid="actions-menu.content"
+					orientation="grid"
 				>
 					<TldrawUiMenuContextProvider type="icons" sourceId="actions-menu">
 						{content}
diff --git a/packages/tldraw/src/lib/ui/components/DefaultMenuPanel.tsx b/packages/tldraw/src/lib/ui/components/DefaultMenuPanel.tsx
index 0b3d10582683..2a3bc30685f5 100644
--- a/packages/tldraw/src/lib/ui/components/DefaultMenuPanel.tsx
+++ b/packages/tldraw/src/lib/ui/components/DefaultMenuPanel.tsx
@@ -5,6 +5,7 @@ import { useBreakpoint } from '../context/breakpoints'
 import { useTldrawUiComponents } from '../context/components'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TldrawUiToolbar } from './primitives/TldrawUiToolbar'
+import { TldrawUiRow } from './primitives/layout'
 
 /** @public @react */
 export const DefaultMenuPanel = memo(function MenuPanel() {
@@ -32,16 +33,16 @@ export const DefaultMenuPanel = memo(function MenuPanel() {
 
 	return (
 		<nav ref={ref} className="tlui-menu-zone">
-			<div className="tlui-buttons__horizontal">
+			<TldrawUiRow>
 				{MainMenu && <MainMenu />}
 				{PageMenu && !isSinglePageMode && <PageMenu />}
 				{showQuickActions ? (
-					<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('actions-menu.title')}>
+					<TldrawUiToolbar orientation="horizontal" label={msg('actions-menu.title')}>
 						{QuickActions && <QuickActions />}
 						{ActionsMenu && <ActionsMenu />}
 					</TldrawUiToolbar>
 				) : null}
-			</div>
+			</TldrawUiRow>
 		</nav>
 	)
 })
diff --git a/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx b/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx
index 99102b8d043e..2b7d6415c32b 100644
--- a/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx
+++ b/packages/tldraw/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx
@@ -33,7 +33,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 
 	return (
 		<div ref={ref} className="tlui-navigation-panel">
-			<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('navigation-zone.title')}>
+			<TldrawUiToolbar orientation="horizontal" label={msg('navigation-zone.title')}>
 				{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (
 					<ZoomMenu />
 				) : (
diff --git a/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx b/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx
index 48701f304d3d..b2e615d369eb 100644
--- a/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx
+++ b/packages/tldraw/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx
@@ -24,6 +24,7 @@ import {
 	TldrawUiPopoverContent,
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
+import { TldrawUiRow } from '../primitives/layout'
 import { PageItemInput } from './PageItemInput'
 import { PageItemSubmenu } from './PageItemSubmenu'
 import { onMovePage } from './edit-pages-shared'
@@ -329,7 +330,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 					<div className="tlui-page-menu__header">
 						<div className="tlui-page-menu__header__title">{msg('page-menu.title')}</div>
 						{!isReadonlyMode && (
-							<div className="tlui-buttons__horizontal">
+							<TldrawUiRow>
 								<TldrawUiButton
 									type="icon"
 									data-testid="page-menu.edit"
@@ -351,7 +352,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 								>
 									<TldrawUiButtonIcon icon="plus" />
 								</TldrawUiButton>
-							</div>
+							</TldrawUiRow>
 						)}
 					</div>
 					<div
diff --git a/packages/tldraw/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx b/packages/tldraw/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx
index f0e18091c9e1..e59654539040 100644
--- a/packages/tldraw/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx
+++ b/packages/tldraw/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
+import { TldrawUiRow } from '../primitives/layout'
 
 export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {
 	const editor = useEditor()
@@ -29,8 +30,8 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 	if (!presence) return null
 
 	return (
-		<div
-			className="tlui-people-menu__item tlui-buttons__horizontal"
+		<TldrawUiRow
+			className="tlui-people-menu__item"
 			data-follow={youAreFollowingThem || theyAreFollowingYou}
 		>
 			<TldrawUiButton
@@ -61,6 +62,6 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				/>
 			</TldrawUiButton>
-		</div>
+		</TldrawUiRow>
 	)
 })
diff --git a/packages/tldraw/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx b/packages/tldraw/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx
index b72226d552a6..b84964d609d6 100644
--- a/packages/tldraw/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx
+++ b/packages/tldraw/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx
@@ -5,6 +5,7 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
+import { TldrawUiGrid } from '../primitives/layout'
 
 export const UserPresenceColorPicker = track(function UserPresenceColorPicker() {
 	const editor = useEditor()
@@ -100,7 +101,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 					side="left"
 					sideOffset={8}
 				>
-					<div className={'tlui-buttons__grid'}>
+					<TldrawUiGrid>
 						{USER_COLORS.map((item: string) => (
 							<TldrawUiButton
 								type="icon"
@@ -110,7 +111,6 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								aria-label={item}
 								isActive={value === item}
 								title={item}
-								className={'tlui-button-grid__button'}
 								style={{ color: item }}
 								onPointerEnter={handleButtonPointerEnter}
 								onPointerDown={handleButtonPointerDown}
@@ -120,7 +120,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								<TldrawUiButtonIcon icon="color" />
 							</TldrawUiButton>
 						))}
-					</div>
+					</TldrawUiGrid>
 				</_Popover.Content>
 			</_Popover.Portal>
 		</_Popover.Root>
diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx
index 358a07bd1c1b..9e7dcce7a256 100644
--- a/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx
+++ b/packages/tldraw/src/lib/ui/components/StylePanel/DefaultStylePanelContent.tsx
@@ -139,7 +139,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 						{showUiLabels && (
 							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
 						)}
-						<TldrawUiToolbar label={msg('style-panel.color')}>
+						<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.color')}>
 							<TldrawUiButtonPicker
 								title={msg('style-panel.color')}
 								uiType="color"
@@ -162,7 +162,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.fill')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.fill')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.fill')}
 									uiType="fill"
@@ -181,7 +181,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.dash')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.dash')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.dash')}
 									uiType="dash"
@@ -200,7 +200,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.size')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.size')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.size')}
 									uiType="size"
@@ -249,7 +249,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 			{font === undefined ? null : (
 				<>
 					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.font')}>
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.font')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.font')}
 							uiType="font"
@@ -267,7 +267,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 			{textAlign === undefined ? null : (
 				<>
 					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.align')}
 							uiType="align"
@@ -278,16 +278,14 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							theme={theme}
 							onHistoryMark={onHistoryMark}
 						/>
-						<div className="tlui-style-panel__row__extra-button">
-							<TldrawUiToolbarButton
-								type="icon"
-								title={msg('style-panel.vertical-align')}
-								data-testid="vertical-align"
-								disabled
-							>
-								<TldrawUiButtonIcon icon="vertical-align-middle" />
-							</TldrawUiToolbarButton>
-						</div>
+						<TldrawUiToolbarButton
+							type="icon"
+							title={msg('style-panel.vertical-align')}
+							data-testid="vertical-align"
+							disabled
+						>
+							<TldrawUiButtonIcon icon="vertical-align-middle" />
+						</TldrawUiToolbarButton>
 					</TldrawUiToolbar>
 				</>
 			)}
@@ -297,7 +295,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 					{showUiLabels && (
 						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
 					)}
-					<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.label-align')}
 							uiType="align"
@@ -308,29 +306,27 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							theme={theme}
 							onHistoryMark={onHistoryMark}
 						/>
-						<div className="tlui-style-panel__row__extra-button">
-							{verticalLabelAlign === undefined ? (
-								<TldrawUiToolbarButton
-									type="icon"
-									title={msg('style-panel.vertical-align')}
-									data-testid="vertical-align"
-									disabled
-								>
-									<TldrawUiButtonIcon icon="vertical-align-middle" />
-								</TldrawUiToolbarButton>
-							) : (
-								<DropdownPicker
-									type="icon"
-									id="geo-vertical-alignment"
-									uiType="verticalAlign"
-									stylePanelType="vertical-align"
-									style={DefaultVerticalAlignStyle}
-									items={STYLES.verticalAlign}
-									value={verticalLabelAlign}
-									onValueChange={handleValueChange}
-								/>
-							)}
-						</div>
+						{verticalLabelAlign === undefined ? (
+							<TldrawUiToolbarButton
+								type="icon"
+								title={msg('style-panel.vertical-align')}
+								data-testid="vertical-align"
+								disabled
+							>
+								<TldrawUiButtonIcon icon="vertical-align-middle" />
+							</TldrawUiToolbarButton>
+						) : (
+							<DropdownPicker
+								type="icon"
+								id="geo-vertical-alignment"
+								uiType="verticalAlign"
+								stylePanelType="vertical-align"
+								style={DefaultVerticalAlignStyle}
+								items={STYLES.verticalAlign}
+								value={verticalLabelAlign}
+								onValueChange={handleValueChange}
+							/>
+						)}
 					</TldrawUiToolbar>
 				</>
 			)}
@@ -348,7 +344,7 @@ export function GeoStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.geo')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.geo')}>
 			<DropdownPicker
 				id="geo"
 				type="menu"
@@ -374,7 +370,7 @@ export function SplineStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.spline')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.spline')}>
 			<DropdownPicker
 				id="spline"
 				type="menu"
@@ -400,7 +396,7 @@ export function ArrowStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.arrow-kind')}>
 			<DropdownPicker
 				id="arrow-kind"
 				type="menu"
diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx
index 239688a3d988..ef0fa6f04ef5 100644
--- a/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx
+++ b/packages/tldraw/src/lib/ui/components/StylePanel/DoubleDropdownPicker.tsx
@@ -68,7 +68,7 @@ function DoubleDropdownPickerInner<T extends string>({
 			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
 				{msg(label)}
 			</div>
-			<TldrawUiToolbar label={msg(label)} className="tlui-buttons__horizontal">
+			<TldrawUiToolbar orientation="horizontal" label={msg(label)}>
 				<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
 					<TldrawUiPopoverTrigger>
 						<TldrawUiToolbarButton
@@ -86,7 +86,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelA)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsA.map((item) => {
 									return (
@@ -126,7 +126,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelB)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsB.map((item) => {
 									return (
diff --git a/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx b/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx
index 28b338e62e62..aa8ed9f6af92 100644
--- a/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx
+++ b/packages/tldraw/src/lib/ui/components/StylePanel/DropdownPicker.tsx
@@ -1,5 +1,4 @@
 import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'
-import classNames from 'classnames'
 import * as React from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -57,7 +56,12 @@ function DropdownPickerInner<T extends string>({
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
+		<TldrawUiPopover
+			id={popoverId}
+			open={isOpen}
+			onOpenChange={setIsOpen}
+			className="tlui-style-panel__dropdown-picker"
+		>
 			<TldrawUiPopoverTrigger>
 				<TldrawUiToolbarButton
 					type={type}
@@ -70,10 +74,7 @@ function DropdownPickerInner<T extends string>({
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar
-					label={labelStr}
-					className={classNames('tlui-buttons__grid', `tlui-buttons__${stylePanelType}`)}
-				>
+				<TldrawUiToolbar orientation="grid" label={labelStr}>
 					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 						{items.map((item) => {
 							return (
diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx
index b5c75e81485b..15c07b984950 100644
--- a/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx
+++ b/packages/tldraw/src/lib/ui/components/Toolbar/DefaultToolbar.tsx
@@ -44,14 +44,15 @@ export const DefaultToolbar = memo(function DefaultToolbar({ children }: Default
 				: breakpoint < PORTRAIT_BREAKPOINT.TABLET
 
 	return (
-		<div ref={ref} className="tlui-toolbar">
-			<div className="tlui-toolbar__inner">
-				<div className="tlui-toolbar__left">
+		<div ref={ref} className="tlui-main-toolbar">
+			<div className="tlui-main-toolbar__inner">
+				<div className="tlui-main-toolbar__left">
 					{!isReadonlyMode && (
-						<div className="tlui-toolbar__extras">
+						<div className="tlui-main-toolbar__extras">
 							{showQuickActions && (
 								<TldrawUiToolbar
-									className="tlui-toolbar__extras__controls tlui-buttons__horizontal"
+									orientation="horizontal"
+									className="tlui-main-toolbar__extras__controls"
 									label={msg('actions-menu.title')}
 								>
 									{QuickActions && <QuickActions />}
@@ -64,7 +65,7 @@ export const DefaultToolbar = memo(function DefaultToolbar({ children }: Default
 					<OverflowingToolbar>{children ?? <DefaultToolbarContent />}</OverflowingToolbar>
 				</div>
 				{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
-					<div className="tlui-toolbar__tools">
+					<div className="tlui-main-toolbar__tools">
 						<MobileStylePanel />
 					</div>
 				)}
diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx
index 3aa18dbdb6bf..add599f6dd0e 100644
--- a/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx
+++ b/packages/tldraw/src/lib/ui/components/Toolbar/OverflowingToolbar.tsx
@@ -20,6 +20,7 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
+import { TldrawUiRow } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
 export const IsInOverflowContext = createContext(false)
@@ -67,9 +68,6 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
 				display: none;
 			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex + 4}):not([data-radix-popper-content-wrapper]) {
-				margin-top: 0;
-			}
         `
 	}, [lastActiveOverflowItem, id, overflowIndex])
 
@@ -158,16 +156,17 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		<>
 			<style nonce={editor.options.nonce}>{css}</style>
 			<TldrawUiToolbar
-				className={classNames('tlui-toolbar__tools', {
-					'tlui-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				orientation="horizontal"
+				className={classNames('tlui-main-toolbar__tools', {
+					'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				label={msg('tool-panel.title')}
 			>
-				<div id={`${id}_main`} ref={mainToolsRef} className="tlui-toolbar__tools__list">
+				<TldrawUiRow id={`${id}_main`} ref={mainToolsRef}>
 					<TldrawUiMenuContextProvider type="toolbar" sourceId="toolbar">
 						{children}
 					</TldrawUiMenuContextProvider>
-				</div>
+				</TldrawUiRow>
 				{/* There is a +1 because if the menu is just one item, it's not necessary. */}
 				{totalItems > overflowIndex + 1 && (
 					<IsInOverflowContext.Provider value={true}>
@@ -176,7 +175,7 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 								<TldrawUiToolbarButton
 									title={msg('tool-panel.more')}
 									type="tool"
-									className="tlui-toolbar__overflow"
+									className="tlui-main-toolbar__overflow"
 									data-testid="tools.more-button"
 								>
 									<TldrawUiButtonIcon icon="chevron-up" />
@@ -184,7 +183,7 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 							</TldrawUiPopoverTrigger>
 							<TldrawUiPopoverContent side="top" align="center">
 								<TldrawUiToolbar
-									className="tlui-buttons__grid"
+									orientation="grid"
 									data-testid="tools.more-content"
 									label={msg('tool-panel.more')}
 									id={`${id}_more`}
diff --git a/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx b/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx
index ae2989e5c07c..334ab89bdf37 100644
--- a/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx
+++ b/packages/tldraw/src/lib/ui/components/Toolbar/ToggleToolLockedButton.tsx
@@ -31,8 +31,8 @@ export function ToggleToolLockedButton({ activeToolId }: ToggleToolLockedButtonP
 				type="normal"
 				title={msg('action.toggle-tool-lock')}
 				data-testid="tool-lock"
-				className={classNames('tlui-toolbar__lock-button', {
-					'tlui-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
+				className={classNames('tlui-main-toolbar__lock-button', {
+					'tlui-main-toolbar__lock-button__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				onClick={() => editor.updateInstanceState({ isToolLocked: !isToolLocked })}
 			>
diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx
index 661b78e75f47..22da89fe090e 100644
--- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx
@@ -6,7 +6,6 @@ import {
 	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
-import classNames from 'classnames'
 import { ReactElement, memo, useMemo, useRef } from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
@@ -15,6 +14,7 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButtonIcon } from './Button/TldrawUiButtonIcon'
 import { TldrawUiToolbarToggleGroup, TldrawUiToolbarToggleItem } from './TldrawUiToolbar'
+import { TldrawUiGrid, TldrawUiRow } from './layout'
 
 /** @public */
 export interface TLUiButtonPickerProps<T extends string> {
@@ -116,41 +116,43 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 		}
 	}, [editor, breakpoint, value, onHistoryMark, onValueChange, style])
 
+	const Wrapper = items.length > 4 ? TldrawUiGrid : TldrawUiRow
+
 	return (
-		<TldrawUiToolbarToggleGroup
-			data-testid={`style.${uiType}`}
-			type="single"
-			className={classNames('tlui-buttons__grid')}
-			value={value.type === 'shared' ? value.value : undefined}
-		>
-			{items.map((item) => {
-				const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
-				return (
-					<TldrawUiToolbarToggleItem
-						type="icon"
-						key={item.value}
-						data-id={item.value}
-						data-testid={`style.${uiType}.${item.value}`}
-						aria-label={label}
-						value={item.value}
-						data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-						data-isactive={value.type === 'shared' && value.value === item.value}
-						title={label}
-						className={classNames('tlui-button-grid__button')}
-						style={
-							style === (DefaultColorStyle as StyleProp<unknown>)
-								? { color: theme[item.value as TLDefaultColorStyle].solid }
-								: undefined
-						}
-						onPointerEnter={handleButtonPointerEnter}
-						onPointerDown={handleButtonPointerDown}
-						onPointerUp={handleButtonPointerUp}
-						onClick={handleButtonClick}
-					>
-						<TldrawUiButtonIcon icon={item.icon} />
-					</TldrawUiToolbarToggleItem>
-				)
-			})}
-		</TldrawUiToolbarToggleGroup>
+		<Wrapper asChild>
+			<TldrawUiToolbarToggleGroup
+				data-testid={`style.${uiType}`}
+				type="single"
+				value={value.type === 'shared' ? value.value : undefined}
+			>
+				{items.map((item) => {
+					const label = title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
+					return (
+						<TldrawUiToolbarToggleItem
+							type="icon"
+							key={item.value}
+							data-id={item.value}
+							data-testid={`style.${uiType}.${item.value}`}
+							aria-label={label}
+							value={item.value}
+							data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
+							data-isactive={value.type === 'shared' && value.value === item.value}
+							title={label}
+							style={
+								style === (DefaultColorStyle as StyleProp<unknown>)
+									? { color: theme[item.value as TLDefaultColorStyle].solid }
+									: undefined
+							}
+							onPointerEnter={handleButtonPointerEnter}
+							onPointerDown={handleButtonPointerDown}
+							onPointerUp={handleButtonPointerUp}
+							onClick={handleButtonClick}
+						>
+							<TldrawUiButtonIcon icon={item.icon} />
+						</TldrawUiToolbarToggleItem>
+					)
+				})}
+			</TldrawUiToolbarToggleGroup>
+		</Wrapper>
 	)
 }) as <T extends string>(props: TLUiButtonPickerProps<T>) => ReactElement
diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx
index 075bd95a0e3f..e749356505f2 100644
--- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiContextualToolbar.tsx
@@ -172,7 +172,7 @@ export const TldrawUiContextualToolbar = ({
 			className={classNames('tlui-contextual-toolbar', className)}
 			onPointerDown={stopEventPropagation}
 		>
-			<TldrawUiToolbar className="tlui-menu tlui-buttons__horizontal" label={label}>
+			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
 				{children}
 			</TldrawUiToolbar>
 		</div>
diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx
index d72032b69331..c26f700cf28a 100644
--- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiPopover.tsx
@@ -1,4 +1,5 @@
 import { useContainer } from '@tldraw/editor'
+import classNames from 'classnames'
 import { Popover as _Popover } from 'radix-ui'
 import React from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
@@ -9,15 +10,16 @@ export interface TLUiPopoverProps {
 	open?: boolean
 	children: React.ReactNode
 	onOpenChange?(isOpen: boolean): void
+	className?: string
 }
 
 /** @public @react */
-export function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {
+export function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps) {
 	const [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)
 
 	return (
 		<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>
-			<div className="tlui-popover">{children}</div>
+			<div className={classNames('tlui-popover', className)}>{children}</div>
 		</_Popover.Root>
 	)
 }
diff --git a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiToolbar.tsx b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiToolbar.tsx
index 3a6d8e8a81a1..cb5b405a11bc 100644
--- a/packages/tldraw/src/lib/ui/components/primitives/TldrawUiToolbar.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/TldrawUiToolbar.tsx
@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
+import { TldrawUiGrid, TldrawUiRow } from './layout'
 import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
@@ -9,20 +10,25 @@ export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string
 	dir?: 'ltr' | 'rtl'
 	label: string
+	orientation?: 'horizontal' | 'grid'
 }
 
 /** @public @react */
 export const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(
-	({ children, className, label, ...props }: TLUiToolbarProps, ref) => {
+	({ children, className, label, orientation = 'horizontal', ...props }: TLUiToolbarProps, ref) => {
+		const Layout = orientation === 'grid' ? TldrawUiGrid : TldrawUiRow
 		return (
-			<_Toolbar.Root
-				ref={ref}
-				{...props}
-				className={classnames('tlui-toolbar-container', className)}
-				aria-label={label}
-			>
-				{children}
-			</_Toolbar.Root>
+			<Layout asChild>
+				<_Toolbar.Root
+					ref={ref}
+					{...props}
+					className={classnames('tlui-toolbar', className)}
+					aria-label={label}
+					orientation={orientation === 'grid' ? 'horizontal' : orientation}
+				>
+					{children}
+				</_Toolbar.Root>
+			</Layout>
 		)
 	}
 )
diff --git a/packages/tldraw/src/lib/ui/components/primitives/layout.tsx b/packages/tldraw/src/lib/ui/components/primitives/layout.tsx
new file mode 100644
index 000000000000..f826904468b0
--- /dev/null
+++ b/packages/tldraw/src/lib/ui/components/primitives/layout.tsx
@@ -0,0 +1,33 @@
+import classNames from 'classnames'
+import { Slot } from 'radix-ui'
+import { HTMLAttributes, ReactNode, forwardRef } from 'react'
+
+/** @public */
+export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
+	children: ReactNode
+	asChild?: boolean
+}
+
+/**
+ * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
+ *
+ * @public @react
+ */
+export const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return <Component ref={ref} className={classNames('tlui-row', className)} {...props} />
+	}
+)
+
+/**
+ * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
+ * etc.
+ *
+ * @public @react */
+export const TldrawUiGrid = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return <Component ref={ref} className={classNames('tlui-grid', className)} {...props} />
+	}
+)
diff --git a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx
index 8aceb3430294..0875abf3404c 100644
--- a/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx
+++ b/packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx
@@ -232,7 +232,6 @@ export function TldrawUiMenuItem<
 					aria-label={labelStr}
 					aria-pressed={isSelected ? 'true' : 'false'}
 					isActive={isSelected}
-					className="tlui-button-grid__button"
 					data-testid={`tools.more.${id}`}
 					data-value={id}
 					disabled={disabled}