diff --git a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
index 3b7168b3b95..c5044a49b78 100644
--- a/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/ComponentPickerPlugin/index.tsx
@@ -42,6 +42,7 @@ import {INSERT_COLLAPSIBLE_COMMAND} from '../CollapsiblePlugin';
import {InsertEquationDialog} from '../EquationsPlugin';
import {INSERT_EXCALIDRAW_COMMAND} from '../ExcalidrawPlugin';
import {INSERT_IMAGE_COMMAND, InsertImageDialog} from '../ImagesPlugin';
+import InsertLayoutDialog from '../LayoutPlugin/InsertLayoutDialog';
import {INSERT_PAGE_BREAK} from '../PageBreakPlugin';
import {InsertPollDialog} from '../PollPlugin';
import {InsertNewTableDialog, InsertTableDialog} from '../TablePlugin';
@@ -300,6 +301,14 @@ function getBaseOptions(editor: LexicalEditor, showModal: ShowModal) {
onSelect: () =>
editor.dispatchCommand(INSERT_COLLAPSIBLE_COMMAND, undefined),
}),
+ new ComponentPickerOption('Columns Layout', {
+ icon: ,
+ keywords: ['columns', 'layout', 'grid'],
+ onSelect: () =>
+ showModal('Insert Columns Layout', (onClose) => (
+
+ )),
+ }),
...(['left', 'center', 'right', 'justify'] as const).map(
(alignment) =>
new ComponentPickerOption(`Align ${alignment}`, {