diff --git a/packages/playground/admin/app/components/layout.tsx b/packages/playground/admin/app/components/layout.tsx
index 5576e86002..22d5d4954d 100644
--- a/packages/playground/admin/app/components/layout.tsx
+++ b/packages/playground/admin/app/components/layout.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react'
 import { memo, PropsWithChildren } from 'react'
-import { IdentityLoader } from '../../lib/components/binding/identity'
-import { Slots } from '../../lib/components/slots'
+import { IdentityLoader } from '@app/lib/binding'
+import { LayoutComponent, Slots } from '@app/lib/layout'
 import { Navigation } from './navigation'
-import { LayoutComponent } from '../../lib/components/layout'
 import { Link } from '@contember/interface'
 import { Logo } from './icon'
 
diff --git a/packages/playground/admin/app/components/navigation.tsx b/packages/playground/admin/app/components/navigation.tsx
index 39080ce63a..27eae9d861 100644
--- a/packages/playground/admin/app/components/navigation.tsx
+++ b/packages/playground/admin/app/components/navigation.tsx
@@ -1,5 +1,5 @@
 import { ArchiveIcon, BrushIcon, FormInputIcon, GripVertical, HomeIcon, KanbanIcon, KeyRoundIcon, LanguagesIcon, LockKeyholeIcon, PencilIcon, TableIcon, UploadIcon, UserIcon, UsersIcon } from 'lucide-react'
-import { Menu, MenuItem } from '../../lib/components/ui/menu'
+import { Menu, MenuItem } from '@app/lib/ui/menu'
 
 
 export const Navigation = () => {
diff --git a/packages/playground/admin/app/index.tsx b/packages/playground/admin/app/index.tsx
index 3778c76c8e..9e036c9436 100644
--- a/packages/playground/admin/app/index.tsx
+++ b/packages/playground/admin/app/index.tsx
@@ -2,13 +2,13 @@ import { ApplicationEntrypoint, PageModule, Pages } from '@contember/interface'
 import { SlotsProvider } from '@contember/react-slots'
 import { Layout } from './components/layout'
 import '../index.css'
-import { Toaster } from '../lib/components/ui/toast'
+import { Toaster } from '@app/lib/toast'
 import { createErrorHandler, DevBar, DevPanel } from '@contember/react-devbar'
 import { LogInIcon } from 'lucide-react'
-import { LoginWithEmail } from '../lib/components/dev/login-panel'
+import { LoginWithEmail } from '@app/lib/dev'
 import { createRoot } from 'react-dom/client'
 import { getConfig } from './config'
-import { OutdatedApplicationDialog } from '../lib/components/outdated-application-dialog'
+import { OutdatedApplicationDialog } from '@app/lib/outdated-application-dialog'
 
 const errorHandler = createErrorHandler((dom, react, onRecoverableError) => createRoot(dom, { onRecoverableError }).render(react))
 
diff --git a/packages/playground/admin/app/labels.ts b/packages/playground/admin/app/labels.ts
index b2eacd38dd..8b17b36410 100644
--- a/packages/playground/admin/app/labels.ts
+++ b/packages/playground/admin/app/labels.ts
@@ -1,5 +1,5 @@
 import { BoardTaskStatus, GridArticleState } from '../../api/client'
-import { createEnumFormatter } from '../lib/utils/formatting'
+import { createEnumFormatter } from '@app/lib/formatting'
 
 export const BoardTaskStatusLabels: Record<BoardTaskStatus, string> = {
 	backlog: 'Backlog',
diff --git a/packages/playground/admin/app/pages/blocks.tsx b/packages/playground/admin/app/pages/blocks.tsx
index 05271a7e24..cc8739e9e8 100644
--- a/packages/playground/admin/app/pages/blocks.tsx
+++ b/packages/playground/admin/app/pages/blocks.tsx
@@ -1,13 +1,13 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import * as React from 'react'
 import { EntitySubTree, EntityView, Field, HasOne, StaticRender } from '@contember/interface'
-import { DefaultBlockRepeater } from '../../lib/components/block-repeater'
-import { ImageField, InputField, RadioEnumField, TextareaField } from '../../lib/components/form'
-import { UploadedImageView } from '../../lib/components/upload'
+import { DefaultBlockRepeater } from '@app/lib/block-repeater'
+import { ImageField, InputField, RadioEnumField, TextareaField } from '@app/lib/form'
+import { UploadedImageView } from '@app/lib/upload'
 import { Block } from '@contember/react-block-repeater'
 import { AlertOctagonIcon, ColumnsIcon, ImageIcon, TextIcon } from 'lucide-react'
-import { cn } from '../../lib/utils/cn'
+import { cn } from '@app/lib/utils'
 
 export default () => <>
 	<Binding>
diff --git a/packages/playground/admin/app/pages/board.tsx b/packages/playground/admin/app/pages/board.tsx
index 6de9e4732f..70f72da67d 100644
--- a/packages/playground/admin/app/pages/board.tsx
+++ b/packages/playground/admin/app/pages/board.tsx
@@ -1,8 +1,8 @@
 import { Field } from '@contember/interface'
-import { Slots } from '../../lib/components/slots'
+import { Slots } from '@app/lib/layout'
 import { BoardColumnLabel } from '@contember/react-board'
-import { Binding, PersistButton, PersistOnFieldChange } from '../../lib/components/binding'
-import { DefaultBoard } from '../../lib/components/board'
+import { Binding, PersistButton, PersistOnFieldChange } from '@app/lib/binding'
+import { DefaultBoard } from '@app/lib/board/board'
 
 const statusList = [
 	{ value: 'backlog', label: 'Backlog' },
diff --git a/packages/playground/admin/app/pages/dimensions.tsx b/packages/playground/admin/app/pages/dimensions.tsx
index a034afae4c..50c92c50c1 100644
--- a/packages/playground/admin/app/pages/dimensions.tsx
+++ b/packages/playground/admin/app/pages/dimensions.tsx
@@ -1,10 +1,10 @@
-import { Slots } from '../../lib/components/slots'
-import { Binding, PersistButton } from '../../lib/components/binding'
+import { Slots } from '@app/lib/layout'
+import { Binding, PersistButton } from '@app/lib/binding'
 import * as React from 'react'
-import { DimensionsSwitcher, SideDimensions } from '../../lib/components/dimensions'
+import { DimensionsSwitcher, SideDimensions } from '@app/lib/dimensions'
 import { EntitySubTree, Field, Variable } from '@contember/interface'
-import { InputField, TextareaField } from '../../lib/components/form'
-import { Card, CardContent, CardHeader, CardTitle } from '../../lib/components/ui/card'
+import { InputField, TextareaField } from '@app/lib/form'
+import { Card, CardContent, CardHeader, CardTitle } from '@app/lib/ui/card'
 
 export default () => {
 	return <>
diff --git a/packages/playground/admin/app/pages/editor.tsx b/packages/playground/admin/app/pages/editor.tsx
index 76967bf34f..26e5ceba9b 100644
--- a/packages/playground/admin/app/pages/editor.tsx
+++ b/packages/playground/admin/app/pages/editor.tsx
@@ -1,8 +1,8 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import * as React from 'react'
 import { Component, EntitySubTree, HasOne, useEntity, useField } from '@contember/interface'
-import { Toggle } from '../../lib/components/ui/toggle'
+import { Toggle } from '@app/lib/ui/toggle'
 import {
 	AlignCenterIcon,
 	AlignJustifyIcon,
@@ -31,11 +31,14 @@ import {
 } from 'lucide-react'
 import {
 	anchorElementType,
-	BlockContent,
 	boldMark,
 	codeMark,
 	createAlignHandler,
+	EditorElementTrigger,
+	EditorGenericTrigger,
+	EditorInlineReferencePortal,
 	EditorMarkTrigger,
+	EditorReferenceTrigger,
 	EditorRenderElementProps,
 	EditorTransforms,
 	EditorWrapNodeTrigger,
@@ -51,18 +54,13 @@ import {
 	underlineMark,
 	unorderedListElementType,
 } from '@contember/react-slate-editor'
-import { ImageField, InputField } from '../../lib/components/form'
-import { Popover, PopoverContent, PopoverTrigger } from '../../lib/components/ui/popover'
-import { Button } from '../../lib/components/ui/button'
+import { ImageField, InputField } from '@app/lib/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
+import { Button } from '@app/lib/ui/button'
 import { PopoverClose } from '@radix-ui/react-popover'
-import { uic } from '../../lib/utils/uic'
-import { EditorElementTrigger, EditorGenericTrigger, EditorInlineReferencePortal, EditorReferenceTrigger } from '@contember/react-slate-editor'
+import { uic } from '@app/lib/utils'
 import { useSlateStatic } from 'slate-react'
-import { RichTextField } from '../../lib-extra/editor/new/RichTextField'
-import { InlineHoveringToolbar } from '../../lib-extra/editor/common/InlineHoveringToolbar'
-import { BlockEditorField } from '../../lib-extra/editor/new/BlockEditor'
-import { BlockToolbar } from '../../lib-extra/editor/common/BlockToolbar'
-import { EditorBlock, EditorBlockContent } from '../../lib-extra/editor/new/EditorBlock'
+import { BlockEditorField, EditorBlock, EditorBlockContent, EditorBlockToolbar, EditorInlineToolbar, RichTextField } from '@app/lib/editor'
 
 export const richtext = () => <>
 	<Binding>
@@ -72,7 +70,7 @@ export const richtext = () => <>
 		<EntitySubTree entity={'EditorTextArea(unique=unique)'} setOnCreate={'(unique=unique)'}>
 			<div className={'space-y-4'}>
 				<RichTextField field={'data'} label="Rich text field">
-					<InlineHoveringToolbar>
+					<EditorInlineToolbar>
 						<EditorMarkTrigger mark={boldMark}><Toggle><BoldIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 						<EditorMarkTrigger mark={italicMark}><Toggle><ItalicIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 						<EditorMarkTrigger mark={underlineMark}><Toggle><UnderlineIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
@@ -80,7 +78,7 @@ export const richtext = () => <>
 						<EditorGenericTrigger {...createAlignHandler('start')}><Toggle><AlignLeftIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						<EditorGenericTrigger {...createAlignHandler('end')}><Toggle><AlignRightIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						<EditorGenericTrigger {...createAlignHandler('center')}><Toggle><AlignCenterIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
-					</InlineHoveringToolbar>
+					</EditorInlineToolbar>
 				</RichTextField>
 			</div>
 		</EntitySubTree>
@@ -113,14 +111,14 @@ export const blocks = () => <>
 						},
 					]}
 				>
-					<BlockToolbar>
+					<EditorBlockToolbar>
 						<EditorReferenceTrigger referenceType="quote"><BlockButton><QuoteIcon /> Quote</BlockButton></EditorReferenceTrigger>
 						<EditorReferenceTrigger referenceType="image"><BlockButton><ImageIcon /> Image</BlockButton></EditorReferenceTrigger>
 						<EditorElementTrigger elementType={tableElementType}><BlockButton><TableIcon /> Table</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={scrollTargetElementType}><BlockButton><LocateIcon /> Scroll target</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={horizontalRuleElementType}><BlockButton><MinusIcon  /> Horizontal rule</BlockButton></EditorElementTrigger>
-					</BlockToolbar>
-					<InlineHoveringToolbar>
+					</EditorBlockToolbar>
+					<EditorInlineToolbar>
 						<div>
 							<EditorMarkTrigger mark={boldMark}><Toggle><BoldIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 							<EditorMarkTrigger mark={italicMark}><Toggle><ItalicIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
@@ -154,7 +152,7 @@ export const blocks = () => <>
 							<EditorGenericTrigger {...createAlignHandler('center')}><Toggle><AlignCenterIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 							<EditorGenericTrigger {...createAlignHandler('justify')}><Toggle><AlignJustifyIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						</div>
-					</InlineHoveringToolbar>
+					</EditorInlineToolbar>
 
 					<EditorBlock name="quote" label="Quote">
 						<EditorBlockContent />
diff --git a/packages/playground/admin/app/pages/grid.tsx b/packages/playground/admin/app/pages/grid.tsx
index 297b487f90..3a4c6a28b6 100644
--- a/packages/playground/admin/app/pages/grid.tsx
+++ b/packages/playground/admin/app/pages/grid.tsx
@@ -1,5 +1,5 @@
 import { Component, Field, HasMany, HasOne, If } from '@contember/interface'
-import { Slots } from '../../lib/components/slots'
+import { Slots } from '@app/lib/layout'
 import { DataViewEachRow, DataViewElement, DataViewLayout } from '@contember/react-dataview'
 import {
 	createDataGridDateRange,
@@ -22,23 +22,21 @@ import {
 	DataGridNumberColumn,
 	DataGridNumberFilter,
 	DataGridPagination,
-	DataGridPredefinedDateRange,
 	DataGridQueryFilter,
 	DataGridTable,
 	DataGridTextColumn,
 	DataGridTiles,
 	DataGridToolbar,
 	DataGridTooltipLabel,
-} from '../../lib/components/datagrid'
+} from '@app/lib/datagrid'
 import * as React from 'react'
-import { ReactNode } from 'react'
-import { DefaultDropdown, DropdownMenuItem, DropdownMenuSeparator } from '../../lib/components/ui/dropdown'
-import { Binding, DeleteEntityDialog } from '../../lib/components/binding'
+import { DefaultDropdown, DropdownMenuItem, DropdownMenuSeparator } from '@app/lib/ui/dropdown'
+import { Binding, DeleteEntityDialog } from '@app/lib/binding'
 import { GridArticleStateLabels } from '../labels'
-import { formatDate } from '../../lib/utils/formatting'
-import { Button } from '../../lib/components/ui/button'
+import { formatDate } from '@app/lib/formatting'
+import { Button } from '@app/lib/ui/button'
 import { EyeIcon, LockIcon, MessageSquareIcon, RowsIcon } from 'lucide-react'
-import { Popover, PopoverContent, PopoverTrigger } from '../../lib/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
 
 export const simpleGrid = () => {
 	return (
diff --git a/packages/playground/admin/app/pages/input.tsx b/packages/playground/admin/app/pages/input.tsx
index 611a5777be..587635cdf1 100644
--- a/packages/playground/admin/app/pages/input.tsx
+++ b/packages/playground/admin/app/pages/input.tsx
@@ -1,11 +1,11 @@
-import { Slots } from '../../lib/components/slots'
+import { Slots } from '@app/lib/layout'
 import { EntitySubTree, useField } from '@contember/interface'
-import { CheckboxField, InputField, RadioEnumField, TextareaField } from '../../lib/components/form'
+import { CheckboxField, InputField, RadioEnumField, TextareaField } from '@app/lib/form'
 import * as React from 'react'
-import { Button } from '../../lib/components/ui/button'
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { SelectOrTypeField } from '../../lib-extra/select-or-type-field'
-import { FieldExists } from '../../lib-extra/has-field'
+import { Button } from '@app/lib/ui/button'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { SelectOrTypeField } from '@app/lib-extra/select-or-type-field'
+import { FieldExists } from '@app/lib-extra/has-field'
 
 
 export const basic = () => <>
diff --git a/packages/playground/admin/app/pages/legacyEditor.tsx b/packages/playground/admin/app/pages/legacyEditor.tsx
index df97ed5036..ec3d86d936 100644
--- a/packages/playground/admin/app/pages/legacyEditor.tsx
+++ b/packages/playground/admin/app/pages/legacyEditor.tsx
@@ -1,5 +1,5 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import * as React from 'react'
 import { Component, EntitySubTree, FieldView, HasMany, HasOne, useEntity } from '@contember/interface'
 import {
@@ -14,7 +14,7 @@ import {
 	EmbedHandlers,
 	referenceElementType,
 } from '@contember/react-slate-editor-legacy'
-import { Toggle } from '../../lib/components/ui/toggle'
+import { Toggle } from '@app/lib/ui/toggle'
 import {
 	AlignCenterIcon,
 	AlignJustifyIcon,
@@ -60,16 +60,16 @@ import {
 	underlineMark,
 	unorderedListElementType,
 } from '@contember/react-slate-editor'
-import { ImageField, InputField } from '../../lib/components/form'
-import { Popover, PopoverContent, PopoverTrigger } from '../../lib/components/ui/popover'
-import { Button } from '../../lib/components/ui/button'
+import { ImageField, InputField } from '@app/lib/form'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
+import { Button } from '@app/lib/ui/button'
 import { PopoverClose } from '@radix-ui/react-popover'
-import { uic } from '../../lib/utils/uic'
+import { uic } from '@app/lib/utils'
 import { useSlateStatic } from 'slate-react'
-import { baseEditorPlugins } from '../../lib-extra/editor/common/baseEditorPlugins'
-import { BlockEditorField } from '../../lib-extra/editor/legacy/BlockEditor'
-import { BlockToolbar } from '../../lib-extra/editor/common/BlockToolbar'
-import { InlineHoveringToolbar } from '../../lib-extra/editor/common/InlineHoveringToolbar'
+import { baseEditorPlugins } from '@app/lib/editor'
+import { BlockEditorField } from '../../lib-extra/legacy-editor/BlockEditor'
+import { EditorBlockToolbar } from '@app/lib/editor'
+import { EditorInlineToolbar } from '@app/lib/editor'
 
 
 const BlockButton = uic('button', {
@@ -127,14 +127,14 @@ export const blocks = () => <>
 						},
 					]}
 				>
-					<BlockToolbar>
+					<EditorBlockToolbar>
 						<EditorReferenceTrigger referenceType="quote"><BlockButton><QuoteIcon /> Quote</BlockButton></EditorReferenceTrigger>
 						<EditorReferenceTrigger referenceType="image"><BlockButton><ImageIcon /> Image</BlockButton></EditorReferenceTrigger>
 						<EditorElementTrigger elementType={tableElementType}><BlockButton><TableIcon /> Table</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={scrollTargetElementType}><BlockButton><LocateIcon /> Scroll target</BlockButton></EditorElementTrigger>
 						<EditorElementTrigger elementType={horizontalRuleElementType}><BlockButton><MinusIcon /> Horizontal rule</BlockButton></EditorElementTrigger>
-					</BlockToolbar>
-					<InlineHoveringToolbar>
+					</EditorBlockToolbar>
+					<EditorBlockToolbar>
 						<div>
 							<EditorMarkTrigger mark={boldMark}><Toggle><BoldIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
 							<EditorMarkTrigger mark={italicMark}><Toggle><ItalicIcon className="h-3 w-3" /></Toggle></EditorMarkTrigger>
@@ -168,7 +168,7 @@ export const blocks = () => <>
 							<EditorGenericTrigger {...createAlignHandler('center')}><Toggle><AlignCenterIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 							<EditorGenericTrigger {...createAlignHandler('justify')}><Toggle><AlignJustifyIcon className="h-3 w-3" /></Toggle></EditorGenericTrigger>
 						</div>
-					</InlineHoveringToolbar>
+					</EditorBlockToolbar>
 					<Block discriminateBy="quote" label="Quote">
 						<BlockEditor.ContentOutlet placeholder="Type here..." />
 					</Block>
diff --git a/packages/playground/admin/app/pages/plateEditor.tsx b/packages/playground/admin/app/pages/plateEditor.tsx
index c7d086f956..808152f3c3 100644
--- a/packages/playground/admin/app/pages/plateEditor.tsx
+++ b/packages/playground/admin/app/pages/plateEditor.tsx
@@ -1,10 +1,9 @@
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
-import { InputField } from '../../lib/components/form'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout/slots'
 import * as React from 'react'
 import { EntitySubTree, useField } from '@contember/interface'
-import { PlateEditor } from '../../lib/components/richt-text-editor/plate-editor'
-import { Button } from '../../lib/components/ui/button'
+import { Button } from '@app/lib/ui/button'
+import { PlateEditor } from '@app/lib-extra/plate-editor/plate-editor'
 
 export default () => <>
 	<Binding>
diff --git a/packages/playground/admin/app/pages/repeater.tsx b/packages/playground/admin/app/pages/repeater.tsx
index 65d33c94a9..6d3af516a7 100644
--- a/packages/playground/admin/app/pages/repeater.tsx
+++ b/packages/playground/admin/app/pages/repeater.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
-import { Binding, DeleteEntityDialog, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
+import { Binding, DeleteEntityDialog, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
 import { Field } from '@contember/interface'
-import { DefaultRepeater, RepeaterItemActions, RepeaterRemoveItemButton } from '../../lib/components/repeater'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropDownTriggerButton } from '../../lib/components/ui/dropdown'
+import { DefaultRepeater, RepeaterItemActions, RepeaterRemoveItemButton } from '@app/lib/repeater'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, DropDownTriggerButton } from '@app/lib/ui/dropdown'
 
 const repeaterDropdown = (
 	<DropdownMenu>
diff --git a/packages/playground/admin/app/pages/select.tsx b/packages/playground/admin/app/pages/select.tsx
index 0cc1a7357f..88811697b5 100644
--- a/packages/playground/admin/app/pages/select.tsx
+++ b/packages/playground/admin/app/pages/select.tsx
@@ -1,9 +1,9 @@
-import { Slots } from '../../lib/components/slots'
-import { Binding, PersistButton } from '../../lib/components/binding'
+import { Slots } from '@app/lib/layout'
+import { Binding, PersistButton } from '@app/lib/binding'
 import { EntitySubTree } from '@contember/interface'
 import * as React from 'react'
 import { Field } from '@contember/react-binding'
-import { InputField, MultiSelectField, SelectEnumField, SelectField, SortableMultiSelectField } from '../../lib/components/form'
+import { InputField, MultiSelectField, SelectEnumField, SelectField, SortableMultiSelectField } from '@app/lib/form'
 
 
 export const hasOne = () => <>
diff --git a/packages/playground/admin/app/pages/tenant.tsx b/packages/playground/admin/app/pages/tenant.tsx
index 11771f728c..7cb599eaf1 100644
--- a/packages/playground/admin/app/pages/tenant.tsx
+++ b/packages/playground/admin/app/pages/tenant.tsx
@@ -1,16 +1,10 @@
 import { ChangeMyPasswordForm, CreateApiKeyForm, InviteForm } from '@contember/react-identity'
-import { Card, CardContent, CardHeader, CardTitle } from '../../lib/components/ui/card'
-import { ChangeMyPasswordFormFields } from '../../lib/components/tenant/changeMyPasswordForm'
-import { ToastContent, useShowToast } from '../../lib/components/ui/toast'
-import { OtpSetup } from '../../lib/components/tenant/otpSetup'
-import { PersonList } from '../../lib/components/tenant/personList'
-import { InviteFormFields } from '../../lib/components/tenant/inviteForm'
+import { Card, CardContent, CardHeader, CardTitle } from '@app/lib/ui/card'
+import { ApiKeyList, ChangeMyPasswordFormFields, CreateApiKeyFormFields, InviteFormFields, MemberListController, OtpSetup, PersonList } from '@app/lib/tenant'
+import { ToastContent, useShowToast } from '@app/lib/toast'
 import { useProjectSlug } from '@contember/react-client'
-import { Input } from '../../lib/components/ui/input'
-import { CreateApiKeyFormFields } from '../../lib/components/tenant/createApiKeyForm'
-import { ApiKeyList } from '../../lib/components/tenant/apiKeyList'
+import { Input } from '@app/lib/ui/input'
 import { useRef } from 'react'
-import { MemberListController } from '../../lib/components/tenant/memberList'
 
 export const Security = () => {
 	const showToast = useShowToast()
diff --git a/packages/playground/admin/app/pages/ui/button.tsx b/packages/playground/admin/app/pages/ui/button.tsx
index f9c84a88ec..6c80096fd3 100644
--- a/packages/playground/admin/app/pages/ui/button.tsx
+++ b/packages/playground/admin/app/pages/ui/button.tsx
@@ -1,4 +1,4 @@
-import { Button } from '../../../lib/components/ui/button'
+import { Button } from '@app/lib/ui/button'
 import { HomeIcon } from 'lucide-react'
 
 export default <>
diff --git a/packages/playground/admin/app/pages/ui/toast.tsx b/packages/playground/admin/app/pages/ui/toast.tsx
index 9e317c5100..5b640fdb31 100644
--- a/packages/playground/admin/app/pages/ui/toast.tsx
+++ b/packages/playground/admin/app/pages/ui/toast.tsx
@@ -1,7 +1,7 @@
 import { Slot } from '@radix-ui/react-slot'
 import { ReactNode } from 'react'
-import { ToastContent, ToastType, useShowToast } from '../../../lib/components/ui/toast'
-import { Button } from '../../../lib/components/ui/button'
+import { ToastContent, ToastType, useShowToast } from '@app/lib/toast'
+import { Button } from '@app/lib/ui/button'
 
 const ToastTrigger = ({ type, description, title, ...props }: {
 	title: string
diff --git a/packages/playground/admin/app/pages/upload.tsx b/packages/playground/admin/app/pages/upload.tsx
index 520782fd03..f45fc528cd 100644
--- a/packages/playground/admin/app/pages/upload.tsx
+++ b/packages/playground/admin/app/pages/upload.tsx
@@ -1,8 +1,8 @@
 import { EntitySubTree } from '@contember/react-binding'
 import * as React from 'react'
-import { Binding, PersistButton } from '../../lib/components/binding'
-import { Slots } from '../../lib/components/slots'
-import { AudioField, FileField, ImageField, ImageRepeaterField, VideoField } from '../../lib/components/form'
+import { Binding, PersistButton } from '@app/lib/binding'
+import { Slots } from '@app/lib/layout'
+import { AudioField, FileField, ImageField, ImageRepeaterField, VideoField } from '@app/lib/form'
 
 
 export const image = () => <>
diff --git a/packages/playground/admin/index.tsx b/packages/playground/admin/index.tsx
index f164f3eeaf..793ac8288a 100644
--- a/packages/playground/admin/index.tsx
+++ b/packages/playground/admin/index.tsx
@@ -1,21 +1,20 @@
 import './index.css'
 import { createErrorHandler } from '@contember/react-devbar'
 import { createRoot } from 'react-dom/client'
-import { LoginFormFields } from './lib/components/tenant/loginForm'
+import { LoginFormFields, PasswordResetRequestFormFields } from '@app/lib/tenant'
 import { ContemberClient } from '@contember/react-client'
 import { IdentityProvider, IdentityState, IDP, IDPInitTrigger, IDPState, LoginForm, LogoutTrigger, PasswordResetForm, PasswordResetRequestForm } from '@contember/react-identity'
 import { Link, RoutingProvider, useCurrentRequest, useRedirect } from '@contember/react-routing'
 import { Pages, useIdentity } from '@contember/interface'
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './lib/components/ui/card'
-import { AnchorButton, Button } from './lib/components/ui/button'
-import { PasswordResetRequestFormFields } from './lib/components/tenant/passwordResetRequestForm'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@app/lib/ui/card'
+import { AnchorButton, Button } from '@app/lib/ui/button'
 import { MailIcon } from 'lucide-react'
-import { PasswordResetFormFields } from './lib/components/tenant/passwordResetForm'
-import { ToastContent, Toaster, useShowToast } from './lib/components/ui/toast'
-import { Loader } from './lib/components/ui/loader'
-import { Overlay } from './lib/components/ui/overlay'
+import { PasswordResetFormFields } from '@app/lib/tenant'
+import { ToastContent, Toaster, useShowToast } from '@app/lib/toast'
+import { Loader } from '@app/lib/ui/loader'
+import { Overlay } from '@app/lib/ui/overlay'
 import { useEffect } from 'react'
-import { dict } from './lib/dict'
+import { dict } from '@app/lib/dict'
 
 const errorHandler = createErrorHandler((dom, react, onRecoverableError) => createRoot(dom, { onRecoverableError }).render(react))
 
diff --git a/packages/playground/admin/lib-extra/editor/legacy/BlockEditor.tsx b/packages/playground/admin/lib-extra/legacy-editor/BlockEditor.tsx
similarity index 89%
rename from packages/playground/admin/lib-extra/editor/legacy/BlockEditor.tsx
rename to packages/playground/admin/lib-extra/legacy-editor/BlockEditor.tsx
index 4ac2a36efe..15dc8d9d9c 100644
--- a/packages/playground/admin/lib-extra/editor/legacy/BlockEditor.tsx
+++ b/packages/playground/admin/lib-extra/legacy-editor/BlockEditor.tsx
@@ -1,13 +1,12 @@
 import { ReactNode } from 'react'
-import { EditorCanvas } from '../common/EditorCanvas'
-import { EditableCanvas } from '../common/EditableCanvas'
+import { EditorCanvas, EditorEditableCanvas } from '@app/lib/editor'
 import { BlockEditor, BlockEditorProps } from '@contember/react-slate-editor-legacy'
 import { Component } from '@contember/interface'
 import { SortableBlock } from './SortableBlock'
 import { ReferenceElementRenderer } from './ReferenceElementRenderer'
 import { RepeaterSortable, useRepeaterSortedEntities } from '@contember/react-repeater-dnd-kit'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
-import { useSlate, useSlateStatic } from 'slate-react'
+import { useSlateStatic } from 'slate-react'
 
 export type BlockEditorFieldProps =
 	& Omit<BlockEditorProps, 'renderSortableBlock' | 'renderReference'>
@@ -37,7 +36,7 @@ export const BlockEditorInner = ({ children, placeholder }: {
 	return (
 		<SortableContext items={entities} strategy={verticalListSortingStrategy}>
 			<EditorCanvas
-				underlyingComponent={EditableCanvas}
+				underlyingComponent={EditorEditableCanvas}
 				componentProps={{
 					renderElement: editor.renderElement,
 					renderLeaf: editor.renderLeaf,
diff --git a/packages/playground/admin/lib-extra/editor/legacy/ReferenceElementRenderer.tsx b/packages/playground/admin/lib-extra/legacy-editor/ReferenceElementRenderer.tsx
similarity index 95%
rename from packages/playground/admin/lib-extra/editor/legacy/ReferenceElementRenderer.tsx
rename to packages/playground/admin/lib-extra/legacy-editor/ReferenceElementRenderer.tsx
index 95f056a194..bf53b47c6e 100644
--- a/packages/playground/admin/lib-extra/editor/legacy/ReferenceElementRenderer.tsx
+++ b/packages/playground/admin/lib-extra/legacy-editor/ReferenceElementRenderer.tsx
@@ -3,11 +3,11 @@ import { BlockProps, EditorWithBlocks, EmbedHandler, getDiscriminatedBlock, getD
 import { memo, MouseEvent as ReactMouseEvent, ReactNode, useCallback } from 'react'
 import { Transforms } from 'slate'
 import { ReactEditor, RenderElementProps, useSelected, useSlateStatic } from 'slate-react'
-import { Card, CardContent, CardHeader, CardTitle } from '../../../lib/components/ui/card'
+import { Card, CardContent, CardHeader, CardTitle } from '@app/lib/ui/card'
 import { PencilIcon, TrashIcon } from 'lucide-react'
-import { Button } from '../../../lib/components/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '../../../lib/components/ui/popover'
-import { BlockElement } from '../common/elements/BlockElement'
+import { Button } from '@app/lib/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@app/lib/ui/popover'
+import { BlockElement } from '@app/lib/editor'
 
 export interface ReferenceElementRendererProps extends RenderElementProps, ReferenceElementOptions {
 	element: ReferenceElement
diff --git a/packages/playground/admin/lib-extra/editor/legacy/SortableBlock.tsx b/packages/playground/admin/lib-extra/legacy-editor/SortableBlock.tsx
similarity index 94%
rename from packages/playground/admin/lib-extra/editor/legacy/SortableBlock.tsx
rename to packages/playground/admin/lib-extra/legacy-editor/SortableBlock.tsx
index 03aea35b74..23b68250cf 100644
--- a/packages/playground/admin/lib-extra/editor/legacy/SortableBlock.tsx
+++ b/packages/playground/admin/lib-extra/legacy-editor/SortableBlock.tsx
@@ -5,9 +5,9 @@ import { ReactEditor, useSlateStatic } from 'slate-react'
 import { useSortable } from '@dnd-kit/sortable'
 import { RepeaterCurrentEntityContext, RepeaterSortableItemActivator, RepeaterSortableItemContext, RepeaterSortableItemNode } from '@contember/react-repeater-dnd-kit'
 import { Entity } from '@contember/interface'
-import { RepeaterDropIndicator } from '../../../lib/components/repeater'
-import { uic } from '../../../lib/utils/uic'
 import { GripVerticalIcon } from 'lucide-react'
+import { RepeaterDropIndicator } from '@app/lib/repeater'
+import { uic } from '@app/lib/utils'
 
 export const BlockeEditorHandle = uic('button', {
 	baseClass: 'absolute top-1/2 -left-3 h-6 w-6 flex justify-end items-center opacity-10 hover:opacity-100 transition-opacity -translate-y-1/2',
diff --git a/packages/playground/admin/lib-extra/plate-editor/index.ts b/packages/playground/admin/lib-extra/plate-editor/index.ts
new file mode 100644
index 0000000000..be8c65fe7b
--- /dev/null
+++ b/packages/playground/admin/lib-extra/plate-editor/index.ts
@@ -0,0 +1 @@
+export * from './plate-editor'
diff --git a/packages/playground/admin/lib/components/richt-text-editor/lib/auto-format-utils.ts b/packages/playground/admin/lib-extra/plate-editor/lib/auto-format-utils.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/lib/auto-format-utils.ts
rename to packages/playground/admin/lib-extra/plate-editor/lib/auto-format-utils.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/lib/auto-format.ts b/packages/playground/admin/lib-extra/plate-editor/lib/auto-format.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/lib/auto-format.ts
rename to packages/playground/admin/lib-extra/plate-editor/lib/auto-format.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/lib/drag-over-plugin.ts b/packages/playground/admin/lib-extra/plate-editor/lib/drag-over-plugin.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/lib/drag-over-plugin.ts
rename to packages/playground/admin/lib-extra/plate-editor/lib/drag-over-plugin.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/lib/helpers.ts b/packages/playground/admin/lib-extra/plate-editor/lib/helpers.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/lib/helpers.ts
rename to packages/playground/admin/lib-extra/plate-editor/lib/helpers.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-editor.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-editor.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-editor.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-editor.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-plugins.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-plugins.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-plugins.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-plugins.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/cursor-overlay.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/cursor-overlay.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/cursor-overlay.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/cursor-overlay.tsx
index 51b2cabdb2..a24670835c 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/cursor-overlay.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/cursor-overlay.tsx
@@ -5,7 +5,7 @@ import {
 	CursorOverlayProps,
 	CursorProps,
 } from '@udecode/plate-cursor'
-import { cn } from '../../../utils/cn'
+import { cn } from '@app/lib/utils'
 
 export const cursorStore = createZustandStore('cursor')({
 	cursors: {},
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/draggable.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/draggable.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/draggable.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/draggable.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/editor.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/editor.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/editor.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/editor.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/fixed-toolbar-buttons.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/fixed-toolbar-buttons.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/fixed-toolbar-buttons.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/fixed-toolbar-buttons.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/fixed-toolbar.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/fixed-toolbar.tsx
similarity index 87%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/fixed-toolbar.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/fixed-toolbar.tsx
index c197356379..bbddfedb15 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/fixed-toolbar.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/fixed-toolbar.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../../utils/uic'
+import { uic } from '@app/lib/utils'
 import { Toolbar } from './toolbar'
 
 export const FixedToolbar = uic(
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/floating-toolbar-buttons.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/floating-toolbar-buttons.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/floating-toolbar-buttons.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/floating-toolbar-buttons.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/floating-toolbar.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/floating-toolbar.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/floating-toolbar.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/floating-toolbar.tsx
index 3e4ded5a82..eaf901c4d4 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/floating-toolbar.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/floating-toolbar.tsx
@@ -4,7 +4,7 @@ import { PortalBody, useComposedRef } from '@udecode/plate-common'
 import { flip, FloatingToolbarState, offset, useFloatingToolbar, useFloatingToolbarState } from '@udecode/plate-floating'
 
 import { Toolbar } from './toolbar'
-import { cn } from '../../../utils/cn'
+import { cn } from '@app/lib/utils'
 
 export const FloatingToolbar = withRef<
 	typeof Toolbar,
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/heading-element.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/heading-element.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/heading-element.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/heading-element.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/insert-dropdown-menu.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/insert-dropdown-menu.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/insert-dropdown-menu.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/insert-dropdown-menu.tsx
index e357961f1a..01cfea400f 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/insert-dropdown-menu.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/insert-dropdown-menu.tsx
@@ -11,7 +11,7 @@ import {
 	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
-} from '../../ui/dropdown'
+} from '@app/lib/ui/dropdown'
 import { useOpenState } from '../lib/helpers'
 import { ToolbarButton } from './toolbar'
 
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-element.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/link-element.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-element.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/link-element.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-floating-toolbar.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/link-floating-toolbar.tsx
similarity index 88%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-floating-toolbar.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/link-floating-toolbar.tsx
index 518a43543f..e5235736a8 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-floating-toolbar.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/link-floating-toolbar.tsx
@@ -1,21 +1,13 @@
 import { cn } from '@udecode/cn'
 import { flip, offset, UseVirtualFloatingOptions } from '@udecode/plate-floating'
-import {
-	FloatingLinkUrlInput,
-	LinkFloatingToolbarState,
-	LinkOpenButton,
-	useFloatingLinkEdit,
-	useFloatingLinkEditState,
-	useFloatingLinkInsert,
-	useFloatingLinkInsertState,
-} from '@udecode/plate-link'
+import { FloatingLinkUrlInput, LinkFloatingToolbarState, LinkOpenButton, useFloatingLinkEdit, useFloatingLinkEditState, useFloatingLinkInsert, useFloatingLinkInsertState } from '@udecode/plate-link'
 import { ExternalLinkIcon, LinkIcon, TextIcon, UnlinkIcon } from 'lucide-react'
-import { Button, buttonConfig } from '../../ui/button'
-import { Input, inputConfig } from '../../ui/input'
+import { Button, buttonConfig } from '@app/lib/ui/button'
+import { Input, inputConfig } from '@app/lib/ui/input'
 import { popoverVariants } from './popover'
 
 import { Separator } from './separator'
-import { uic } from '../../../utils/uic'
+import { uic } from '@app/lib/utils'
 
 const floatingOptions: UseVirtualFloatingOptions = {
 	placement: 'bottom-start',
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-toolbar-button.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/link-toolbar-button.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/link-toolbar-button.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/link-toolbar-button.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/list-element.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/list-element.tsx
similarity index 90%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/list-element.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/list-element.tsx
index 94337c57ba..f90f1d0a2e 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/list-element.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/list-element.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../../utils/uic'
+import { uic } from '@app/lib/utils'
 import { PlateElement } from '@udecode/plate-common'
 
 export const ListElement = uic(PlateElement, {
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/list-toolbar-button.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/list-toolbar-button.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/list-toolbar-button.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/list-toolbar-button.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/mark-toolbar-button.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/mark-toolbar-button.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/mark-toolbar-button.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/mark-toolbar-button.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/paragraph-element.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/paragraph-element.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/paragraph-element.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/paragraph-element.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/placeholder.ts b/packages/playground/admin/lib-extra/plate-editor/plate-ui/placeholder.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/placeholder.ts
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/placeholder.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/popover.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/popover.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/popover.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/popover.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/separator.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/separator.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/separator.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/separator.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/toolbar.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/toolbar.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/toolbar.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/toolbar.tsx
index e2637e331b..7525ee30b7 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/toolbar.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/toolbar.tsx
@@ -1,5 +1,5 @@
 import { Children, forwardRef } from 'react'
-import { uic } from '../../../utils/uic'
+import { uic } from '@app/lib/utils'
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar'
 import { cn, withCn, withRef, withVariants } from '@udecode/cn'
 import { cva, VariantProps } from 'class-variance-authority'
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/tooltip.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/tooltip.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/tooltip.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/tooltip.tsx
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/turn-into-dropdown-menu.tsx b/packages/playground/admin/lib-extra/plate-editor/plate-ui/turn-into-dropdown-menu.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/turn-into-dropdown-menu.tsx
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/turn-into-dropdown-menu.tsx
index 83158faea1..1ac9a5fb05 100644
--- a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/turn-into-dropdown-menu.tsx
+++ b/packages/playground/admin/lib-extra/plate-editor/plate-ui/turn-into-dropdown-menu.tsx
@@ -20,7 +20,7 @@ import {
 	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
 	DropdownMenuTrigger,
-} from '../../ui/dropdown'
+} from '@app/lib/ui/dropdown'
 import { useOpenState } from '../lib/helpers'
 import { ToolbarButton } from './toolbar'
 
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/with-draggables.ts b/packages/playground/admin/lib-extra/plate-editor/plate-ui/with-draggables.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/with-draggables.ts
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/with-draggables.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/plate-ui/with-list.ts b/packages/playground/admin/lib-extra/plate-editor/plate-ui/with-list.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/plate-ui/with-list.ts
rename to packages/playground/admin/lib-extra/plate-editor/plate-ui/with-list.ts
diff --git a/packages/playground/admin/lib/components/richt-text-editor/utils.ts b/packages/playground/admin/lib-extra/plate-editor/utils.ts
similarity index 100%
rename from packages/playground/admin/lib/components/richt-text-editor/utils.ts
rename to packages/playground/admin/lib-extra/plate-editor/utils.ts
diff --git a/packages/playground/admin/lib-extra/select-or-type-field.tsx b/packages/playground/admin/lib-extra/select-or-type-field.tsx
index 6d4fa52ad2..2e0efae801 100644
--- a/packages/playground/admin/lib-extra/select-or-type-field.tsx
+++ b/packages/playground/admin/lib-extra/select-or-type-field.tsx
@@ -1,7 +1,7 @@
-import { FormContainer, FormContainerProps } from '../lib/components/form'
+import { FormContainer, FormContainerProps } from '@app/lib/form'
 import { ComponentProps, useState } from 'react'
-import { Input, SelectInput } from '../lib/components/ui/input'
-import { cn } from '../lib/utils/cn'
+import { Input, Select } from '@app/lib/ui/input'
+import { cn } from '@app/lib/utils'
 import * as React from 'react'
 import { FormFieldScope, FormInput, FormInputProps } from '@contember/react-form'
 import { Component, Field } from '@contember/react-binding'
@@ -12,7 +12,7 @@ export type SelectOrTypeFieldProps =
 	& Omit<FormContainerProps, 'children'>
 	& {
 		required?: boolean
-		selectProps?: ComponentProps<typeof SelectInput>
+		selectProps?: ComponentProps<typeof Select>
 		inputProps?: ComponentProps<typeof Input>
 		options: Record<string, string>
 	}
@@ -24,7 +24,7 @@ export const SelectOrTypeField = Component(({ field, label, description, selectP
 	return (
 		<FormFieldScope field={field}>
 			<FormContainer description={description} label={label}>
-				{showSelect ? <SelectInput onChange={e => {
+				{showSelect ? <Select onChange={e => {
 						const value = e.target.value
 						if (value === '___other') {
 							setShowSelect(false)
@@ -41,7 +41,7 @@ export const SelectOrTypeField = Component(({ field, label, description, selectP
 							</option>
 						))}
 						<option value="___other">Other</option>
-					</SelectInput>
+					</Select>
 					: <FormInput field={field} isNonbearing={isNonbearing} defaultValue={defaultValue}>
 						<Input required={required} {...(inputProps ?? {})} className={cn('max-w-md', inputProps?.className)} />
 					</FormInput>}
diff --git a/packages/playground/admin/lib/components/binding/persist.tsx b/packages/playground/admin/lib/components/binding/persist.tsx
deleted file mode 100644
index 4b02244c87..0000000000
--- a/packages/playground/admin/lib/components/binding/persist.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { PersistTrigger, SugaredRelativeSingleField, useField } from '@contember/interface'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
-import { ReactElement, ReactNode, useCallback, useEffect } from 'react'
-import { ToastContent, useShowToast } from '../ui/toast'
-import { ErrorPersistResult, SuccessfulPersistResult } from '@contember/binding'
-import { Slot } from '@radix-ui/react-slot'
-import { useErrorFormatter } from '../errors'
-import { usePersist } from '@contember/react-binding'
-import { dict } from '../../../lib/dict'
-
-export const FeedbackTrigger = (props: { children: ReactElement }) => {
-	return <Slot {...props} {...usePersistFeedbackHandlers()} />
-}
-
-export const PersistButton = ({ label }: {
-	label?: ReactNode
-}) => {
-	return (
-		<FeedbackTrigger>
-			<PersistTrigger>
-				<Button className="group">
-					<Loader size="sm" position="absolute" className="hidden group-data-[loading]:block" />
-					{label ?? dict.persist.persistButton}
-				</Button>
-			</PersistTrigger>
-		</FeedbackTrigger>
-	)
-}
-
-export const usePersistErrorHandler = () => {
-	const showToast = useShowToast()
-	const errorFormatter = useErrorFormatter()
-	return useCallback((result: ErrorPersistResult) => {
-		if (result.type === 'invalidInput') {
-			const errorList = errorFormatter(result.errors)
-			showToast(
-				<ToastContent
-					title={dict.persist.invalidInputError}
-					children={<ul>{errorList.map((it, i) => <li key={i}>{it}</li>)}</ul>}
-					details={result.response?.errorMessage}
-				/>, {
-					type: 'error',
-				})
-		} else if (result.type === 'invalidResponse') {
-			showToast(
-				<ToastContent
-					title={dict.persist.invalidResponseError}
-					children={dict.persist.invalidResponseErrorDetails}
-				/>, {
-					type: 'error',
-				},
-			)
-		}
-	}, [errorFormatter, showToast])
-}
-
-export const usePersistSuccessHandler = () => {
-	const showToast = useShowToast()
-
-	return useCallback((result: SuccessfulPersistResult) => {
-		showToast(
-			<ToastContent
-				title={dict.persist.success}
-			/>, {
-				type: 'success',
-			})
-		if (result.type === 'justSuccess' && result.afterPersistError) {
-			showToast(
-				<ToastContent
-					title={dict.persist.afterPersistError}
-				/>, {
-					type: 'warning',
-				})
-		}
-	}, [showToast])
-}
-
-export const usePersistFeedbackHandlers = () => {
-	return {
-		onPersistError: usePersistErrorHandler(),
-		onPersistSuccess: usePersistSuccessHandler(),
-	}
-}
-
-export const usePersistWithFeedback = () => {
-	const triggerPersist = usePersist()
-	const { onPersistSuccess, onPersistError } = usePersistFeedbackHandlers()
-	return useCallback(() => {
-		return triggerPersist()
-			.then(onPersistSuccess)
-			.catch(onPersistError)
-	}, [onPersistError, onPersistSuccess, triggerPersist])
-}
-
-export const PersistOnCmdS = () => {
-	const persist = usePersistWithFeedback()
-	useEffect(() => {
-		const listener = (event: KeyboardEvent) => {
-			if (event.ctrlKey && event.key === 's') {
-				event.preventDefault()
-				persist()
-			}
-		}
-		document.body.addEventListener('keydown', listener)
-		return () => document.body.removeEventListener('keydown', listener)
-	}, [persist])
-
-	return null
-}
-
-
-export const PersistOnFieldChange = ({ field }: {
-	field: SugaredRelativeSingleField['field']
-}) => {
-	const triggerPersist = usePersist()
-	const onError = usePersistErrorHandler()
-	const getField = useField(field).getAccessor
-	useEffect(() => {
-		let persisting = false
-		return getField().addEventListener({ type: 'update' }, async field => {
-			if (persisting || field.value === field.valueOnServer) {
-				return
-			}
-			persisting = true
-			try {
-				await Promise.resolve()
-				await triggerPersist().catch(onError)
-			} finally {
-				persisting = false
-			}
-		})
-	}, [getField, onError, triggerPersist])
-
-	return null
-}
diff --git a/packages/playground/admin/lib/components/datagrid/filters/utils.ts b/packages/playground/admin/lib/components/datagrid/filters/utils.ts
deleted file mode 100644
index 768e5051d6..0000000000
--- a/packages/playground/admin/lib/components/datagrid/filters/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const getFilterName = <T>(name: string | undefined, field: string | T): string => {
-	const resolvedName = name ?? field
-	if (typeof resolvedName === 'string') {
-		return resolvedName
-	}
-	throw new Error('Please provide a name for the filter')
-}
diff --git a/packages/playground/admin/lib/utils/dictFormat.tsx b/packages/playground/admin/lib/utils/dictFormat.tsx
deleted file mode 100644
index dceee04da9..0000000000
--- a/packages/playground/admin/lib/utils/dictFormat.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const dictFormat = (value: string, replacements: Record<string, string>) => {
-	return value.replace(/\${([^}]+)}/g, (_, key) => replacements[key] || '')
-}
diff --git a/packages/playground/admin/tsconfig.json b/packages/playground/admin/tsconfig.json
index 33b2071646..6ef6544fa8 100644
--- a/packages/playground/admin/tsconfig.json
+++ b/packages/playground/admin/tsconfig.json
@@ -2,20 +2,22 @@
 	"extends": "../../../tsconfig.settings.json",
 	"compilerOptions": {
 		"noEmit": true,
-		"emitDeclarationOnly": false
+		"emitDeclarationOnly": false,
+		"paths": {
+			"@app/lib/ui/*": [
+				"../../react-ui-lib/src/ui/*"
+			],
+			"@app/lib/*": [
+				"../../react-ui-lib/src/*"
+			],
+			"@app/*": [
+				"./*"
+			]
+		}
 	},
 	"references": [
 		{ "path": "../api" },
 		{ "path": "../../interface/src" },
-		{ "path": "../../react-dataview/src" },
-		{ "path": "../../react-board/src" },
-		{ "path": "../../react-board-dnd-kit/src" },
-		{ "path": "../../react-slate-editor-legacy/src" },
-		{ "path": "../../react-repeater/src" },
-		{ "path": "../../react-repeater-dnd-kit/src" },
-		{ "path": "../../react-form/src" },
-		{ "path": "../../react-select/src" },
-		{ "path": "../../react-slate-editor/src" },
-		{ "path": "../../react-utils/src" },
+		{ "path": "../../react-ui-lib/src" }
 	]
 }
diff --git a/packages/playground/admin/vite.config.ts b/packages/playground/admin/vite.config.ts
index c80a36f51c..ee2d7d0823 100644
--- a/packages/playground/admin/vite.config.ts
+++ b/packages/playground/admin/vite.config.ts
@@ -4,6 +4,7 @@ import { defineConfig } from 'vite'
 // @ts-ignore
 import { resolveConfig } from '../../../build/createViteConfig.js'
 import { resolve } from 'node:path'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 export default defineConfig(() => {
 	const dsn = process.argv.find(it => it.includes('://'))
@@ -14,6 +15,7 @@ export default defineConfig(() => {
 		} : {},
 		base: '/',
 		plugins: [
+			tsconfigPaths(),
 			react(),
 			{
 				name: 'rewrite-middleware',
diff --git a/packages/playground/package.json b/packages/playground/package.json
index b91a877fd3..09fbb11610 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -14,49 +14,13 @@
 		"@contember/binding": "workspace:*",
 		"@contember/client": "workspace:*",
 		"@contember/client-content": "workspace:*",
-		"@contember/graphql-builder": "workspace:*",
 		"@contember/interface": "workspace:*",
-		"@contember/react-binding": "workspace:*",
-		"@contember/react-block-repeater": "workspace:*",
-		"@contember/react-board": "workspace:*",
-		"@contember/react-board-dnd-kit": "workspace:*",
-		"@contember/react-client": "workspace:*",
-		"@contember/react-client-tenant": "workspace:*",
-		"@contember/react-dataview": "workspace:*",
-		"@contember/react-form": "workspace:*",
-		"@contember/react-identity": "workspace:*",
-		"@contember/react-multipass-rendering": "workspace:*",
-		"@contember/react-repeater": "workspace:*",
-		"@contember/react-repeater-dnd-kit": "workspace:*",
-		"@contember/react-routing": "workspace:*",
-		"@contember/react-select": "workspace:*",
-		"@contember/react-slots": "workspace:*",
-		"@contember/react-uploader": "workspace:*",
-		"@contember/react-uploader-dropzone": "workspace:*",
-		"@contember/react-utils": "workspace:*",
+		"@contember/react-ui-lib": "workspace:*",
 		"@contember/schema": "^1.4.0-beta.1",
 		"@contember/schema-definition": "^1.4.0-beta.1",
 		"@contember/schema-utils": "^1.4.0-beta.1",
 		"@contember/utilities": "workspace:*",
 		"@faker-js/faker": "^8.4.1",
-		"@radix-ui/react-alert-dialog": "^1.0.5",
-		"@radix-ui/react-checkbox": "^1.0.4",
-		"@radix-ui/react-dialog": "^1.0.5",
-		"@radix-ui/react-dropdown-menu": "^2.0.6",
-		"@radix-ui/react-label": "^2.0.2",
-		"@radix-ui/react-popover": "^1.0.7",
-		"@radix-ui/react-primitive": "^1.0.3",
-		"@radix-ui/react-progress": "^1.0.3",
-		"@radix-ui/react-scroll-area": "^1.0.5",
-		"@radix-ui/react-select": "^2.0.0",
-		"@radix-ui/react-separator": "^1.0.3",
-		"@radix-ui/react-slot": "^1.0.2",
-		"@radix-ui/react-switch": "^1.0.3",
-		"@radix-ui/react-toast": "^1.1.5",
-		"@radix-ui/react-toggle": "^1.0.3",
-		"@radix-ui/react-toggle-group": "^1.0.4",
-		"@radix-ui/react-toolbar": "^1.0.4",
-		"@radix-ui/react-tooltip": "^1.0.7",
 		"@udecode/cn": "^31.0.0",
 		"@udecode/plate-autoformat": "^31.0.0",
 		"@udecode/plate-basic-marks": "^31.0.0",
@@ -75,8 +39,6 @@
 		"@udecode/plate-serializer-docx": "^31.1.2",
 		"@udecode/plate-serializer-md": "^31.0.0",
 		"autoprefixer": "^10.4.19",
-		"class-variance-authority": "^0.7.0",
-		"downshift": "^8.3.1",
 		"graphql": "^16.8.1",
 		"lucide-react": "^0.302.0",
 		"postcss": "^8.4.38",
@@ -85,12 +47,8 @@
 		"react-dnd": "^16.0.1",
 		"react-dnd-html5-backend": "^16.0.1",
 		"react-dom": "^18.3.1",
-		"slate": "^0.103.0",
-		"slate-history": "^0.100.0",
-		"slate-hyperscript": "^0.100.0",
-		"slate-react": "^0.102.0",
-		"tailwind-merge": "^2.3.0",
 		"tailwindcss": "^3.4.3",
-		"tailwindcss-animate": "^1.0.7"
+		"tailwindcss-animate": "^1.0.7",
+		"vite-tsconfig-paths": "^4.3.2"
 	}
 }
diff --git a/packages/react-ui-lib/api-extractor.json b/packages/react-ui-lib/api-extractor.json
new file mode 100644
index 0000000000..66c17dd719
--- /dev/null
+++ b/packages/react-ui-lib/api-extractor.json
@@ -0,0 +1,3 @@
+{
+	"extends": "../../build/api-extractor.json"
+}
diff --git a/packages/react-ui-lib/package.json b/packages/react-ui-lib/package.json
new file mode 100644
index 0000000000..3784553ddc
--- /dev/null
+++ b/packages/react-ui-lib/package.json
@@ -0,0 +1,98 @@
+{
+	"name": "@contember/react-ui-lib",
+	"license": "Apache-2.0",
+	"version": "0.0.0",
+	"type": "module",
+	"sideEffects": false,
+	"private": true,
+	"main": "./dist/production/index.js",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/types/index.d.ts",
+				"development": "./dist/development/index.js",
+				"production": "./dist/production/index.js",
+				"default": "./dist/production/index.js"
+			},
+			"require": {
+				"types": "./dist/types/index.d.ts",
+				"development": "./dist/development/index.cjs",
+				"production": "./dist/production/index.cjs",
+				"default": "./dist/production/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"dist/",
+		"src/"
+	],
+	"typings": "./dist/types/index.d.ts",
+	"scripts": {
+		"build": "yarn build:js:dev && yarn build:js:prod",
+		"build:js:dev": "vite build --mode development",
+		"build:js:prod": "vite build --mode production",
+		"ae:build": "api-extractor run --local",
+		"ae:test": "api-extractor run",
+		"test": "vitest"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/contember/interface.git",
+		"directory": "packages/react-ui-lib"
+	},
+	"dependencies": {
+		"@contember/graphql-client-tenant": "^1.3.7",
+		"@contember/interface": "workspace:*",
+		"@contember/react-block-repeater": "workspace:*",
+		"@contember/react-board": "workspace:*",
+		"@contember/react-board-dnd-kit": "workspace:*",
+		"@contember/react-client": "workspace:*",
+		"@contember/react-client-tenant": "workspace:*",
+		"@contember/react-dataview": "workspace:*",
+		"@contember/react-form": "workspace:*",
+		"@contember/react-identity": "workspace:*",
+		"@contember/react-multipass-rendering": "workspace:*",
+		"@contember/react-repeater": "workspace:*",
+		"@contember/react-repeater-dnd-kit": "workspace:*",
+		"@contember/react-routing": "workspace:*",
+		"@contember/react-select": "workspace:*",
+		"@contember/react-slate-editor": "workspace:*",
+		"@contember/react-slate-editor-base": "workspace:*",
+		"@contember/react-slots": "workspace:*",
+		"@contember/react-uploader": "workspace:*",
+		"@contember/react-uploader-dropzone": "workspace:*",
+		"@contember/react-utils": "workspace:*",
+		"@contember/utilities": "workspace:*",
+		"@dnd-kit/core": "^6.1.0",
+		"@dnd-kit/sortable": "^8.0.0",
+		"@radix-ui/react-alert-dialog": "^1.0.5",
+		"@radix-ui/react-dialog": "^1.0.5",
+		"@radix-ui/react-dropdown-menu": "^2.0.6",
+		"@radix-ui/react-label": "^2.0.2",
+		"@radix-ui/react-popover": "^1.0.7",
+		"@radix-ui/react-portal": "^1.0.4",
+		"@radix-ui/react-progress": "^1.0.3",
+		"@radix-ui/react-scroll-area": "^1.0.5",
+		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-switch": "^1.0.3",
+		"@radix-ui/react-toast": "^1.1.5",
+		"@radix-ui/react-toggle": "^1.0.3",
+		"@radix-ui/react-toggle-group": "^1.0.4",
+		"@radix-ui/react-tooltip": "^1.0.7",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.0.0",
+		"lucide-react": "^0.302.0",
+		"qrcode-generator": "^1.4.4",
+		"slate": "^0.103.0",
+		"slate-react": "^0.102.0",
+		"tailwind-merge": "^2.3.0"
+	},
+	"peerDependencies": {
+		"react": "^18 || ^19",
+		"react-dom": "^18 || ^19"
+	},
+	"devDependencies": {
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
+	}
+}
diff --git a/packages/playground/admin/lib/components/binding/binding.tsx b/packages/react-ui-lib/src/binding/binding.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/binding/binding.tsx
rename to packages/react-ui-lib/src/binding/binding.tsx
diff --git a/packages/playground/admin/lib/components/binding/delete.tsx b/packages/react-ui-lib/src/binding/delete.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/binding/delete.tsx
rename to packages/react-ui-lib/src/binding/delete.tsx
index 1a0afaff4b..9d1a05de9a 100644
--- a/packages/playground/admin/lib/components/binding/delete.tsx
+++ b/packages/react-ui-lib/src/binding/delete.tsx
@@ -14,7 +14,7 @@ import * as React from 'react'
 import { ReactElement } from 'react'
 import { DeleteEntityTrigger } from '@contember/interface'
 import { FeedbackTrigger } from './persist'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 
 export const DeleteEntityDialog = ({ trigger, immediatePersist }: { trigger: ReactElement, immediatePersist?: boolean }) => {
 	return (
diff --git a/packages/react-ui-lib/src/binding/hooks.tsx b/packages/react-ui-lib/src/binding/hooks.tsx
new file mode 100644
index 0000000000..49598f3d55
--- /dev/null
+++ b/packages/react-ui-lib/src/binding/hooks.tsx
@@ -0,0 +1,71 @@
+import { ReactNode, useCallback } from 'react'
+import { dict } from '../dict'
+import { ToastContent, useShowToast } from '../toast'
+import { ErrorAccessor, ErrorPersistResult, SuccessfulPersistResult, usePersist } from '@contember/interface'
+import { useErrorFormatter } from '../errors'
+
+export const usePersistWithFeedback = () => {
+	const triggerPersist = usePersist()
+	const { onPersistSuccess, onPersistError } = usePersistFeedbackHandlers()
+	return useCallback(() => {
+		return triggerPersist()
+			.then(onPersistSuccess)
+			.catch(onPersistError)
+	}, [onPersistError, onPersistSuccess, triggerPersist])
+}
+
+
+export const usePersistFeedbackHandlers = () => {
+	return {
+		onPersistError: usePersistErrorHandler(),
+		onPersistSuccess: usePersistSuccessHandler(),
+	}
+}
+
+export const usePersistErrorHandler = () => {
+	const showToast = useShowToast()
+	const errorFormatter = useErrorFormatter()
+	return useCallback((result: ErrorPersistResult) => {
+		if (result.type === 'invalidInput') {
+			const errorList = errorFormatter(result.errors)
+			showToast(
+				<ToastContent
+					title={dict.persist.invalidInputError}
+					children={<ul>{errorList.map((it, i) => <li key={i}>{it}</li>)}</ul>}
+					details={result.response?.errorMessage}
+				/>, {
+					type: 'error',
+				})
+		} else if (result.type === 'invalidResponse') {
+			showToast(
+				<ToastContent
+					title={dict.persist.invalidResponseError}
+					children={dict.persist.invalidResponseErrorDetails}
+				/>, {
+					type: 'error',
+				},
+			)
+		}
+	}, [errorFormatter, showToast])
+}
+
+export const usePersistSuccessHandler = () => {
+	const showToast = useShowToast()
+
+	return useCallback((result: SuccessfulPersistResult) => {
+		showToast(
+			<ToastContent
+				title={dict.persist.success}
+			/>, {
+				type: 'success',
+			})
+		if (result.type === 'justSuccess' && result.afterPersistError) {
+			showToast(
+				<ToastContent
+					title={dict.persist.afterPersistError}
+				/>, {
+					type: 'warning',
+				})
+		}
+	}, [showToast])
+}
diff --git a/packages/playground/admin/lib/components/binding/identity.tsx b/packages/react-ui-lib/src/binding/identity.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/binding/identity.tsx
rename to packages/react-ui-lib/src/binding/identity.tsx
index 25efdd9eac..e97a728546 100644
--- a/packages/playground/admin/lib/components/binding/identity.tsx
+++ b/packages/react-ui-lib/src/binding/identity.tsx
@@ -1,6 +1,6 @@
 import { IdentityState } from '@contember/react-identity'
 import { Loader } from '../ui/loader'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 
 export const IdentityLoader = ({ children }: {
 	children: React.ReactNode
diff --git a/packages/playground/admin/lib/components/binding/index.ts b/packages/react-ui-lib/src/binding/index.ts
similarity index 81%
rename from packages/playground/admin/lib/components/binding/index.ts
rename to packages/react-ui-lib/src/binding/index.ts
index 928a382f2c..259f2355db 100644
--- a/packages/playground/admin/lib/components/binding/index.ts
+++ b/packages/react-ui-lib/src/binding/index.ts
@@ -1,4 +1,5 @@
 export * from './binding'
 export * from './delete'
+export * from './hooks'
 export * from './identity'
 export * from './persist'
diff --git a/packages/react-ui-lib/src/binding/persist.tsx b/packages/react-ui-lib/src/binding/persist.tsx
new file mode 100644
index 0000000000..a3fc06be89
--- /dev/null
+++ b/packages/react-ui-lib/src/binding/persist.tsx
@@ -0,0 +1,70 @@
+import { PersistTrigger, SugaredRelativeSingleField, useField } from '@contember/interface'
+import { Button } from '../ui/button'
+import { Loader } from '../ui/loader'
+import { ReactElement, ReactNode, useEffect } from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { usePersist } from '@contember/interface'
+import { dict } from '../dict'
+import { usePersistErrorHandler, usePersistFeedbackHandlers, usePersistWithFeedback } from './hooks'
+
+export const FeedbackTrigger = (props: { children: ReactElement }) => {
+	return <Slot {...props} {...usePersistFeedbackHandlers()} />
+}
+
+export const PersistButton = ({ label }: {
+	label?: ReactNode
+}) => {
+	return (
+		<FeedbackTrigger>
+			<PersistTrigger>
+				<Button className="group">
+					<Loader size="sm" position="absolute" className="hidden group-data-[loading]:block" />
+					{label ?? dict.persist.persistButton}
+				</Button>
+			</PersistTrigger>
+		</FeedbackTrigger>
+	)
+}
+
+
+export const PersistOnCmdS = () => {
+	const persist = usePersistWithFeedback()
+	useEffect(() => {
+		const listener = (event: KeyboardEvent) => {
+			if (event.ctrlKey && event.key === 's') {
+				event.preventDefault()
+				persist()
+			}
+		}
+		document.body.addEventListener('keydown', listener)
+		return () => document.body.removeEventListener('keydown', listener)
+	}, [persist])
+
+	return null
+}
+
+
+export const PersistOnFieldChange = ({ field }: {
+	field: SugaredRelativeSingleField['field']
+}) => {
+	const triggerPersist = usePersist()
+	const onError = usePersistErrorHandler()
+	const getField = useField(field).getAccessor
+	useEffect(() => {
+		let persisting = false
+		return getField().addEventListener({ type: 'update' }, async field => {
+			if (persisting || field.value === field.valueOnServer) {
+				return
+			}
+			persisting = true
+			try {
+				await Promise.resolve()
+				await triggerPersist().catch(onError)
+			} finally {
+				persisting = false
+			}
+		})
+	}, [getField, onError, triggerPersist])
+
+	return null
+}
diff --git a/packages/playground/admin/lib/components/block-repeater.tsx b/packages/react-ui-lib/src/block-repeater/block-repeater.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/block-repeater.tsx
rename to packages/react-ui-lib/src/block-repeater/block-repeater.tsx
index 1902522946..f6bb1fce0c 100644
--- a/packages/playground/admin/lib/components/block-repeater.tsx
+++ b/packages/react-ui-lib/src/block-repeater/block-repeater.tsx
@@ -1,20 +1,19 @@
 import { Component, DeleteEntityTrigger, PersistTrigger, StaticRender, useEntity } from '@contember/interface'
 import { RepeaterSortable, RepeaterSortableDragOverlay, RepeaterSortableEachItem, RepeaterSortableItemActivator, RepeaterSortableItemNode } from '@contember/react-repeater-dnd-kit'
 import { GripVerticalIcon, PlusCircleIcon, TrashIcon } from 'lucide-react'
-import { Button } from './ui/button'
-import { uic } from '../utils/uic'
-import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle } from './ui/sheet'
+import { Button } from '../ui/button'
+import { uic } from '../utils'
+import { Sheet, SheetClose, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../ui/sheet'
 import { BlockRepeater, BlockRepeaterAddItemTrigger, BlockRepeaterProps, useBlockRepeaterConfig, useBlockRepeaterCurrentBlock } from '@contember/react-block-repeater'
-import { RepeaterDropIndicator, RepeaterRemoveItemButton } from './repeater'
+import { RepeaterDropIndicator, RepeaterRemoveItemButton } from '../repeater'
 import { RepeaterAddItemIndex, RepeaterEmpty } from '@contember/react-repeater'
 import { dict } from '../dict'
-import { FeedbackTrigger } from './binding'
+import { FeedbackTrigger } from '../binding'
 import { createRequiredContext } from '@contember/react-utils'
-import { useEffect, useId, useState } from 'react'
-import { Label } from './ui/label'
-import { Switch } from './ui/switch'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from './ui/dropdown'
-import { cn } from '../utils/cn'
+import { useId, useState } from 'react'
+import { Label } from '../ui/label'
+import { Switch } from '../ui/switch'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown'
 
 export const BlockRepeaterItemsWrapperUI = uic('div', {
 	baseClass: 'rounded border border-gray-300 px-4 py-8 flex flex-col',
diff --git a/packages/react-ui-lib/src/block-repeater/index.ts b/packages/react-ui-lib/src/block-repeater/index.ts
new file mode 100644
index 0000000000..5b44d8a7cc
--- /dev/null
+++ b/packages/react-ui-lib/src/block-repeater/index.ts
@@ -0,0 +1 @@
+export * from './block-repeater'
diff --git a/packages/playground/admin/lib/components/board.tsx b/packages/react-ui-lib/src/board/board.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/board.tsx
rename to packages/react-ui-lib/src/board/board.tsx
index 680a7ac151..d2af920a4a 100644
--- a/packages/playground/admin/lib/components/board.tsx
+++ b/packages/react-ui-lib/src/board/board.tsx
@@ -10,20 +10,12 @@ import {
 	BoardSortableNode,
 	BoardSortableNullColumn,
 } from '@contember/react-board-dnd-kit'
-import {
-	Board,
-	BoardColumn,
-	BoardEachColumn,
-	BoardEachItem,
-	BoardItem,
-	BoardNullColumn,
-	BoardProps,
-} from '@contember/react-board'
+import { Board, BoardColumn, BoardEachColumn, BoardEachItem, BoardItem, BoardNullColumn, BoardProps } from '@contember/react-board'
 import { GripHorizontal, GripIcon } from 'lucide-react'
 import { Component } from '@contember/interface'
 import { ReactNode } from 'react'
-import { uic } from '../../lib/utils/uic'
-import { DropIndicator } from './ui/sortable'
+import { uic } from '../utils'
+import { DropIndicator } from '../ui/sortable'
 
 export const BoardWrapperUI = uic('div', {
 	baseClass: 'flex gap-4 max-w-full overflow-x-auto -mx-2 px-2 pb-4',
diff --git a/packages/react-ui-lib/src/board/index.ts b/packages/react-ui-lib/src/board/index.ts
new file mode 100644
index 0000000000..2ef36be7eb
--- /dev/null
+++ b/packages/react-ui-lib/src/board/index.ts
@@ -0,0 +1 @@
+export * from './board'
diff --git a/packages/playground/admin/lib/components/back-button.tsx b/packages/react-ui-lib/src/buttons/back-button.tsx
similarity index 87%
rename from packages/playground/admin/lib/components/back-button.tsx
rename to packages/react-ui-lib/src/buttons/back-button.tsx
index f005f6a3fd..81a70eec4b 100644
--- a/packages/playground/admin/lib/components/back-button.tsx
+++ b/packages/react-ui-lib/src/buttons/back-button.tsx
@@ -1,4 +1,4 @@
-import { Button } from '../../lib/components/ui/button'
+import { Button } from '../ui/button'
 import { ArrowLeftIcon } from 'lucide-react'
 import { dict } from '../dict'
 
diff --git a/packages/react-ui-lib/src/buttons/index.ts b/packages/react-ui-lib/src/buttons/index.ts
new file mode 100644
index 0000000000..d9fb12526c
--- /dev/null
+++ b/packages/react-ui-lib/src/buttons/index.ts
@@ -0,0 +1,2 @@
+export * from './back-button'
+export * from './link-back-button'
diff --git a/packages/playground/admin/lib/components/actions.tsx b/packages/react-ui-lib/src/buttons/link-back-button.tsx
similarity index 85%
rename from packages/playground/admin/lib/components/actions.tsx
rename to packages/react-ui-lib/src/buttons/link-back-button.tsx
index 8b20bdb156..33f3779053 100644
--- a/packages/playground/admin/lib/components/actions.tsx
+++ b/packages/react-ui-lib/src/buttons/link-back-button.tsx
@@ -1,8 +1,8 @@
 import { ReactNode } from 'react'
-import { AnchorButton } from './ui/button'
+import { AnchorButton } from '../ui/button'
 import { ArrowLeftIcon } from 'lucide-react'
 import { Link, RoutingLinkTarget } from '@contember/react-routing'
-import { Slots } from './slots'
+import { Slots } from '../layout'
 
 export const LinkBackButton = ({ children, to }: {
 	children: ReactNode
diff --git a/packages/playground/admin/lib/components/datagrid/cells.tsx b/packages/react-ui-lib/src/datagrid/cells.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/datagrid/cells.tsx
rename to packages/react-ui-lib/src/datagrid/cells.tsx
diff --git a/packages/playground/admin/lib/components/datagrid/column-header.tsx b/packages/react-ui-lib/src/datagrid/column-header.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/datagrid/column-header.tsx
rename to packages/react-ui-lib/src/datagrid/column-header.tsx
index 2b54944ae7..e07e6b5ae5 100644
--- a/packages/playground/admin/lib/components/datagrid/column-header.tsx
+++ b/packages/react-ui-lib/src/datagrid/column-header.tsx
@@ -1,10 +1,10 @@
-import { cn } from '../../utils/cn'
+import { cn } from '../utils'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown'
 import { Button } from '../ui/button'
 import { ReactNode } from 'react'
 import { ArrowDownAZIcon, ArrowUpDownIcon, ArrowUpZaIcon, EyeOffIcon } from 'lucide-react'
-import { DataViewVisibilityTrigger, DataViewSortingSwitch, DataViewSortingTrigger } from '@contember/react-dataview'
-import { dict } from '../../dict'
+import { DataViewSortingSwitch, DataViewSortingTrigger, DataViewVisibilityTrigger } from '@contember/react-dataview'
+import { dict } from '../dict'
 
 
 export function DataGridColumnHeader<TData, TValue>({ sortingField, hidingName, children }: {
diff --git a/packages/playground/admin/lib/components/datagrid/columns.tsx b/packages/react-ui-lib/src/datagrid/columns.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/datagrid/columns.tsx
rename to packages/react-ui-lib/src/datagrid/columns.tsx
index 4b06883af1..7734b61d69 100644
--- a/packages/playground/admin/lib/components/datagrid/columns.tsx
+++ b/packages/react-ui-lib/src/datagrid/columns.tsx
@@ -4,7 +4,7 @@ import { ReactNode } from 'react'
 import { TableCell, TableHead } from '../ui/table'
 import { DataGridColumnHeader } from './column-header'
 import { DataViewElement } from '@contember/react-dataview'
-import { formatBoolean, formatDate, formatNumber } from '../../utils/formatting'
+import { formatBoolean, formatDate, formatNumber } from '../formatting'
 import { DataGridEnumCell, DataGridHasManyCell, DataGridHasManyCellProps, DataGridHasOneCell, DataGridHasOneCellProps } from './cells'
 
 export const DataGridActionColumn = Component<{ children: ReactNode }>(({ children }) => (
diff --git a/packages/playground/admin/lib/components/datagrid/elements.tsx b/packages/react-ui-lib/src/datagrid/elements.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/datagrid/elements.tsx
rename to packages/react-ui-lib/src/datagrid/elements.tsx
index 77c2bd10d4..afa1356645 100644
--- a/packages/playground/admin/lib/components/datagrid/elements.tsx
+++ b/packages/react-ui-lib/src/datagrid/elements.tsx
@@ -1,5 +1,5 @@
 import { EyeIcon, EyeOffIcon } from 'lucide-react'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 import * as React from 'react'
 import { ReactNode } from 'react'
 import { DataViewVisibilityTrigger, useDataViewElements } from '@contember/react-dataview'
diff --git a/packages/playground/admin/lib/components/datagrid/empty.tsx b/packages/react-ui-lib/src/datagrid/empty.tsx
similarity index 82%
rename from packages/playground/admin/lib/components/datagrid/empty.tsx
rename to packages/react-ui-lib/src/datagrid/empty.tsx
index 47b3912da6..d5d352ff5c 100644
--- a/packages/playground/admin/lib/components/datagrid/empty.tsx
+++ b/packages/react-ui-lib/src/datagrid/empty.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 
 export const DataGridNoResults = () => (
 	<div className={'p-4 text-lg rounded-md border'}>
diff --git a/packages/playground/admin/lib/components/datagrid/export.tsx b/packages/react-ui-lib/src/datagrid/export.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/datagrid/export.tsx
rename to packages/react-ui-lib/src/datagrid/export.tsx
index dee938b046..b046bb93bb 100644
--- a/packages/playground/admin/lib/components/datagrid/export.tsx
+++ b/packages/react-ui-lib/src/datagrid/export.tsx
@@ -3,7 +3,7 @@ import { DownloadIcon } from 'lucide-react'
 import { DataViewExportTrigger } from '@contember/react-dataview'
 import * as React from 'react'
 import { ReactNode, useMemo } from 'react'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 
 export const DataGridAutoExport = ({ fields }: { fields?: ReactNode }) => {
 	return (
diff --git a/packages/playground/admin/lib/components/datagrid/filters/boolean.tsx b/packages/react-ui-lib/src/datagrid/filters/boolean.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/datagrid/filters/boolean.tsx
rename to packages/react-ui-lib/src/datagrid/filters/boolean.tsx
index 92e50f20cf..f4c0f7758c 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/boolean.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/boolean.tsx
@@ -4,9 +4,9 @@ import { DataViewBooleanFilter, DataViewBooleanFilterProps, DataViewBooleanFilte
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
 import { DataGridActiveFilterUI, DataGridFilterSelectTriggerUI, DataGridSingleFilterUI } from '../ui'
 import { DataGridNullFilter } from './common'
-import { formatBoolean } from '../../../utils/formatting'
+import { formatBoolean } from '../../formatting'
 import { Button } from '../../ui/button'
-import { dict } from '../../../dict'
+import { dict } from '../../dict'
 import { Component } from '@contember/interface'
 import { DataGridFilterMobileHiding } from './mobile'
 
diff --git a/packages/playground/admin/lib/components/datagrid/filters/common.tsx b/packages/react-ui-lib/src/datagrid/filters/common.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/datagrid/filters/common.tsx
rename to packages/react-ui-lib/src/datagrid/filters/common.tsx
index ff553cb02c..0f842923ef 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/common.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/common.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useCallback } from 'react'
 import { useDataViewFilterName, useDataViewNullFilter } from '@contember/react-dataview'
 import { DataGridFilterSelectItemUI } from '../ui'
-import { dict } from '../../../dict'
+import { dict } from '../../dict'
 
 export const DataGridNullFilter = ({ name }: {
 	name?: string
diff --git a/packages/playground/admin/lib/components/datagrid/filters/date.tsx b/packages/react-ui-lib/src/datagrid/filters/date.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/datagrid/filters/date.tsx
rename to packages/react-ui-lib/src/datagrid/filters/date.tsx
index 06e2842f3a..f4296ee20c 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/date.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/date.tsx
@@ -5,8 +5,8 @@ import { Component } from '@contember/interface'
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
 import { DataGridActiveFilterUI, DataGridFilterSelectTriggerUI, DataGridSingleFilterUI } from '../ui'
 import { Input } from '../../ui/input'
-import { formatDate } from '../../../utils/formatting'
-import { dict } from '../../../dict'
+import { formatDate } from '../../formatting/formatting'
+import { dict } from '../../dict'
 import { DataGridNullFilter } from './common'
 import { DataGridFilterMobileHiding } from './mobile'
 import { Button } from '../../ui/button'
diff --git a/packages/playground/admin/lib/components/datagrid/filters/enum.tsx b/packages/react-ui-lib/src/datagrid/filters/enum.tsx
similarity index 99%
rename from packages/playground/admin/lib/components/datagrid/filters/enum.tsx
rename to packages/react-ui-lib/src/datagrid/filters/enum.tsx
index e96971a2e8..7fbc0d03b2 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/enum.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/enum.tsx
@@ -6,7 +6,7 @@ import { Component } from '@contember/interface'
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
 import { DataGridActiveFilterUI, DataGridExcludeActionButtonUI, DataGridFilterActionButtonUI, DataGridFilterSelectItemUI, DataGridFilterSelectTriggerUI, DataGridSingleFilterUI } from '../ui'
 import { DataGridNullFilter } from './common'
-import { dict } from '../../../dict'
+import { dict } from '../../dict'
 import { DataGridFilterMobileHiding } from './mobile'
 
 export type DataGridEnumFilterProps =
diff --git a/packages/playground/admin/lib/components/datagrid/filters/index.ts b/packages/react-ui-lib/src/datagrid/filters/index.ts
similarity index 100%
rename from packages/playground/admin/lib/components/datagrid/filters/index.ts
rename to packages/react-ui-lib/src/datagrid/filters/index.ts
diff --git a/packages/playground/admin/lib/components/datagrid/filters/mobile.tsx b/packages/react-ui-lib/src/datagrid/filters/mobile.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/datagrid/filters/mobile.tsx
rename to packages/react-ui-lib/src/datagrid/filters/mobile.tsx
diff --git a/packages/playground/admin/lib/components/datagrid/filters/number.tsx b/packages/react-ui-lib/src/datagrid/filters/number.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/datagrid/filters/number.tsx
rename to packages/react-ui-lib/src/datagrid/filters/number.tsx
index f0390eae4c..f8174b3beb 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/number.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/number.tsx
@@ -14,8 +14,8 @@ import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
 import { DataGridActiveFilterUI, DataGridFilterSelectTriggerUI, DataGridSingleFilterUI } from '../ui'
 import { DataGridNullFilter } from './common'
 import { Input } from '../../ui/input'
-import { formatNumber } from '../../../utils/formatting'
-import { dict } from '../../../dict'
+import { formatNumber } from '../../formatting'
+import { dict } from '../../dict'
 import { Component } from '@contember/interface'
 import { DataGridFilterMobileHiding } from './mobile'
 
diff --git a/packages/playground/admin/lib/components/datagrid/filters/relation.tsx b/packages/react-ui-lib/src/datagrid/filters/relation.tsx
similarity index 99%
rename from packages/playground/admin/lib/components/datagrid/filters/relation.tsx
rename to packages/react-ui-lib/src/datagrid/filters/relation.tsx
index 6eaada0519..60398b4d38 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/relation.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/relation.tsx
@@ -19,7 +19,7 @@ import { Popover, PopoverTrigger } from '../../ui/popover'
 import { DataGridActiveFilterUI, DataGridExcludeActionButtonUI, DataGridFilterActionButtonUI, DataGridFilterSelectItemUI, DataGridFilterSelectTriggerUI, DataGridSingleFilterUI } from '../ui'
 import { DataGridNullFilter } from './common'
 import { SelectDefaultFilter, SelectListInner, SelectPopoverContent } from '../../select'
-import { dict } from '../../../dict'
+import { dict } from '../../dict'
 import { DataGridFilterMobileHiding } from './mobile'
 
 
diff --git a/packages/playground/admin/lib/components/datagrid/filters/text.tsx b/packages/react-ui-lib/src/datagrid/filters/text.tsx
similarity index 99%
rename from packages/playground/admin/lib/components/datagrid/filters/text.tsx
rename to packages/react-ui-lib/src/datagrid/filters/text.tsx
index 2aaa3b9c79..5baf4ffbdd 100644
--- a/packages/playground/admin/lib/components/datagrid/filters/text.tsx
+++ b/packages/react-ui-lib/src/datagrid/filters/text.tsx
@@ -21,7 +21,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
 import { DataGridActiveFilterUI } from '../ui'
 import { DataGridNullFilter } from './common'
-import { dict } from '../../../dict'
+import { dict } from '../../dict'
 import { Component } from '@contember/interface'
 import { DataGridFilterMobileHiding } from './mobile'
 
diff --git a/packages/playground/admin/lib/components/datagrid/grid.tsx b/packages/react-ui-lib/src/datagrid/grid.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/datagrid/grid.tsx
rename to packages/react-ui-lib/src/datagrid/grid.tsx
diff --git a/packages/playground/admin/lib/components/datagrid/index.ts b/packages/react-ui-lib/src/datagrid/index.ts
similarity index 100%
rename from packages/playground/admin/lib/components/datagrid/index.ts
rename to packages/react-ui-lib/src/datagrid/index.ts
diff --git a/packages/playground/admin/lib/components/datagrid/layout-switcher.tsx b/packages/react-ui-lib/src/datagrid/layout-switcher.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/datagrid/layout-switcher.tsx
rename to packages/react-ui-lib/src/datagrid/layout-switcher.tsx
index ae40c0f54c..3f36a433a4 100644
--- a/packages/playground/admin/lib/components/datagrid/layout-switcher.tsx
+++ b/packages/react-ui-lib/src/datagrid/layout-switcher.tsx
@@ -1,8 +1,8 @@
 import { DataViewLayoutTrigger, useDataViewSelectionState } from '@contember/react-dataview'
 import { Button } from '../ui/button'
 import * as React from 'react'
-import { dict } from '../../dict'
-import { uic } from '../../utils/uic'
+import { dict } from '../dict'
+import { uic } from '../utils/uic'
 
 const LayoutSwitchButton = uic(Button, {
 	baseClass: 'data-[active]:text-blue-600 data-[active]:bg-gray-50 data-[active]:shadow-inner gap-2 flex-1',
diff --git a/packages/playground/admin/lib/components/datagrid/loader.tsx b/packages/react-ui-lib/src/datagrid/loader.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/datagrid/loader.tsx
rename to packages/react-ui-lib/src/datagrid/loader.tsx
diff --git a/packages/playground/admin/lib/components/datagrid/pagination.tsx b/packages/react-ui-lib/src/datagrid/pagination.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/datagrid/pagination.tsx
rename to packages/react-ui-lib/src/datagrid/pagination.tsx
index a825aa5ea7..fa86807e27 100644
--- a/packages/playground/admin/lib/components/datagrid/pagination.tsx
+++ b/packages/react-ui-lib/src/datagrid/pagination.tsx
@@ -4,8 +4,8 @@ import { Button } from '../ui/button'
 import { DataViewChangePageTrigger, DataViewPagingStateView, DataViewSetItemsPerPageTrigger } from '@contember/react-dataview'
 import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
 import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown'
-import { dictFormat } from '../../utils/dictFormat'
-import { dict } from '../../dict'
+import { dictFormat } from '../dict'
+import { dict } from '../dict'
 
 export const DataGridPagination = () => (
 	<div className="flex gap-6 lg:gap-8 justify-between mt-4">
diff --git a/packages/playground/admin/lib/components/datagrid/table.tsx b/packages/react-ui-lib/src/datagrid/table.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/datagrid/table.tsx
rename to packages/react-ui-lib/src/datagrid/table.tsx
index ce7073dbc5..182d1655ad 100644
--- a/packages/playground/admin/lib/components/datagrid/table.tsx
+++ b/packages/react-ui-lib/src/datagrid/table.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import { Fragment, ReactNode, useState } from 'react'
 import { DataViewEachRow, DataViewLayout } from '@contember/react-dataview'
 import { SheetIcon } from 'lucide-react'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 import { ChildrenAnalyzer, Leaf } from '@contember/react-multipass-rendering'
 import { DataGridColumnLeaf, DataGridColumnLeafProps } from './columns'
 
diff --git a/packages/playground/admin/lib/components/datagrid/tiles.tsx b/packages/react-ui-lib/src/datagrid/tiles.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/datagrid/tiles.tsx
rename to packages/react-ui-lib/src/datagrid/tiles.tsx
index 4c65161edb..0154941841 100644
--- a/packages/playground/admin/lib/components/datagrid/tiles.tsx
+++ b/packages/react-ui-lib/src/datagrid/tiles.tsx
@@ -1,7 +1,7 @@
 import { Component } from '@contember/interface'
 import { DataViewEachRow, DataViewLayout } from '@contember/react-dataview'
 import * as React from 'react'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 import { LayoutGridIcon } from 'lucide-react'
 
 export interface DataGridTilesProps {
diff --git a/packages/playground/admin/lib/components/datagrid/toolbar.tsx b/packages/react-ui-lib/src/datagrid/toolbar.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/datagrid/toolbar.tsx
rename to packages/react-ui-lib/src/datagrid/toolbar.tsx
index 4ae4e281aa..66a030d765 100644
--- a/packages/playground/admin/lib/components/datagrid/toolbar.tsx
+++ b/packages/react-ui-lib/src/datagrid/toolbar.tsx
@@ -10,7 +10,7 @@ import { DataGridLayoutSwitcher } from './layout-switcher'
 import { DataGridPerPageSelector } from './pagination'
 import { DataGridQueryFilter } from './filters'
 import { dataAttribute } from '@contember/utilities'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 import { DataGridAutoExport } from './export'
 import { DataGridToolbarVisibleElements } from './elements'
 
diff --git a/packages/playground/admin/lib/components/datagrid/ui.tsx b/packages/react-ui-lib/src/datagrid/ui.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/datagrid/ui.tsx
rename to packages/react-ui-lib/src/datagrid/ui.tsx
index 4bf0e67a38..059739e3f0 100644
--- a/packages/playground/admin/lib/components/datagrid/ui.tsx
+++ b/packages/react-ui-lib/src/datagrid/ui.tsx
@@ -2,9 +2,9 @@ import * as React from 'react'
 import { forwardRef, ReactEventHandler, ReactNode, useCallback } from 'react'
 import { CheckSquareIcon, FilterIcon, FilterXIcon, PlusIcon, SquareIcon, XIcon } from 'lucide-react'
 import { Button } from '../ui/button'
-import { cn } from '../../utils/cn'
-import { dict } from '../../dict'
-import { uic } from '../../utils/uic'
+import { cn } from '../utils/cn'
+import { dict } from '../dict'
+import { uic } from '../utils/uic'
 
 export const DataGridTooltipLabel = uic('span', {
 	baseClass: 'cursor-pointer border-dashed border-b border-b-gray-400 hover:border-gray-800',
diff --git a/packages/react-ui-lib/src/dev/index.ts b/packages/react-ui-lib/src/dev/index.ts
new file mode 100644
index 0000000000..90b4848461
--- /dev/null
+++ b/packages/react-ui-lib/src/dev/index.ts
@@ -0,0 +1,2 @@
+export * from './login-panel'
+export * from './todo'
diff --git a/packages/playground/admin/lib/components/dev/login-panel.tsx b/packages/react-ui-lib/src/dev/login-panel.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/dev/login-panel.tsx
rename to packages/react-ui-lib/src/dev/login-panel.tsx
index b94a8ffe1e..0db5717655 100644
--- a/packages/playground/admin/lib/components/dev/login-panel.tsx
+++ b/packages/react-ui-lib/src/dev/login-panel.tsx
@@ -2,7 +2,7 @@ import { Button } from '../ui/button'
 import { useSessionTokenWithMeta, useSetSessionToken } from '@contember/react-client'
 import { CreateSessionTokenForm, useCreateSessionTokenForm } from '@contember/react-client-tenant'
 import { Loader } from '../ui/loader'
-import { TenantFormError, TenantFormField } from '../tenant/common'
+import { TenantFormError, TenantFormField } from '../tenant/forms/common'
 
 export const LoginWithEmail = () => {
 	const sessionToken = useSessionTokenWithMeta()
diff --git a/packages/playground/admin/lib/components/dev/todo.tsx b/packages/react-ui-lib/src/dev/todo.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/dev/todo.tsx
rename to packages/react-ui-lib/src/dev/todo.tsx
diff --git a/packages/playground/admin/lib/dict.ts b/packages/react-ui-lib/src/dict.ts
similarity index 97%
rename from packages/playground/admin/lib/dict.ts
rename to packages/react-ui-lib/src/dict.ts
index e4ef67d6db..5219577910 100644
--- a/packages/playground/admin/lib/dict.ts
+++ b/packages/react-ui-lib/src/dict.ts
@@ -1,5 +1,5 @@
 import { TextFilterArtifactsMatchMode } from '@contember/react-dataview'
-import { InviteErrorCodes } from './hooks/useInvite'
+import { InviteErrorCodes } from './tenant/hooks/useInvite'
 import { UploaderErrorType } from '@contember/react-uploader'
 import { ChangeMyPasswordFormErrorCode, CreateApiKeyFormErrorCode } from '@contember/interface'
 import { InviteFormErrorCode, LoginFormErrorCode, OtpPrepareFormErrorCode, OtpConfirmFormErrorCode, PasswordResetFormErrorCode, PasswordResetRequestFormErrorCode, UpdateProjectMemberFormErrorCode } from '@contember/react-identity'
@@ -311,3 +311,6 @@ export const dict = {
 		},
 	},
 }
+export const dictFormat = (value: string, replacements: Record<string, string>) => {
+	return value.replace(/\${([^}]+)}/g, (_, key) => replacements[key] || '')
+}
diff --git a/packages/playground/admin/lib/components/dimensions.tsx b/packages/react-ui-lib/src/dimensions/dimensions.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/dimensions.tsx
rename to packages/react-ui-lib/src/dimensions/dimensions.tsx
index 726cf79e3c..226da142b1 100644
--- a/packages/playground/admin/lib/components/dimensions.tsx
+++ b/packages/react-ui-lib/src/dimensions/dimensions.tsx
@@ -17,9 +17,9 @@ import { DataView, DataViewEachRow, DataViewLoaderState, DataViewSortingDirectio
 import * as React from 'react'
 import { ReactNode, useMemo } from 'react'
 import { CheckIcon } from 'lucide-react'
-import { Loader } from './ui/loader'
-import { Popover, PopoverContent, PopoverTrigger } from './ui/popover'
-import { Button } from './ui/button'
+import { Loader } from '../ui/loader'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
+import { Button } from '../ui/button'
 
 export interface DimensionsSwitcherProps {
 	options: SugaredQualifiedEntityList['entities']
diff --git a/packages/react-ui-lib/src/dimensions/index.ts b/packages/react-ui-lib/src/dimensions/index.ts
new file mode 100644
index 0000000000..b5aa3d284d
--- /dev/null
+++ b/packages/react-ui-lib/src/dimensions/index.ts
@@ -0,0 +1 @@
+export * from './dimensions'
diff --git a/packages/playground/admin/lib-extra/editor/new/BlockEditor.tsx b/packages/react-ui-lib/src/editor/block-editor.tsx
similarity index 94%
rename from packages/playground/admin/lib-extra/editor/new/BlockEditor.tsx
rename to packages/react-ui-lib/src/editor/block-editor.tsx
index 28a14b0de4..9eb4843ba5 100644
--- a/packages/playground/admin/lib-extra/editor/new/BlockEditor.tsx
+++ b/packages/react-ui-lib/src/editor/block-editor.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useCallback, useMemo } from 'react'
-import { EditorCanvas } from '../common/EditorCanvas'
-import { EditableCanvas } from '../common/EditableCanvas'
+import { EditorCanvas } from './common/editor-canvas'
+import { EditorEditableCanvas } from './common/editor-editable-canvas'
 import { BlockEditor, BlockEditorProps, withReferences } from '@contember/react-slate-editor'
 import { Component, SugaredRelativeEntityList, SugaredRelativeSingleField } from '@contember/interface'
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
@@ -90,7 +90,7 @@ export const BlockEditorInner = ({ children, placeholder }: {
 
 	return (
 		<EditorCanvas
-			underlyingComponent={EditableCanvas}
+			underlyingComponent={EditorEditableCanvas}
 			componentProps={{
 				renderElement: editor.renderElement,
 				renderLeaf: editor.renderLeaf,
diff --git a/packages/playground/admin/lib-extra/editor/common/baseEditorPlugins.tsx b/packages/react-ui-lib/src/editor/common/baseEditorPlugins.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/baseEditorPlugins.tsx
rename to packages/react-ui-lib/src/editor/common/baseEditorPlugins.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/buttons.tsx b/packages/react-ui-lib/src/editor/common/buttons.tsx
similarity index 99%
rename from packages/playground/admin/lib-extra/editor/common/buttons.tsx
rename to packages/react-ui-lib/src/editor/common/buttons.tsx
index 4f7dc7f8c1..7dbf6f1aa2 100644
--- a/packages/playground/admin/lib-extra/editor/common/buttons.tsx
+++ b/packages/react-ui-lib/src/editor/common/buttons.tsx
@@ -20,7 +20,7 @@ import {
 } from '@contember/react-slate-editor-base'
 import * as React from 'react'
 import { ReactNode } from 'react'
-import { Toggle } from '../../../lib/components/ui/toggle'
+import { Toggle } from '../../ui/toggle'
 import {
 	AlignCenterIcon,
 	AlignJustifyIcon,
diff --git a/packages/playground/admin/lib-extra/editor/common/BlockToolbar.tsx b/packages/react-ui-lib/src/editor/common/editor-block-toolbar.tsx
similarity index 70%
rename from packages/playground/admin/lib-extra/editor/common/BlockToolbar.tsx
rename to packages/react-ui-lib/src/editor/common/editor-block-toolbar.tsx
index 5d7758f708..9a1df81e56 100644
--- a/packages/playground/admin/lib-extra/editor/common/BlockToolbar.tsx
+++ b/packages/react-ui-lib/src/editor/common/editor-block-toolbar.tsx
@@ -1,12 +1,12 @@
 import { memo, ReactNode } from 'react'
 import { useSlateSelection } from 'slate-react'
-import { cn } from '../../../lib/utils/cn'
+import { cn } from '../../utils'
 
-export interface HoveringToolbarsProps {
+export interface EditorBlockToolbarProps {
 	children: ReactNode
 }
 
-export const BlockToolbar = memo(({ children }: HoveringToolbarsProps) => {
+export const EditorBlockToolbar = memo(({ children }: EditorBlockToolbarProps) => {
 	const selection = useSlateSelection()
 
 	return (
diff --git a/packages/playground/admin/lib-extra/editor/common/EditorCanvas.tsx b/packages/react-ui-lib/src/editor/common/editor-canvas.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/EditorCanvas.tsx
rename to packages/react-ui-lib/src/editor/common/editor-canvas.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/EditableCanvas.tsx b/packages/react-ui-lib/src/editor/common/editor-editable-canvas.tsx
similarity index 89%
rename from packages/playground/admin/lib-extra/editor/common/EditableCanvas.tsx
rename to packages/react-ui-lib/src/editor/common/editor-editable-canvas.tsx
index fff30be4b7..c44e1017c7 100644
--- a/packages/playground/admin/lib-extra/editor/common/EditableCanvas.tsx
+++ b/packages/react-ui-lib/src/editor/common/editor-editable-canvas.tsx
@@ -4,11 +4,11 @@ import { Editable, useSlate } from 'slate-react'
 
 type EditableProps = typeof Editable extends (p: infer P) => any ? P : never
 
-export interface EditableCanvasProps extends EditableProps {
+export interface EditorEditableCanvasProps extends EditableProps {
 
 }
 
-export const EditableCanvas = ({ className, ...editableProps }: EditableCanvasProps) => {
+export const EditorEditableCanvas = ({ className, ...editableProps }: EditorEditableCanvasProps) => {
 	const editor = useSlate()
 	const pathRef = useRef<Path | undefined>(undefined)
 
diff --git a/packages/playground/admin/lib-extra/editor/common/InlineHoveringToolbar.tsx b/packages/react-ui-lib/src/editor/common/editor-inline-toolbar.tsx
similarity index 90%
rename from packages/playground/admin/lib-extra/editor/common/InlineHoveringToolbar.tsx
rename to packages/react-ui-lib/src/editor/common/editor-inline-toolbar.tsx
index 8ae77d7332..ce844c2add 100644
--- a/packages/playground/admin/lib-extra/editor/common/InlineHoveringToolbar.tsx
+++ b/packages/react-ui-lib/src/editor/common/editor-inline-toolbar.tsx
@@ -1,11 +1,11 @@
 import { memo, ReactNode, useLayoutEffect, useRef } from 'react'
 import { ReactEditor, useSlateSelection, useSlateStatic } from 'slate-react'
 
-export interface InlineHoveringToolbarProps {
+export interface EditorInlineToolbarProps {
 	children: ReactNode
 }
 
-export const InlineHoveringToolbar = memo(({ children }: InlineHoveringToolbarProps) => {
+export const EditorInlineToolbar = memo(({ children }: EditorInlineToolbarProps) => {
 	const ref = useRef<HTMLDivElement | null>(null)
 	const editor = useSlateStatic()
 	const selection = useSlateSelection()
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/AnchorRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/AnchorRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/AnchorRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/AnchorRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/BlockElement.tsx b/packages/react-ui-lib/src/editor/common/elements/BlockElement.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/BlockElement.tsx
rename to packages/react-ui-lib/src/editor/common/elements/BlockElement.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/HeadingRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/HeadingRenderer.tsx
similarity index 95%
rename from packages/playground/admin/lib-extra/editor/common/elements/HeadingRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/HeadingRenderer.tsx
index eed2a9d081..cddd037181 100644
--- a/packages/playground/admin/lib-extra/editor/common/elements/HeadingRenderer.tsx
+++ b/packages/react-ui-lib/src/editor/common/elements/HeadingRenderer.tsx
@@ -1,7 +1,7 @@
 import { HeadingElement } from '@contember/react-slate-editor-base'
 import React, { FunctionComponent } from 'react'
 import type { RenderElementProps } from 'slate-react'
-import { cn } from '../../../../lib/utils/cn'
+import { cn } from '../../../utils'
 
 export interface HeadingRendererProps extends Omit<RenderElementProps, 'element'> {
 	element: HeadingElement
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/HorizontalRuleRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/HorizontalRuleRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/HorizontalRuleRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/HorizontalRuleRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/ListItemRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/ListItemRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/ListItemRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/ListItemRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/OrderedListRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/OrderedListRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/OrderedListRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/OrderedListRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/ParagraphRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/ParagraphRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/ParagraphRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/ParagraphRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/ScrollTargetRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/ScrollTargetRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/ScrollTargetRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/ScrollTargetRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/TableCellElementRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/TableCellElementRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/TableCellElementRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/TableCellElementRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/TableElementRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/TableElementRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/TableElementRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/TableElementRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/TableRowElementRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/TableRowElementRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/TableRowElementRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/TableRowElementRenderer.tsx
diff --git a/packages/playground/admin/lib-extra/editor/common/elements/UnorderedListRenderer.tsx b/packages/react-ui-lib/src/editor/common/elements/UnorderedListRenderer.tsx
similarity index 100%
rename from packages/playground/admin/lib-extra/editor/common/elements/UnorderedListRenderer.tsx
rename to packages/react-ui-lib/src/editor/common/elements/UnorderedListRenderer.tsx
diff --git a/packages/react-ui-lib/src/editor/common/index.ts b/packages/react-ui-lib/src/editor/common/index.ts
new file mode 100644
index 0000000000..9509271f78
--- /dev/null
+++ b/packages/react-ui-lib/src/editor/common/index.ts
@@ -0,0 +1,6 @@
+export * from './baseEditorPlugins'
+export * from './editor-canvas'
+export * from './editor-inline-toolbar'
+export * from './editor-block-toolbar'
+export * from './editor-editable-canvas'
+export * from './elements/BlockElement'
diff --git a/packages/playground/admin/lib-extra/editor/new/EditorBlock.tsx b/packages/react-ui-lib/src/editor/editor-block.tsx
similarity index 88%
rename from packages/playground/admin/lib-extra/editor/new/EditorBlock.tsx
rename to packages/react-ui-lib/src/editor/editor-block.tsx
index 37505a1957..0e227f67e9 100644
--- a/packages/playground/admin/lib-extra/editor/new/EditorBlock.tsx
+++ b/packages/react-ui-lib/src/editor/editor-block.tsx
@@ -1,13 +1,12 @@
-import { Card, CardContent, CardHeader, CardTitle } from '../../../lib/components/ui/card'
-import { Button } from '../../../lib/components/ui/button'
+import { Button } from '../ui/button'
 import { PencilIcon, TrashIcon } from 'lucide-react'
-import { Popover, PopoverContent, PopoverTrigger } from '../../../lib/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
 import { Component } from '@contember/interface'
 import { ReactNode, useCallback } from 'react'
 import { Block, BlockContent, BlockRendererProps, useEditorBlockElement } from '@contember/react-slate-editor'
-import { BlockElement } from '../common/elements/BlockElement'
+import { BlockElement } from './common/elements/BlockElement'
 import { ReactEditor, useSlateStatic } from 'slate-react'
-import { Editor, Node, Transforms } from 'slate'
+import { Node, Transforms } from 'slate'
 
 export interface EditorBlockProps {
 	name: string
diff --git a/packages/react-ui-lib/src/editor/index.ts b/packages/react-ui-lib/src/editor/index.ts
new file mode 100644
index 0000000000..6c2fef6710
--- /dev/null
+++ b/packages/react-ui-lib/src/editor/index.ts
@@ -0,0 +1,5 @@
+export * from './common'
+export * from './block-editor'
+export * from './editor-block'
+export * from './plugins'
+export * from './rich-text'
diff --git a/packages/playground/admin/lib-extra/editor/new/plugins.tsx b/packages/react-ui-lib/src/editor/plugins.tsx
similarity index 84%
rename from packages/playground/admin/lib-extra/editor/new/plugins.tsx
rename to packages/react-ui-lib/src/editor/plugins.tsx
index b0f6726a6b..aadb6c7a78 100644
--- a/packages/playground/admin/lib-extra/editor/new/plugins.tsx
+++ b/packages/react-ui-lib/src/editor/plugins.tsx
@@ -1,6 +1,6 @@
 import { withSortable } from '@contember/react-slate-editor'
-import { SortableBlock } from './SortableBlock'
-import { baseEditorPlugins } from '../common/baseEditorPlugins'
+import { SortableBlock } from './sortable-block'
+import { baseEditorPlugins } from './common/baseEditorPlugins'
 
 const plugins = baseEditorPlugins
 
diff --git a/packages/playground/admin/lib-extra/editor/new/RichTextField.tsx b/packages/react-ui-lib/src/editor/rich-text.tsx
similarity index 91%
rename from packages/playground/admin/lib-extra/editor/new/RichTextField.tsx
rename to packages/react-ui-lib/src/editor/rich-text.tsx
index 926fbc08cd..5bcb7b5f61 100644
--- a/packages/playground/admin/lib-extra/editor/new/RichTextField.tsx
+++ b/packages/react-ui-lib/src/editor/rich-text.tsx
@@ -1,10 +1,10 @@
 import { Editable, useSlateStatic } from 'slate-react'
-import { EditorCanvas } from '../common/EditorCanvas'
+import { EditorCanvas } from './common/editor-canvas'
 import { RichTextEditor } from '@contember/react-slate-editor'
 import { Component, SugaredRelativeSingleField, useMutationState } from '@contember/interface'
 import * as React from 'react'
 import { ReactNode } from 'react'
-import { FormContainer, FormContainerProps } from '../../../lib/components/form'
+import { FormContainer, FormContainerProps } from '../form'
 import { FormFieldScope } from '@contember/react-form'
 import { richTextFieldPlugins } from './plugins'
 
diff --git a/packages/playground/admin/lib-extra/editor/new/SortableBlock.tsx b/packages/react-ui-lib/src/editor/sortable-block.tsx
similarity index 94%
rename from packages/playground/admin/lib-extra/editor/new/SortableBlock.tsx
rename to packages/react-ui-lib/src/editor/sortable-block.tsx
index 84b1f3afe0..251b3cc00d 100644
--- a/packages/playground/admin/lib-extra/editor/new/SortableBlock.tsx
+++ b/packages/react-ui-lib/src/editor/sortable-block.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode, useEffect } from 'react'
 import { Element } from 'slate'
 import { useSortable } from '@dnd-kit/sortable'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 import { GripVerticalIcon } from 'lucide-react'
-import { DropIndicator } from '../../../lib/components/ui/sortable'
+import { DropIndicator } from '../ui/sortable'
 import { Portal } from '@radix-ui/react-portal'
 import { DragOverlay } from '@dnd-kit/core'
 
diff --git a/packages/react-ui-lib/src/errors/index.ts b/packages/react-ui-lib/src/errors/index.ts
new file mode 100644
index 0000000000..d080f5f1c3
--- /dev/null
+++ b/packages/react-ui-lib/src/errors/index.ts
@@ -0,0 +1 @@
+export * from './use-error-formatter'
diff --git a/packages/playground/admin/lib/components/errors.tsx b/packages/react-ui-lib/src/errors/use-error-formatter.ts
similarity index 87%
rename from packages/playground/admin/lib/components/errors.tsx
rename to packages/react-ui-lib/src/errors/use-error-formatter.ts
index fff3812b1c..425fba7f4a 100644
--- a/packages/playground/admin/lib/components/errors.tsx
+++ b/packages/react-ui-lib/src/errors/use-error-formatter.ts
@@ -1,6 +1,6 @@
-import { ErrorAccessor } from '@contember/binding'
 import { ReactNode, useCallback } from 'react'
-import { dict } from '../../lib/dict'
+import { dict } from '../dict'
+import { ErrorAccessor } from '@contember/interface'
 
 export const useErrorFormatter = () => {
 	return useCallback((errors: ErrorAccessor.Error[]): ReactNode[] => {
diff --git a/packages/playground/admin/lib/components/form/container.tsx b/packages/react-ui-lib/src/form/container.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/form/container.tsx
rename to packages/react-ui-lib/src/form/container.tsx
index 16ceb30a6d..040ae7acc0 100644
--- a/packages/playground/admin/lib/components/form/container.tsx
+++ b/packages/react-ui-lib/src/form/container.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { ReactNode } from 'react'
 import { FormContainerUI, FormDescriptionUI, FormErrorUI, FormLabelUI, FormLabelWrapperUI } from './ui'
 import { useErrorFormatter } from '../errors'
-import { Component } from '@contember/react-binding'
+import { Component } from '@contember/interface'
 import { FormError, FormLabel } from '@contember/react-form'
 
 export interface FormContainerProps {
diff --git a/packages/playground/admin/lib/components/form/index.ts b/packages/react-ui-lib/src/form/index.ts
similarity index 100%
rename from packages/playground/admin/lib/components/form/index.ts
rename to packages/react-ui-lib/src/form/index.ts
diff --git a/packages/playground/admin/lib/components/form/inputs.tsx b/packages/react-ui-lib/src/form/inputs.tsx
similarity index 99%
rename from packages/playground/admin/lib/components/form/inputs.tsx
rename to packages/react-ui-lib/src/form/inputs.tsx
index 3b38e45b5b..6512096cdb 100644
--- a/packages/playground/admin/lib/components/form/inputs.tsx
+++ b/packages/react-ui-lib/src/form/inputs.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { ComponentProps, ReactNode } from 'react'
 import { CheckboxInput, Input, RadioInput } from '../ui/input'
-import { cn } from '../../utils/cn'
+import { cn } from '../utils'
 import { TextareaAutosize } from '../ui/textarea'
 import { FormLabelUI } from './ui'
 import { FormCheckbox, FormCheckboxProps, FormFieldScope, FormInput, FormInputProps, FormLabel, FormRadioInput, FormRadioItemProps } from '@contember/react-form'
diff --git a/packages/playground/admin/lib/components/form/select.tsx b/packages/react-ui-lib/src/form/select.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/form/select.tsx
rename to packages/react-ui-lib/src/form/select.tsx
diff --git a/packages/playground/admin/lib/components/form/ui.tsx b/packages/react-ui-lib/src/form/ui.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/form/ui.tsx
rename to packages/react-ui-lib/src/form/ui.tsx
index 820eff3981..6baf0589a5 100644
--- a/packages/playground/admin/lib/components/form/ui.tsx
+++ b/packages/react-ui-lib/src/form/ui.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../utils/uic'
+import { uic } from '../utils/uic'
 import { Label } from '../ui/label'
 
 export const FormLayout = uic('div', {
diff --git a/packages/playground/admin/lib/components/form/upload.tsx b/packages/react-ui-lib/src/form/upload.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/form/upload.tsx
rename to packages/react-ui-lib/src/form/upload.tsx
diff --git a/packages/playground/admin/lib/utils/formatting.ts b/packages/react-ui-lib/src/formatting/formatting.ts
similarity index 100%
rename from packages/playground/admin/lib/utils/formatting.ts
rename to packages/react-ui-lib/src/formatting/formatting.ts
diff --git a/packages/react-ui-lib/src/formatting/index.ts b/packages/react-ui-lib/src/formatting/index.ts
new file mode 100644
index 0000000000..99297511d2
--- /dev/null
+++ b/packages/react-ui-lib/src/formatting/index.ts
@@ -0,0 +1 @@
+export * from './formatting'
diff --git a/packages/playground/admin/lib/utils/formatImageResizeUrl.ts b/packages/react-ui-lib/src/images/formatImageResizeUrl.ts
similarity index 100%
rename from packages/playground/admin/lib/utils/formatImageResizeUrl.ts
rename to packages/react-ui-lib/src/images/formatImageResizeUrl.ts
diff --git a/packages/react-ui-lib/src/images/index.ts b/packages/react-ui-lib/src/images/index.ts
new file mode 100644
index 0000000000..a603b56ca2
--- /dev/null
+++ b/packages/react-ui-lib/src/images/index.ts
@@ -0,0 +1 @@
+export * from './formatImageResizeUrl'
diff --git a/packages/react-ui-lib/src/index.ts b/packages/react-ui-lib/src/index.ts
new file mode 100644
index 0000000000..15a2d78a1b
--- /dev/null
+++ b/packages/react-ui-lib/src/index.ts
@@ -0,0 +1,42 @@
+export * from './binding'
+export * from './block-repeater'
+export * from './board'
+export * from './buttons'
+export * from './datagrid'
+export * from './dev'
+export * from './dimensions'
+export * from './editor'
+export * from './formatting'
+export * from './form'
+export * from './images'
+export * from './layout'
+export * from './outdated-application-dialog'
+export * from './repeater'
+export * from './select'
+export * from './tenant'
+export * from './toast'
+export * from './upload'
+export * from './utils'
+
+export * from './ui/alert-dialog'
+export * from './ui/button'
+export * from './ui/card'
+export * from './ui/dialog'
+export * from './ui/divider'
+export * from './ui/dropdown'
+export * from './ui/input'
+export * from './ui/label'
+export * from './ui/loader'
+export * from './ui/menu'
+export * from './ui/overlay'
+export * from './ui/popover'
+export * from './ui/progress'
+export * from './ui/scroll-area'
+export * from './ui/sheet'
+export * from './ui/sortable'
+export * from './ui/switch'
+export * from './ui/table'
+export * from './ui/textarea'
+export * from './ui/toggle'
+export * from './ui/toggle-group'
+export * from './ui/tooltip'
diff --git a/packages/react-ui-lib/src/layout/index.ts b/packages/react-ui-lib/src/layout/index.ts
new file mode 100644
index 0000000000..74e764f7ef
--- /dev/null
+++ b/packages/react-ui-lib/src/layout/index.ts
@@ -0,0 +1,2 @@
+export * from './layout'
+export * from './slots'
diff --git a/packages/playground/admin/lib/components/layout.tsx b/packages/react-ui-lib/src/layout/layout.tsx
similarity index 99%
rename from packages/playground/admin/lib/components/layout.tsx
rename to packages/react-ui-lib/src/layout/layout.tsx
index e5787c7962..f0dbe5fc74 100644
--- a/packages/playground/admin/lib/components/layout.tsx
+++ b/packages/react-ui-lib/src/layout/layout.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren, useEffect, useState } from 'react'
 import { useHasActiveSlotsFactory } from '@contember/react-slots'
 import { uic } from '../utils/uic'
 import { SlotTargets } from './slots'
-import { Button } from './ui/button'
+import { Button } from '../ui/button'
 import { LogoutTrigger } from '@contember/react-identity'
 import { dict } from '../dict'
 import { useCurrentRequest } from '@contember/interface'
diff --git a/packages/playground/admin/lib/components/slots.tsx b/packages/react-ui-lib/src/layout/slots.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/slots.tsx
rename to packages/react-ui-lib/src/layout/slots.tsx
diff --git a/packages/react-ui-lib/src/outdated-application-dialog/index.ts b/packages/react-ui-lib/src/outdated-application-dialog/index.ts
new file mode 100644
index 0000000000..c00e6bd82c
--- /dev/null
+++ b/packages/react-ui-lib/src/outdated-application-dialog/index.ts
@@ -0,0 +1 @@
+export * from './outdated-application-dialog'
diff --git a/packages/playground/admin/lib/components/outdated-application-dialog.tsx b/packages/react-ui-lib/src/outdated-application-dialog/outdated-application-dialog.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/outdated-application-dialog.tsx
rename to packages/react-ui-lib/src/outdated-application-dialog/outdated-application-dialog.tsx
index 573349c72c..f23b891544 100644
--- a/packages/playground/admin/lib/components/outdated-application-dialog.tsx
+++ b/packages/react-ui-lib/src/outdated-application-dialog/outdated-application-dialog.tsx
@@ -1,5 +1,5 @@
-import { ComponentType, useCallback, useEffect, useState } from 'react'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader } from './ui/alert-dialog'
+import { ComponentType, useCallback, useState } from 'react'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader } from '../ui/alert-dialog'
 import { useIsApplicationOutdated } from '@contember/interface'
 import { ClockIcon, RefreshCwIcon } from 'lucide-react'
 import { dict } from '../dict'
diff --git a/packages/react-ui-lib/src/repeater/index.ts b/packages/react-ui-lib/src/repeater/index.ts
new file mode 100644
index 0000000000..020632b4ce
--- /dev/null
+++ b/packages/react-ui-lib/src/repeater/index.ts
@@ -0,0 +1 @@
+export * from './repeater'
diff --git a/packages/playground/admin/lib/components/repeater.tsx b/packages/react-ui-lib/src/repeater/repeater.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/repeater.tsx
rename to packages/react-ui-lib/src/repeater/repeater.tsx
index fb0238ee8f..8ccc241b2b 100644
--- a/packages/playground/admin/lib/components/repeater.tsx
+++ b/packages/react-ui-lib/src/repeater/repeater.tsx
@@ -16,9 +16,9 @@ import {
 	RepeaterSortableItemNode,
 } from '@contember/react-repeater-dnd-kit'
 import { GripVerticalIcon, PlusCircleIcon, Trash2Icon } from 'lucide-react'
-import { Button } from './ui/button'
+import { Button } from '../ui/button'
 import { uic } from '../utils/uic'
-import { DropIndicator } from './ui/sortable'
+import { DropIndicator } from '../ui/sortable'
 import { dict } from '../dict'
 
 export const RepeaterWrapperUI = uic('div', {
diff --git a/packages/playground/admin/lib/components/select/create-new.tsx b/packages/react-ui-lib/src/select/create-new.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/select/create-new.tsx
rename to packages/react-ui-lib/src/select/create-new.tsx
index be366fe46b..cd0a1df2a2 100644
--- a/packages/playground/admin/lib/components/select/create-new.tsx
+++ b/packages/react-ui-lib/src/select/create-new.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { ReactElement, ReactNode } from 'react'
 import { Button } from '../ui/button'
 import { SelectItemTrigger, SelectNewItem } from '@contember/react-select'
-import { dict } from '../../../lib/dict'
+import { dict } from '../dict'
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogTrigger } from '../ui/dialog'
 
 
diff --git a/packages/playground/admin/lib/components/select/filter.tsx b/packages/react-ui-lib/src/select/filter.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/select/filter.tsx
rename to packages/react-ui-lib/src/select/filter.tsx
index 50b0697602..cff7438f6a 100644
--- a/packages/playground/admin/lib/components/select/filter.tsx
+++ b/packages/react-ui-lib/src/select/filter.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Input } from '../ui/input'
 import { DataViewHasFilterType, DataViewQueryFilterName, DataViewTextFilterInput } from '@contember/react-dataview'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 
 
 export const SelectDefaultFilter = () => (
diff --git a/packages/playground/admin/lib/components/select/highlight.tsx b/packages/react-ui-lib/src/select/highlight.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/select/highlight.tsx
rename to packages/react-ui-lib/src/select/highlight.tsx
diff --git a/packages/playground/admin/lib/components/select/index.ts b/packages/react-ui-lib/src/select/index.ts
similarity index 100%
rename from packages/playground/admin/lib/components/select/index.ts
rename to packages/react-ui-lib/src/select/index.ts
diff --git a/packages/playground/admin/lib/components/select/list.tsx b/packages/react-ui-lib/src/select/list.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/select/list.tsx
rename to packages/react-ui-lib/src/select/list.tsx
diff --git a/packages/playground/admin/lib/components/select/multi-select.tsx b/packages/react-ui-lib/src/select/multi-select.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/select/multi-select.tsx
rename to packages/react-ui-lib/src/select/multi-select.tsx
diff --git a/packages/playground/admin/lib/components/select/pagination.tsx b/packages/react-ui-lib/src/select/pagination.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/select/pagination.tsx
rename to packages/react-ui-lib/src/select/pagination.tsx
index 2e8337ab34..3f53c5542f 100644
--- a/packages/playground/admin/lib/components/select/pagination.tsx
+++ b/packages/react-ui-lib/src/select/pagination.tsx
@@ -3,7 +3,7 @@ import { MouseEventHandler } from 'react'
 import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
 import { DataViewChangePageTrigger, useDataViewPagingInfo } from '@contember/react-dataview'
 import { Button } from '../ui/button'
-import { dict } from '../../../lib/dict'
+import { dict } from '../dict'
 
 export const SelectPagination = () => {
 	const scrollToTop: MouseEventHandler = e => {
diff --git a/packages/playground/admin/lib/components/select/select.tsx b/packages/react-ui-lib/src/select/select.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/select/select.tsx
rename to packages/react-ui-lib/src/select/select.tsx
index 944bf41011..16bb2d7a08 100644
--- a/packages/playground/admin/lib/components/select/select.tsx
+++ b/packages/react-ui-lib/src/select/select.tsx
@@ -3,7 +3,7 @@ import { ReactNode } from 'react'
 import { Popover, PopoverTrigger } from '../ui/popover'
 import { Component, SugaredQualifiedEntityList } from '@contember/interface'
 import { Button } from '../ui/button'
-import { SugaredRelativeSingleEntity } from '@contember/react-binding'
+import { SugaredRelativeSingleEntity } from '@contember/interface'
 import { ChevronDownIcon, XIcon } from 'lucide-react'
 import { SelectCreateNewTrigger, SelectDefaultPlaceholderUI, SelectInputActionsUI, SelectInputUI, SelectInputWrapperUI, SelectListItemUI, SelectPopoverContent } from './ui'
 import { SelectListInner } from './list'
diff --git a/packages/playground/admin/lib/components/select/sortable-select.tsx b/packages/react-ui-lib/src/select/sortable-select.tsx
similarity index 99%
rename from packages/playground/admin/lib/components/select/sortable-select.tsx
rename to packages/react-ui-lib/src/select/sortable-select.tsx
index 39b72c7d8e..e50e7300ea 100644
--- a/packages/playground/admin/lib/components/select/sortable-select.tsx
+++ b/packages/react-ui-lib/src/select/sortable-select.tsx
@@ -1,4 +1,4 @@
-import { cn } from '../../utils/cn'
+import { cn } from '../utils/cn'
 import { DropIndicator } from '../ui/sortable'
 import * as React from 'react'
 import { ReactNode } from 'react'
diff --git a/packages/playground/admin/lib/components/select/ui.tsx b/packages/react-ui-lib/src/select/ui.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/select/ui.tsx
rename to packages/react-ui-lib/src/select/ui.tsx
index 421987ed0a..9b7d116527 100644
--- a/packages/playground/admin/lib/components/select/ui.tsx
+++ b/packages/react-ui-lib/src/select/ui.tsx
@@ -1,10 +1,10 @@
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 import { Button } from '../ui/button'
 import * as React from 'react'
 import { forwardRef } from 'react'
 import { CheckIcon, PlusIcon, XIcon } from 'lucide-react'
 import { PopoverContent } from '../ui/popover'
-import { dict } from '../../../lib/dict'
+import { dict } from '../dict'
 
 
 export const SelectInputWrapperUI = uic('div', {
diff --git a/packages/playground/admin/lib/components/tenant/changeMyPasswordForm.tsx b/packages/react-ui-lib/src/tenant/forms/change-my-password.tsx
similarity index 94%
rename from packages/playground/admin/lib/components/tenant/changeMyPasswordForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/change-my-password.tsx
index 2fd06f05bb..af03c96d43 100644
--- a/packages/playground/admin/lib/components/tenant/changeMyPasswordForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/change-my-password.tsx
@@ -1,6 +1,6 @@
 import { ChangeMyPasswordFormErrorCode, useChangeMyPasswordForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormField } from './common'
 import { dict } from '../../dict'
 
diff --git a/packages/playground/admin/lib/components/tenant/common.tsx b/packages/react-ui-lib/src/tenant/forms/common.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/tenant/common.tsx
rename to packages/react-ui-lib/src/tenant/forms/common.tsx
index 9790717247..a3766c40e9 100644
--- a/packages/playground/admin/lib/components/tenant/common.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/common.tsx
@@ -1,9 +1,9 @@
 import { FormContextValue } from '@contember/react-identity'
-import { FormErrorUI } from '../form'
-import { Input } from '../ui/input'
+import { FormErrorUI } from '../../form'
+import { Input } from '../../ui/input'
 import { HTMLInputTypeAttribute, useState } from 'react'
 import { dataAttribute } from '@contember/utilities'
-import { Label } from '../ui/label'
+import { Label } from '../../ui/label'
 
 export interface TenantFormErrorsProps<CtxValue extends FormContextValue<any, any, any>> {
 	form: CtxValue
diff --git a/packages/playground/admin/lib/components/tenant/createApiKeyForm.tsx b/packages/react-ui-lib/src/tenant/forms/create-api-key.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/tenant/createApiKeyForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/create-api-key.tsx
index 114ee40c01..eb753cf3da 100644
--- a/packages/playground/admin/lib/components/tenant/createApiKeyForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/create-api-key.tsx
@@ -1,8 +1,8 @@
 import { CreateApiKeyFormErrorCode, useCreateApiKeyForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormField, TenantFormLabel } from './common'
-import { MembershipsControl, useIntrospectionRolesConfig } from './membershipsControl'
+import { MembershipsControl, useIntrospectionRolesConfig } from './memberships-control'
 import { dict } from '../../dict'
 
 
diff --git a/packages/react-ui-lib/src/tenant/forms/index.ts b/packages/react-ui-lib/src/tenant/forms/index.ts
new file mode 100644
index 0000000000..71205c4a3c
--- /dev/null
+++ b/packages/react-ui-lib/src/tenant/forms/index.ts
@@ -0,0 +1,8 @@
+export * from './change-my-password'
+export * from './create-api-key'
+export * from './invite'
+export * from './login'
+export * from './memberships-control'
+export * from './password-reset'
+export * from './password-reset-request'
+export * from './update-project-member'
diff --git a/packages/playground/admin/lib/components/tenant/inviteForm.tsx b/packages/react-ui-lib/src/tenant/forms/invite.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/tenant/inviteForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/invite.tsx
index 8f205fdff2..b707b2f080 100644
--- a/packages/playground/admin/lib/components/tenant/inviteForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/invite.tsx
@@ -1,8 +1,8 @@
 import { InviteFormErrorCode, useInviteForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormField, TenantFormLabel } from './common'
-import { MembershipsControl, useIntrospectionRolesConfig } from './membershipsControl'
+import { MembershipsControl, useIntrospectionRolesConfig } from './memberships-control'
 import { dict } from '../../dict'
 
 
diff --git a/packages/playground/admin/lib/components/tenant/loginForm.tsx b/packages/react-ui-lib/src/tenant/forms/login.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/tenant/loginForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/login.tsx
index b1b2764916..703e8058f5 100644
--- a/packages/playground/admin/lib/components/tenant/loginForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/login.tsx
@@ -1,6 +1,6 @@
 import { LoginFormErrorCode, useLoginForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormField } from './common'
 import { dict } from '../../dict'
 import { Link } from '@contember/interface'
diff --git a/packages/playground/admin/lib/components/tenant/membershipsControl.tsx b/packages/react-ui-lib/src/tenant/forms/memberships-control.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/tenant/membershipsControl.tsx
rename to packages/react-ui-lib/src/tenant/forms/memberships-control.tsx
index 51ffd15edc..12904f9f5d 100644
--- a/packages/playground/admin/lib/components/tenant/membershipsControl.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/memberships-control.tsx
@@ -1,10 +1,10 @@
 import { MembershipInput } from '@contember/graphql-client-tenant'
-import { Button } from '../ui/button'
+import { Button } from '../../ui/button'
 import { PlusIcon, TrashIcon } from 'lucide-react'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../../ui/dropdown'
 import { Fragment, ReactNode, useMemo } from 'react'
 import { useProjectRolesDefinitionQuery, useTenantQueryLoader } from '@contember/react-client-tenant'
-import { Textarea } from '../ui/textarea'
+import { Textarea } from '../../ui/textarea'
 
 export type VariableRendererProps = { value: readonly string[]; onChange: (newValues: readonly string[]) => void }
 export type RolesConfig = {
diff --git a/packages/playground/admin/lib/components/tenant/passwordResetRequestForm.tsx b/packages/react-ui-lib/src/tenant/forms/password-reset-request.tsx
similarity index 91%
rename from packages/playground/admin/lib/components/tenant/passwordResetRequestForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/password-reset-request.tsx
index dda598ba76..904753dbc8 100644
--- a/packages/playground/admin/lib/components/tenant/passwordResetRequestForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/password-reset-request.tsx
@@ -1,6 +1,6 @@
 import { usePasswordResetRequestForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormField } from './common'
 import { dict } from '../../dict'
 
diff --git a/packages/playground/admin/lib/components/tenant/passwordResetForm.tsx b/packages/react-ui-lib/src/tenant/forms/password-reset.tsx
similarity index 94%
rename from packages/playground/admin/lib/components/tenant/passwordResetForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/password-reset.tsx
index ffd82cf9e3..b275548267 100644
--- a/packages/playground/admin/lib/components/tenant/passwordResetForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/password-reset.tsx
@@ -1,6 +1,6 @@
 import { usePasswordResetForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormField } from './common'
 import { dict } from '../../dict'
 
diff --git a/packages/playground/admin/lib/components/tenant/updateProjectMemberForm.tsx b/packages/react-ui-lib/src/tenant/forms/update-project-member.tsx
similarity index 91%
rename from packages/playground/admin/lib/components/tenant/updateProjectMemberForm.tsx
rename to packages/react-ui-lib/src/tenant/forms/update-project-member.tsx
index 30c0d10edb..e267dffe72 100644
--- a/packages/playground/admin/lib/components/tenant/updateProjectMemberForm.tsx
+++ b/packages/react-ui-lib/src/tenant/forms/update-project-member.tsx
@@ -1,8 +1,8 @@
 import { useUpdateProjectMemberForm } from '@contember/react-identity'
-import { Button } from '../ui/button'
-import { Loader } from '../ui/loader'
+import { Button } from '../../ui/button'
+import { Loader } from '../../ui/loader'
 import { TenantFormError, TenantFormLabel } from './common'
-import { MembershipsControl, useIntrospectionRolesConfig } from './membershipsControl'
+import { MembershipsControl, useIntrospectionRolesConfig } from './memberships-control'
 import { dict } from '../../dict'
 
 
diff --git a/packages/playground/admin/lib/hooks/useInvite.ts b/packages/react-ui-lib/src/tenant/hooks/useInvite.ts
similarity index 100%
rename from packages/playground/admin/lib/hooks/useInvite.ts
rename to packages/react-ui-lib/src/tenant/hooks/useInvite.ts
diff --git a/packages/playground/admin/lib/hooks/useInviteUser.tsx b/packages/react-ui-lib/src/tenant/hooks/useInviteUser.tsx
similarity index 92%
rename from packages/playground/admin/lib/hooks/useInviteUser.tsx
rename to packages/react-ui-lib/src/tenant/hooks/useInviteUser.tsx
index 85aee7de0f..8bdea8c961 100644
--- a/packages/playground/admin/lib/hooks/useInviteUser.tsx
+++ b/packages/react-ui-lib/src/tenant/hooks/useInviteUser.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react'
 
 import { useInvite } from './useInvite'
-import { ToastContent, useShowToast } from '../components/ui/toast'
+import { ToastContent, useShowToast } from '../../toast'
 import { useProjectSlug } from '@contember/react-client'
 import { EntityAccessor } from '@contember/interface'
 import * as TenantApi from '@contember/graphql-client-tenant'
 import { useReferentiallyStableCallback } from '@contember/react-utils'
-import { dict } from '../dict'
+import { dict } from '../../dict'
 
 export const useInviteUser = ({ emailField, personIdField, memberships }: {
 	personIdField: string
diff --git a/packages/react-ui-lib/src/tenant/index.ts b/packages/react-ui-lib/src/tenant/index.ts
new file mode 100644
index 0000000000..f077338a0c
--- /dev/null
+++ b/packages/react-ui-lib/src/tenant/index.ts
@@ -0,0 +1,3 @@
+export * from './forms'
+export * from './listing'
+export * from './otp'
diff --git a/packages/playground/admin/lib/components/tenant/apiKeyList.tsx b/packages/react-ui-lib/src/tenant/listing/api-key-list.tsx
similarity index 86%
rename from packages/playground/admin/lib/components/tenant/apiKeyList.tsx
rename to packages/react-ui-lib/src/tenant/listing/api-key-list.tsx
index ae000a2f36..79952012f2 100644
--- a/packages/playground/admin/lib/components/tenant/apiKeyList.tsx
+++ b/packages/react-ui-lib/src/tenant/listing/api-key-list.tsx
@@ -1,8 +1,8 @@
 import { ProjectMembersFilter } from '@contember/graphql-client-tenant'
 import * as React from 'react'
-import { TableCell } from '../ui/table'
+import { TableCell } from '../../ui/table'
 import { dict } from '../../dict'
-import { MemberList, MemberListController } from './memberList'
+import { MemberList, MemberListController } from './member-list'
 
 const filter: ProjectMembersFilter = {
 	memberType: 'API_KEY',
diff --git a/packages/react-ui-lib/src/tenant/listing/index.ts b/packages/react-ui-lib/src/tenant/listing/index.ts
new file mode 100644
index 0000000000..531358c2fb
--- /dev/null
+++ b/packages/react-ui-lib/src/tenant/listing/index.ts
@@ -0,0 +1,4 @@
+export * from './api-key-list'
+export * from './member-delete-dialog'
+export * from './member-list'
+export * from './person-list'
diff --git a/packages/playground/admin/lib/components/tenant/memberDeleteDialog.tsx b/packages/react-ui-lib/src/tenant/listing/member-delete-dialog.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/tenant/memberDeleteDialog.tsx
rename to packages/react-ui-lib/src/tenant/listing/member-delete-dialog.tsx
index 3231b0fdcd..44e9a32e76 100644
--- a/packages/playground/admin/lib/components/tenant/memberDeleteDialog.tsx
+++ b/packages/react-ui-lib/src/tenant/listing/member-delete-dialog.tsx
@@ -1,5 +1,5 @@
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../ui/alert-dialog'
-import { Button } from '../ui/button'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../../ui/alert-dialog'
+import { Button } from '../../ui/button'
 import { TrashIcon } from 'lucide-react'
 import { dict } from '../../dict'
 import * as React from 'react'
diff --git a/packages/playground/admin/lib/components/tenant/memberList.tsx b/packages/react-ui-lib/src/tenant/listing/member-list.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/tenant/memberList.tsx
rename to packages/react-ui-lib/src/tenant/listing/member-list.tsx
index cc61c75ada..3f64c43f3d 100644
--- a/packages/playground/admin/lib/components/tenant/memberList.tsx
+++ b/packages/react-ui-lib/src/tenant/listing/member-list.tsx
@@ -1,18 +1,18 @@
 import { ProjectMembersFilter } from '@contember/graphql-client-tenant'
 import * as React from 'react'
 import { ReactNode, useState } from 'react'
-import { Loader } from '../ui/loader'
-import { Table, TableCell, TableHead, TableHeader, TableRow } from '../ui/table'
-import { Button } from '../ui/button'
+import { Loader } from '../../ui/loader'
+import { Table, TableCell, TableHead, TableHeader, TableRow } from '../../ui/table'
+import { Button } from '../../ui/button'
 import { ChevronLeftIcon, ChevronRightIcon, PencilIcon, RefreshCwIcon } from 'lucide-react'
 import { ProjectMembersQueryResult, useProjectMembersQuery, useTenantQueryLoader } from '@contember/react-client-tenant'
 import { useProjectSlug } from '@contember/react-client'
 import { UpdateProjectMemberForm } from '@contember/interface'
-import { ToastContent, useShowToast } from '../ui/toast'
+import { ToastContent, useShowToast } from '../../toast'
 import { dict } from '../../dict'
-import { MemberDeleteDialog } from './memberDeleteDialog'
-import { Dialog, DialogContent, DialogTrigger } from '../ui/dialog'
-import { UpdateProjectMemberFormFields } from './updateProjectMemberForm'
+import { MemberDeleteDialog } from './member-delete-dialog'
+import { Dialog, DialogContent, DialogTrigger } from '../../ui/dialog'
+import { UpdateProjectMemberFormFields } from '../forms'
 
 const perPage = 20
 
diff --git a/packages/playground/admin/lib/components/tenant/personList.tsx b/packages/react-ui-lib/src/tenant/listing/person-list.tsx
similarity index 88%
rename from packages/playground/admin/lib/components/tenant/personList.tsx
rename to packages/react-ui-lib/src/tenant/listing/person-list.tsx
index 02d88199bd..5bbfba15c5 100644
--- a/packages/playground/admin/lib/components/tenant/personList.tsx
+++ b/packages/react-ui-lib/src/tenant/listing/person-list.tsx
@@ -1,8 +1,8 @@
 import { ProjectMembersFilter } from '@contember/graphql-client-tenant'
 import * as React from 'react'
-import { TableCell } from '../ui/table'
+import { TableCell } from '../../ui/table'
 import { dict } from '../../dict'
-import { MemberList, MemberListController } from './memberList'
+import { MemberList, MemberListController } from './member-list'
 
 const filter: ProjectMembersFilter = {
 	memberType: 'PERSON',
diff --git a/packages/react-ui-lib/src/tenant/otp/index.ts b/packages/react-ui-lib/src/tenant/otp/index.ts
new file mode 100644
index 0000000000..64efc43dec
--- /dev/null
+++ b/packages/react-ui-lib/src/tenant/otp/index.ts
@@ -0,0 +1 @@
+export * from './otp-setup'
diff --git a/packages/playground/admin/lib/components/tenant/otpSetup.tsx b/packages/react-ui-lib/src/tenant/otp/otp-setup.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/tenant/otpSetup.tsx
rename to packages/react-ui-lib/src/tenant/otp/otp-setup.tsx
index 788a90a57c..fc1b8120c3 100644
--- a/packages/playground/admin/lib/components/tenant/otpSetup.tsx
+++ b/packages/react-ui-lib/src/tenant/otp/otp-setup.tsx
@@ -1,11 +1,11 @@
 import { useMemo, useState } from 'react'
 import qrcode from 'qrcode-generator'
 import { DisableOtpTrigger, OtpConfirmForm, OtpPrepareForm, useIdentity, useOtpConfirmForm, useOtpPrepareForm } from '@contember/interface'
-import { Loader } from '../ui/loader'
-import { Button } from '../ui/button'
-import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../ui/alert-dialog'
-import { TenantFormError, TenantFormField } from './common'
-import { ToastContent, useShowToast } from '../ui/toast'
+import { Loader } from '../../ui/loader'
+import { Button } from '../../ui/button'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '../../ui/alert-dialog'
+import { TenantFormError, TenantFormField } from '../forms/common'
+import { ToastContent, useShowToast } from '../../toast'
 import { dict } from '../../dict'
 
 export const OtpSetup = () => {
diff --git a/packages/playground/admin/lib/components/ui/toast/index.ts b/packages/react-ui-lib/src/toast/index.ts
similarity index 100%
rename from packages/playground/admin/lib/components/ui/toast/index.ts
rename to packages/react-ui-lib/src/toast/index.ts
diff --git a/packages/playground/admin/lib/components/ui/toast/toast.tsx b/packages/react-ui-lib/src/toast/toast.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/ui/toast/toast.tsx
rename to packages/react-ui-lib/src/toast/toast.tsx
index 3b3c56fbc0..fa02b95c7d 100644
--- a/packages/playground/admin/lib/components/ui/toast/toast.tsx
+++ b/packages/react-ui-lib/src/toast/toast.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
+import { ReactNode } from 'react'
 import * as ToastPrimitives from '@radix-ui/react-toast'
 import { X } from 'lucide-react'
-import { uic } from '../../../../lib/utils/uic'
-import { ReactNode } from 'react'
+import { uic } from '../utils'
 import { ToasterProvider, useToasts } from './toaster'
-import { dict } from '../../../dict'
+import { dict } from '../dict'
 
 export const ToastContent = ({ title, children, action, details }: {
 	title?: ReactNode
diff --git a/packages/playground/admin/lib/components/ui/toast/toaster.tsx b/packages/react-ui-lib/src/toast/toaster.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/ui/toast/toaster.tsx
rename to packages/react-ui-lib/src/toast/toaster.tsx
diff --git a/packages/react-ui-lib/src/tsconfig.json b/packages/react-ui-lib/src/tsconfig.json
new file mode 100644
index 0000000000..05fa858923
--- /dev/null
+++ b/packages/react-ui-lib/src/tsconfig.json
@@ -0,0 +1,29 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"outDir": "../dist/types"
+	},
+	"references": [
+		{ "path": "../../interface/src" },
+		{ "path": "../../react-block-repeater/src" },
+		{ "path": "../../react-board/src" },
+		{ "path": "../../react-board-dnd-kit/src" },
+		{ "path": "../../react-client/src" },
+		{ "path": "../../react-client-tenant/src" },
+		{ "path": "../../react-dataview/src" },
+		{ "path": "../../react-identity/src" },
+		{ "path": "../../react-multipass-rendering/src" },
+		{ "path": "../../react-repeater/src" },
+		{ "path": "../../react-routing/src" },
+		{ "path": "../../react-repeater-dnd-kit/src" },
+		{ "path": "../../react-form/src" },
+		{ "path": "../../react-select/src" },
+		{ "path": "../../react-slots/src" },
+		{ "path": "../../react-slate-editor-base/src" },
+		{ "path": "../../react-slate-editor/src" },
+		{ "path": "../../react-uploader/src" },
+		{ "path": "../../react-uploader-dropzone/src" },
+		{ "path": "../../react-utils/src" },
+		{ "path": "../../utilities/src" },
+	]
+}
diff --git a/packages/playground/admin/lib/components/ui/alert-dialog.tsx b/packages/react-ui-lib/src/ui/alert-dialog.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/ui/alert-dialog.tsx
rename to packages/react-ui-lib/src/ui/alert-dialog.tsx
index ac11f40aed..77519f39a3 100644
--- a/packages/playground/admin/lib/components/ui/alert-dialog.tsx
+++ b/packages/react-ui-lib/src/ui/alert-dialog.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import { buttonConfig } from './button'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 
 export const AlertDialog = AlertDialogPrimitive.Root
diff --git a/packages/playground/admin/lib/components/ui/button.tsx b/packages/react-ui-lib/src/ui/button.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/button.tsx
rename to packages/react-ui-lib/src/ui/button.tsx
index aae340a388..76ff30be67 100644
--- a/packages/playground/admin/lib/components/ui/button.tsx
+++ b/packages/react-ui-lib/src/ui/button.tsx
@@ -1,4 +1,4 @@
-import { uiconfig, uic } from '../../../lib/utils/uic'
+import { uic, uiconfig } from '../utils'
 
 export const buttonConfig = uiconfig({
 	baseClass: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 transition-all',
diff --git a/packages/playground/admin/lib/components/ui/card.tsx b/packages/react-ui-lib/src/ui/card.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/ui/card.tsx
rename to packages/react-ui-lib/src/ui/card.tsx
index 61d13ab273..4c8e0afb4b 100644
--- a/packages/playground/admin/lib/components/ui/card.tsx
+++ b/packages/react-ui-lib/src/ui/card.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 export const Card = uic('div', {
 	baseClass: 'rounded-xl border bg-card text-card-foreground shadow',
diff --git a/packages/playground/admin/lib/components/ui/dialog.tsx b/packages/react-ui-lib/src/ui/dialog.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/ui/dialog.tsx
rename to packages/react-ui-lib/src/ui/dialog.tsx
index 4603915225..e8c640c27c 100644
--- a/packages/playground/admin/lib/components/ui/dialog.tsx
+++ b/packages/react-ui-lib/src/ui/dialog.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { uic } from '../../utils/uic'
+import { uic } from '../utils/uic'
 import { XIcon } from 'lucide-react'
 
 export const Dialog = DialogPrimitive.Root
diff --git a/packages/playground/admin/lib/components/ui/divider.tsx b/packages/react-ui-lib/src/ui/divider.tsx
similarity index 76%
rename from packages/playground/admin/lib/components/ui/divider.tsx
rename to packages/react-ui-lib/src/ui/divider.tsx
index 6f3155fea8..15c4a359c3 100644
--- a/packages/playground/admin/lib/components/ui/divider.tsx
+++ b/packages/react-ui-lib/src/ui/divider.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 export const Divider = uic('hr', {
 	baseClass: 'border-t border-divider',
diff --git a/packages/playground/admin/lib/components/ui/dropdown.tsx b/packages/react-ui-lib/src/ui/dropdown.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/ui/dropdown.tsx
rename to packages/react-ui-lib/src/ui/dropdown.tsx
index 8b5868165b..c3f71a7ea2 100644
--- a/packages/playground/admin/lib/components/ui/dropdown.tsx
+++ b/packages/react-ui-lib/src/ui/dropdown.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react'
+import { ReactNode } from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { Check, ChevronRight, Circle, MoreHorizontalIcon } from 'lucide-react'
-import { uic } from '../../../lib/utils/uic'
+import { cn, uic } from '../utils'
 import { buttonConfig } from './button'
-import { cn } from '../../../lib/utils/cn'
-import { ReactNode } from 'react'
 
 export const DropdownMenu = DropdownMenuPrimitive.Root
 
diff --git a/packages/playground/admin/lib/components/ui/input.tsx b/packages/react-ui-lib/src/ui/input.tsx
similarity index 94%
rename from packages/playground/admin/lib/components/ui/input.tsx
rename to packages/react-ui-lib/src/ui/input.tsx
index 5e65b7f670..259bca0bc8 100644
--- a/packages/playground/admin/lib/components/ui/input.tsx
+++ b/packages/react-ui-lib/src/ui/input.tsx
@@ -1,4 +1,4 @@
-import { uic, uiconfig } from '../../../lib/utils/uic'
+import { uic, uiconfig } from '../utils'
 
 export const inputConfig = uiconfig({
 	baseClass: 'flex w-full border bg-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none  disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-destructive data-[invalid]:ring-destructive read-only:bg-gray-100',
@@ -24,9 +24,9 @@ export const Input = uic('input', {
 	displayName: 'Input',
 })
 
-export const SelectInput = uic('select', {
+export const Select = uic('select', {
 	baseClass: 'flex w-full h-10 rounded-md p-2 text-sm border border-input bg-background ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:border-destructive data-[invalid]:ring-destructive',
-	displayName: 'SelectInput',
+	displayName: 'Select',
 })
 
 export const InputLike = uic('div', {
diff --git a/packages/playground/admin/lib/components/ui/label.tsx b/packages/react-ui-lib/src/ui/label.tsx
similarity index 85%
rename from packages/playground/admin/lib/components/ui/label.tsx
rename to packages/react-ui-lib/src/ui/label.tsx
index ae459715ea..f4dff950df 100644
--- a/packages/playground/admin/lib/components/ui/label.tsx
+++ b/packages/react-ui-lib/src/ui/label.tsx
@@ -1,5 +1,5 @@
 import * as LabelPrimitive from '@radix-ui/react-label'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 export const Label = uic(LabelPrimitive.Root, {
 	baseClass: 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-[invalid]:text-destructive',
diff --git a/packages/playground/admin/lib/components/ui/loader.tsx b/packages/react-ui-lib/src/ui/loader.tsx
similarity index 92%
rename from packages/playground/admin/lib/components/ui/loader.tsx
rename to packages/react-ui-lib/src/ui/loader.tsx
index 29a7945f44..fa7703df6f 100644
--- a/packages/playground/admin/lib/components/ui/loader.tsx
+++ b/packages/react-ui-lib/src/ui/loader.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 import { Loader2Icon } from 'lucide-react'
 import { Overlay, OverlayProps } from './overlay'
 
diff --git a/packages/playground/admin/lib/components/ui/menu.tsx b/packages/react-ui-lib/src/ui/menu.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/ui/menu.tsx
rename to packages/react-ui-lib/src/ui/menu.tsx
index 0e62e38c7e..cf40bd9a78 100644
--- a/packages/playground/admin/lib/components/ui/menu.tsx
+++ b/packages/react-ui-lib/src/ui/menu.tsx
@@ -1,6 +1,6 @@
 import { Link, RoutingLinkTarget } from '@contember/react-routing'
 import { ReactNode } from 'react'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 import { RoleCondition, useProjectUserRoles } from '@contember/interface'
 import { createContext } from '@contember/react-utils'
 
diff --git a/packages/playground/admin/lib/components/ui/overlay.tsx b/packages/react-ui-lib/src/ui/overlay.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/overlay.tsx
rename to packages/react-ui-lib/src/ui/overlay.tsx
index 65511ce562..7ec1932c85 100644
--- a/packages/playground/admin/lib/components/ui/overlay.tsx
+++ b/packages/react-ui-lib/src/ui/overlay.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { cn } from '../../../lib/utils/cn'
+import { cn } from '../utils'
 
 export interface OverlayProps {
 	position?: 'fixed' | 'absolute' | 'static'
diff --git a/packages/playground/admin/lib/components/ui/popover.tsx b/packages/react-ui-lib/src/ui/popover.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/ui/popover.tsx
rename to packages/react-ui-lib/src/ui/popover.tsx
index 87d86061ff..cd695f071b 100644
--- a/packages/playground/admin/lib/components/ui/popover.tsx
+++ b/packages/react-ui-lib/src/ui/popover.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as PopoverPrimitive from '@radix-ui/react-popover'
-import { cn } from '../../../lib/utils/cn'
+import { cn } from '../utils'
 
 const Popover = PopoverPrimitive.Root
 
diff --git a/packages/playground/admin/lib/components/ui/progress.tsx b/packages/react-ui-lib/src/ui/progress.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/progress.tsx
rename to packages/react-ui-lib/src/ui/progress.tsx
index 53f8ef2965..59244ccbba 100644
--- a/packages/playground/admin/lib/components/ui/progress.tsx
+++ b/packages/react-ui-lib/src/ui/progress.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as ProgressPrimitive from '@radix-ui/react-progress'
-import { cn } from '../../utils/cn'
+import { cn } from '../utils/cn'
 
 const Progress = React.forwardRef<
 	React.ElementRef<typeof ProgressPrimitive.Root>,
diff --git a/packages/playground/admin/lib/components/ui/scroll-area.tsx b/packages/react-ui-lib/src/ui/scroll-area.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/ui/scroll-area.tsx
rename to packages/react-ui-lib/src/ui/scroll-area.tsx
index b03858a3e1..7e5ae612e9 100644
--- a/packages/playground/admin/lib/components/ui/scroll-area.tsx
+++ b/packages/react-ui-lib/src/ui/scroll-area.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
-import { cn } from '../../../lib/utils/cn'
+import { cn } from '../utils'
 
 const ScrollArea = React.forwardRef<
     React.ElementRef<typeof ScrollAreaPrimitive.Root>,
diff --git a/packages/playground/admin/lib/components/ui/sheet.tsx b/packages/react-ui-lib/src/ui/sheet.tsx
similarity index 98%
rename from packages/playground/admin/lib/components/ui/sheet.tsx
rename to packages/react-ui-lib/src/ui/sheet.tsx
index 30e7e79527..d21237bfe0 100644
--- a/packages/playground/admin/lib/components/ui/sheet.tsx
+++ b/packages/react-ui-lib/src/ui/sheet.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import * as SheetPrimitive from '@radix-ui/react-dialog'
-import { uic } from '../../utils/uic'
+import { uic } from '../utils/uic'
 import { XIcon } from 'lucide-react'
 
 export const Sheet = SheetPrimitive.Root
diff --git a/packages/playground/admin/lib/components/ui/sortable.tsx b/packages/react-ui-lib/src/ui/sortable.tsx
similarity index 86%
rename from packages/playground/admin/lib/components/ui/sortable.tsx
rename to packages/react-ui-lib/src/ui/sortable.tsx
index b2a4dd23cd..921e00c3f0 100644
--- a/packages/playground/admin/lib/components/ui/sortable.tsx
+++ b/packages/react-ui-lib/src/ui/sortable.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 export const DropIndicator = uic('div', {
 	baseClass: 'bg-blue-300 rounded shadow-lg shadow-blue-700 absolute',
diff --git a/packages/playground/admin/lib/components/ui/switch.tsx b/packages/react-ui-lib/src/ui/switch.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/switch.tsx
rename to packages/react-ui-lib/src/ui/switch.tsx
index 4a89d1cc1f..14bbf4c193 100644
--- a/packages/playground/admin/lib/components/ui/switch.tsx
+++ b/packages/react-ui-lib/src/ui/switch.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
-import { uic } from '../../utils/uic'
+import { uic } from '../utils/uic'
 
 export const Switch = uic(SwitchPrimitives.Root, {
 	baseClass: 'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
diff --git a/packages/playground/admin/lib/components/ui/table.tsx b/packages/react-ui-lib/src/ui/table.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/ui/table.tsx
rename to packages/react-ui-lib/src/ui/table.tsx
index da4ee1444f..24a6e47d79 100644
--- a/packages/playground/admin/lib/components/ui/table.tsx
+++ b/packages/react-ui-lib/src/ui/table.tsx
@@ -1,4 +1,4 @@
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 export const TableWrapper = uic('div', {
 	baseClass: 'relative w-full overflow-auto',
diff --git a/packages/playground/admin/lib/components/ui/textarea.tsx b/packages/react-ui-lib/src/ui/textarea.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/textarea.tsx
rename to packages/react-ui-lib/src/ui/textarea.tsx
index 1166c433d9..5123e416e5 100644
--- a/packages/playground/admin/lib/components/ui/textarea.tsx
+++ b/packages/react-ui-lib/src/ui/textarea.tsx
@@ -1,5 +1,5 @@
 import { useAutoHeightTextArea, useComposeRef } from '@contember/react-utils'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 import { ComponentProps, forwardRef, useRef } from 'react'
 
 export const Textarea = uic('textarea', {
diff --git a/packages/playground/admin/lib/components/ui/toggle-group.tsx b/packages/react-ui-lib/src/ui/toggle-group.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/toggle-group.tsx
rename to packages/react-ui-lib/src/ui/toggle-group.tsx
index ad6400620e..0f1e4980dd 100644
--- a/packages/playground/admin/lib/components/ui/toggle-group.tsx
+++ b/packages/react-ui-lib/src/ui/toggle-group.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
 import { toggleConfig, ToggleProps } from './toggle'
-import { cn } from '../../utils/cn'
-import { uic } from '../../utils/uic'
+import { cn } from '../utils/cn'
+import { uic } from '../utils/uic'
 
 const ToggleGroupContext = React.createContext<ToggleProps>({
 	size: 'default',
diff --git a/packages/playground/admin/lib/components/ui/toggle.tsx b/packages/react-ui-lib/src/ui/toggle.tsx
similarity index 93%
rename from packages/playground/admin/lib/components/ui/toggle.tsx
rename to packages/react-ui-lib/src/ui/toggle.tsx
index ed982742cb..9f75dcedb7 100644
--- a/packages/playground/admin/lib/components/ui/toggle.tsx
+++ b/packages/react-ui-lib/src/ui/toggle.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as TogglePrimitive from '@radix-ui/react-toggle'
-import { ConfigVariants, uic, uiconfig } from '../../utils/uic'
+import { ConfigVariants, uic, uiconfig } from '../utils/uic'
 
 export const toggleConfig = uiconfig({
 	baseClass: 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent data-[active]:shadow-inner data-[active]:text-accent-foreground',
diff --git a/packages/playground/admin/lib/components/ui/tooltip.tsx b/packages/react-ui-lib/src/ui/tooltip.tsx
similarity index 95%
rename from packages/playground/admin/lib/components/ui/tooltip.tsx
rename to packages/react-ui-lib/src/ui/tooltip.tsx
index 53b50c7474..8dc10fb7c4 100644
--- a/packages/playground/admin/lib/components/ui/tooltip.tsx
+++ b/packages/react-ui-lib/src/ui/tooltip.tsx
@@ -1,5 +1,5 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import { uic } from '../../../lib/utils/uic'
+import { uic } from '../utils'
 
 
 export const TooltipProvider = TooltipPrimitive.Provider
diff --git a/packages/playground/admin/lib/components/upload/dropzone.tsx b/packages/react-ui-lib/src/upload/dropzone.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/upload/dropzone.tsx
rename to packages/react-ui-lib/src/upload/dropzone.tsx
diff --git a/packages/playground/admin/lib/components/upload/index.ts b/packages/react-ui-lib/src/upload/index.ts
similarity index 100%
rename from packages/playground/admin/lib/components/upload/index.ts
rename to packages/react-ui-lib/src/upload/index.ts
diff --git a/packages/playground/admin/lib/components/upload/repeater.tsx b/packages/react-ui-lib/src/upload/repeater.tsx
similarity index 100%
rename from packages/playground/admin/lib/components/upload/repeater.tsx
rename to packages/react-ui-lib/src/upload/repeater.tsx
diff --git a/packages/playground/admin/lib/components/upload/ui.tsx b/packages/react-ui-lib/src/upload/ui.tsx
similarity index 96%
rename from packages/playground/admin/lib/components/upload/ui.tsx
rename to packages/react-ui-lib/src/upload/ui.tsx
index f871333fa3..dfcd551f76 100644
--- a/packages/playground/admin/lib/components/upload/ui.tsx
+++ b/packages/react-ui-lib/src/upload/ui.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import { Loader } from '../ui/loader'
 import { GripIcon, GripVerticalIcon, UploadIcon } from 'lucide-react'
-import { dict } from '../../dict'
+import { dict } from '../dict'
 import { Button } from '../ui/button'
-import { uic } from '../../utils/uic'
+import { uic } from '../utils/uic'
 
 export const UploaderDropzoneWrapperUI = uic('div', { baseClass: 'rounded border p-1 shadow' })
 export const UploaderDropzoneAreaUI = uic('div', {
diff --git a/packages/playground/admin/lib/components/upload/upload-progress.tsx b/packages/react-ui-lib/src/upload/upload-progress.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/upload/upload-progress.tsx
rename to packages/react-ui-lib/src/upload/upload-progress.tsx
index a6d335361b..9064831422 100644
--- a/packages/playground/admin/lib/components/upload/upload-progress.tsx
+++ b/packages/react-ui-lib/src/upload/upload-progress.tsx
@@ -3,10 +3,10 @@ import { Button } from '../ui/button'
 import { Progress } from '../ui/progress'
 import * as React from 'react'
 import { ReactNode, useEffect } from 'react'
-import { Toast } from '../ui/toast'
-import { dict } from '../../dict'
+import { Toast } from '../toast'
+import { dict } from '../dict'
 import { UploaderEachFile, UploaderError, UploaderFileStateError, UploaderFileStateFinalizing, UploaderFileStateSuccess, UploaderFileStateSwitch, UploaderFileStateUploading } from '@contember/react-uploader'
-import { formatBytes } from '../../utils/formatting'
+import { formatBytes } from '../formatting/formatting'
 import { Loader } from '../ui/loader'
 
 
diff --git a/packages/playground/admin/lib/components/upload/view.tsx b/packages/react-ui-lib/src/upload/view.tsx
similarity index 97%
rename from packages/playground/admin/lib/components/upload/view.tsx
rename to packages/react-ui-lib/src/upload/view.tsx
index cb276d6433..2176352503 100644
--- a/packages/playground/admin/lib/components/upload/view.tsx
+++ b/packages/react-ui-lib/src/upload/view.tsx
@@ -2,11 +2,11 @@ import * as React from 'react'
 import { ComponentType, ReactNode } from 'react'
 import { Component, Field, SugaredRelativeSingleField, useEntity, useField } from '@contember/interface'
 import { AudioFileDataExtractorProps, FileUrlDataExtractorProps, GenericFileMetadataExtractorProps, ImageFileDataExtractorProps, VideoFileDataExtractorProps } from '@contember/react-uploader'
-import { formatBytes, formatDate, formatDuration } from '../../utils/formatting'
+import { formatBytes, formatDate, formatDuration } from '../formatting/formatting'
 import { Button } from '../ui/button'
 import { FileIcon, InfoIcon, TrashIcon } from 'lucide-react'
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover'
-import { formatImageResizeUrl } from '../../utils/formatImageResizeUrl'
+import { formatImageResizeUrl } from '../images/formatImageResizeUrl'
 
 export type UploadedImageViewProps =
 	& FileUrlDataExtractorProps
diff --git a/packages/playground/admin/lib/utils/cn.ts b/packages/react-ui-lib/src/utils/cn.ts
similarity index 100%
rename from packages/playground/admin/lib/utils/cn.ts
rename to packages/react-ui-lib/src/utils/cn.ts
diff --git a/packages/react-ui-lib/src/utils/index.ts b/packages/react-ui-lib/src/utils/index.ts
new file mode 100644
index 0000000000..eaca1f02b4
--- /dev/null
+++ b/packages/react-ui-lib/src/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './cn'
+export * from './uic'
diff --git a/packages/playground/admin/lib/utils/uic.tsx b/packages/react-ui-lib/src/utils/uic.tsx
similarity index 100%
rename from packages/playground/admin/lib/utils/uic.tsx
rename to packages/react-ui-lib/src/utils/uic.tsx
diff --git a/packages/react-ui-lib/tests/example.test.ts b/packages/react-ui-lib/tests/example.test.ts
new file mode 100644
index 0000000000..4705d8270e
--- /dev/null
+++ b/packages/react-ui-lib/tests/example.test.ts
@@ -0,0 +1,5 @@
+import { describe, test } from 'vitest'
+
+describe('@contember/react-ui-lib', function () {
+	test('@contember/react-ui-lib', function () { })
+})
diff --git a/packages/react-ui-lib/tests/tsconfig.json b/packages/react-ui-lib/tests/tsconfig.json
new file mode 100644
index 0000000000..9f0c88bc7c
--- /dev/null
+++ b/packages/react-ui-lib/tests/tsconfig.json
@@ -0,0 +1,10 @@
+{
+	"extends": "../../../tsconfig.settings.json",
+	"compilerOptions": {
+		"noEmit": true,
+		"emitDeclarationOnly": false
+	},
+	"references": [
+		{ "path": "../src" },
+	],
+}
diff --git a/packages/react-ui-lib/tsconfig.json b/packages/react-ui-lib/tsconfig.json
new file mode 100644
index 0000000000..915c57c02d
--- /dev/null
+++ b/packages/react-ui-lib/tsconfig.json
@@ -0,0 +1,8 @@
+{
+	"files": [],
+	"include": [],
+	"references": [
+		{ "path": "./src" },
+		{ "path": "./tests" },
+	],
+}
diff --git a/packages/react-ui-lib/tsdoc.json b/packages/react-ui-lib/tsdoc.json
new file mode 100644
index 0000000000..a46f62a20a
--- /dev/null
+++ b/packages/react-ui-lib/tsdoc.json
@@ -0,0 +1,6 @@
+{
+	"$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+	"extends": [
+		"../../tsdoc.json"
+	]
+}
diff --git a/packages/react-ui-lib/vite.config.js b/packages/react-ui-lib/vite.config.js
new file mode 100644
index 0000000000..a9bd4c5d4d
--- /dev/null
+++ b/packages/react-ui-lib/vite.config.js
@@ -0,0 +1,5 @@
+import { createViteConfig } from '../../build/createViteConfig.js'
+
+const currentDirName = new URL('.', import.meta.url).pathname.split('/').filter(Boolean).pop()
+
+export default createViteConfig(currentDirName)
diff --git a/tsconfig.json b/tsconfig.json
index a5c0f65e2e..b485a1cf94 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -86,6 +86,9 @@
 		{
 			"path": "./packages/react-slots"
 		},
+		{
+			"path": "./packages/react-ui-lib"
+		},
 		{
 			"path": "./packages/react-uploader"
 		},
diff --git a/yarn.lock b/yarn.lock
index 7556ec6bd7..6c8d63e996 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -254,7 +254,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.24.1, @babel/runtime@npm:^7.9.2":
   version: 7.24.5
   resolution: "@babel/runtime@npm:7.24.5"
   dependencies:
@@ -405,49 +405,12 @@ __metadata:
     "@contember/binding": "workspace:*"
     "@contember/client": "workspace:*"
     "@contember/client-content": "workspace:*"
-    "@contember/graphql-builder": "workspace:*"
-    "@contember/interface": "workspace:*"
-    "@contember/react-binding": "workspace:*"
-    "@contember/react-block-repeater": "workspace:*"
-    "@contember/react-board": "workspace:*"
-    "@contember/react-board-dnd-kit": "workspace:*"
-    "@contember/react-client": "workspace:*"
-    "@contember/react-client-tenant": "workspace:*"
-    "@contember/react-dataview": "workspace:*"
-    "@contember/react-form": "workspace:*"
-    "@contember/react-identity": "workspace:*"
-    "@contember/react-multipass-rendering": "workspace:*"
-    "@contember/react-repeater": "workspace:*"
-    "@contember/react-repeater-dnd-kit": "workspace:*"
-    "@contember/react-routing": "workspace:*"
-    "@contember/react-select": "workspace:*"
-    "@contember/react-slots": "workspace:*"
-    "@contember/react-uploader": "workspace:*"
-    "@contember/react-uploader-dropzone": "workspace:*"
-    "@contember/react-utils": "workspace:*"
+    "@contember/react-ui-lib": "workspace:*"
     "@contember/schema": ^1.4.0-beta.1
     "@contember/schema-definition": ^1.4.0-beta.1
     "@contember/schema-utils": ^1.4.0-beta.1
     "@contember/utilities": "workspace:*"
     "@faker-js/faker": ^8.4.1
-    "@radix-ui/react-alert-dialog": ^1.0.5
-    "@radix-ui/react-checkbox": ^1.0.4
-    "@radix-ui/react-dialog": ^1.0.5
-    "@radix-ui/react-dropdown-menu": ^2.0.6
-    "@radix-ui/react-label": ^2.0.2
-    "@radix-ui/react-popover": ^1.0.7
-    "@radix-ui/react-primitive": ^1.0.3
-    "@radix-ui/react-progress": ^1.0.3
-    "@radix-ui/react-scroll-area": ^1.0.5
-    "@radix-ui/react-select": ^2.0.0
-    "@radix-ui/react-separator": ^1.0.3
-    "@radix-ui/react-slot": ^1.0.2
-    "@radix-ui/react-switch": ^1.0.3
-    "@radix-ui/react-toast": ^1.1.5
-    "@radix-ui/react-toggle": ^1.0.3
-    "@radix-ui/react-toggle-group": ^1.0.4
-    "@radix-ui/react-toolbar": ^1.0.4
-    "@radix-ui/react-tooltip": ^1.0.7
     "@udecode/cn": ^31.0.0
     "@udecode/plate-autoformat": ^31.0.0
     "@udecode/plate-basic-marks": ^31.0.0
@@ -466,8 +429,6 @@ __metadata:
     "@udecode/plate-serializer-docx": ^31.1.2
     "@udecode/plate-serializer-md": ^31.0.0
     autoprefixer: ^10.4.19
-    class-variance-authority: ^0.7.0
-    downshift: ^8.3.1
     graphql: ^16.8.1
     lucide-react: ^0.302.0
     postcss: ^8.4.38
@@ -476,13 +437,9 @@ __metadata:
     react-dnd: ^16.0.1
     react-dnd-html5-backend: ^16.0.1
     react-dom: ^18.3.1
-    slate: ^0.103.0
-    slate-history: ^0.100.0
-    slate-hyperscript: ^0.100.0
-    slate-react: ^0.102.0
-    tailwind-merge: ^2.3.0
     tailwindcss: ^3.4.3
     tailwindcss-animate: ^1.0.7
+    vite-tsconfig-paths: ^4.3.2
   languageName: unknown
   linkType: soft
 
@@ -793,7 +750,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@contember/react-slate-editor@workspace:packages/react-slate-editor":
+"@contember/react-slate-editor@workspace:*, @contember/react-slate-editor@workspace:packages/react-slate-editor":
   version: 0.0.0-use.local
   resolution: "@contember/react-slate-editor@workspace:packages/react-slate-editor"
   dependencies:
@@ -828,6 +785,63 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@contember/react-ui-lib@workspace:*, @contember/react-ui-lib@workspace:packages/react-ui-lib":
+  version: 0.0.0-use.local
+  resolution: "@contember/react-ui-lib@workspace:packages/react-ui-lib"
+  dependencies:
+    "@contember/graphql-client-tenant": ^1.3.7
+    "@contember/interface": "workspace:*"
+    "@contember/react-block-repeater": "workspace:*"
+    "@contember/react-board": "workspace:*"
+    "@contember/react-board-dnd-kit": "workspace:*"
+    "@contember/react-client": "workspace:*"
+    "@contember/react-client-tenant": "workspace:*"
+    "@contember/react-dataview": "workspace:*"
+    "@contember/react-form": "workspace:*"
+    "@contember/react-identity": "workspace:*"
+    "@contember/react-multipass-rendering": "workspace:*"
+    "@contember/react-repeater": "workspace:*"
+    "@contember/react-repeater-dnd-kit": "workspace:*"
+    "@contember/react-routing": "workspace:*"
+    "@contember/react-select": "workspace:*"
+    "@contember/react-slate-editor": "workspace:*"
+    "@contember/react-slate-editor-base": "workspace:*"
+    "@contember/react-slots": "workspace:*"
+    "@contember/react-uploader": "workspace:*"
+    "@contember/react-uploader-dropzone": "workspace:*"
+    "@contember/react-utils": "workspace:*"
+    "@contember/utilities": "workspace:*"
+    "@dnd-kit/core": ^6.1.0
+    "@dnd-kit/sortable": ^8.0.0
+    "@radix-ui/react-alert-dialog": ^1.0.5
+    "@radix-ui/react-dialog": ^1.0.5
+    "@radix-ui/react-dropdown-menu": ^2.0.6
+    "@radix-ui/react-label": ^2.0.2
+    "@radix-ui/react-popover": ^1.0.7
+    "@radix-ui/react-portal": ^1.0.4
+    "@radix-ui/react-progress": ^1.0.3
+    "@radix-ui/react-scroll-area": ^1.0.5
+    "@radix-ui/react-slot": ^1.0.2
+    "@radix-ui/react-switch": ^1.0.3
+    "@radix-ui/react-toast": ^1.1.5
+    "@radix-ui/react-toggle": ^1.0.3
+    "@radix-ui/react-toggle-group": ^1.0.4
+    "@radix-ui/react-tooltip": ^1.0.7
+    class-variance-authority: ^0.7.0
+    clsx: ^2.0.0
+    lucide-react: ^0.302.0
+    qrcode-generator: ^1.4.4
+    react: ^18.3.1
+    react-dom: ^18.3.1
+    slate: ^0.103.0
+    slate-react: ^0.102.0
+    tailwind-merge: ^2.3.0
+  peerDependencies:
+    react: ^18 || ^19
+    react-dom: ^18 || ^19
+  languageName: unknown
+  linkType: soft
+
 "@contember/react-uploader-dropzone@workspace:*, @contember/react-uploader-dropzone@workspace:packages/react-uploader-dropzone":
   version: 0.0.0-use.local
   resolution: "@contember/react-uploader-dropzone@workspace:packages/react-uploader-dropzone"
@@ -1750,33 +1764,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-checkbox@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-checkbox@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-presence": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-use-size": 1.0.1
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 6dac5bddd9e1c42b149555501440918d9eae70da13b6d8539c3bf46b6c07681119d865d2106a43f729884ae8e2043bedc34c4d00a09a527b3bf0feade088d188
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-collection@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-collection@npm:1.0.3"
@@ -2142,7 +2129,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-primitive@npm:1.0.3, @radix-ui/react-primitive@npm:^1.0.3":
+"@radix-ui/react-primitive@npm:1.0.3":
   version: 1.0.3
   resolution: "@radix-ui/react-primitive@npm:1.0.3"
   dependencies:
@@ -2239,66 +2226,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-select@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@radix-ui/react-select@npm:2.0.0"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/number": 1.0.1
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-collection": 1.0.3
-    "@radix-ui/react-compose-refs": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-dismissable-layer": 1.0.5
-    "@radix-ui/react-focus-guards": 1.0.1
-    "@radix-ui/react-focus-scope": 1.0.4
-    "@radix-ui/react-id": 1.0.1
-    "@radix-ui/react-popper": 1.1.3
-    "@radix-ui/react-portal": 1.0.4
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-slot": 1.0.2
-    "@radix-ui/react-use-callback-ref": 1.0.1
-    "@radix-ui/react-use-controllable-state": 1.0.1
-    "@radix-ui/react-use-layout-effect": 1.0.1
-    "@radix-ui/react-use-previous": 1.0.1
-    "@radix-ui/react-visually-hidden": 1.0.3
-    aria-hidden: ^1.1.1
-    react-remove-scroll: 2.5.5
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 9ebf4a3e70fd5f583cf468e432ff04768b3442c44788eaf415e044f19c900b886e92eb46e19e138c4994d8a361f5e31f93d13b5bcf413469f21899bbe1112d1d
-  languageName: node
-  linkType: hard
-
-"@radix-ui/react-separator@npm:1.0.3, @radix-ui/react-separator@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "@radix-ui/react-separator@npm:1.0.3"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/react-primitive": 1.0.3
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 42f8c95e404de2ce9387040d78049808a48d423cd4c3bad8cca92c4b0bcbdcb3566b5b52a920d4e939a74b51188697f20a012221f0e630fc7f56de64096c15d2
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
@@ -2372,7 +2299,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-toggle-group@npm:1.0.4, @radix-ui/react-toggle-group@npm:^1.0.4":
+"@radix-ui/react-toggle-group@npm:^1.0.4":
   version: 1.0.4
   resolution: "@radix-ui/react-toggle-group@npm:1.0.4"
   dependencies:
@@ -2420,32 +2347,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-toolbar@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "@radix-ui/react-toolbar@npm:1.0.4"
-  dependencies:
-    "@babel/runtime": ^7.13.10
-    "@radix-ui/primitive": 1.0.1
-    "@radix-ui/react-context": 1.0.1
-    "@radix-ui/react-direction": 1.0.1
-    "@radix-ui/react-primitive": 1.0.3
-    "@radix-ui/react-roving-focus": 1.0.4
-    "@radix-ui/react-separator": 1.0.3
-    "@radix-ui/react-toggle-group": 1.0.4
-  peerDependencies:
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ^16.8 || ^17.0 || ^18.0
-    react-dom: ^16.8 || ^17.0 || ^18.0
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-    "@types/react-dom":
-      optional: true
-  checksum: 7ebee1f8add6510108979433c5b38627e2de9d48ef2172ca15274b9edbbc106ff43bcd47ff733b03ed2215b92e7af364ff82c79e5a1728374847e2b1e315552c
-  languageName: node
-  linkType: hard
-
 "@radix-ui/react-tooltip@npm:^1.0.7":
   version: 1.0.7
   resolution: "@radix-ui/react-tooltip@npm:1.0.7"
@@ -4356,6 +4257,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "clsx@npm:2.1.1"
+  checksum: acd3e1ab9d8a433ecb3cc2f6a05ab95fe50b4a3cfc5ba47abb6cbf3754585fcb87b84e90c822a1f256c4198e3b41c7f6c391577ffc8678ad587fc0976b24fd57
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -4430,7 +4338,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^3.0.2, compute-scroll-into-view@npm:^3.0.3":
+"compute-scroll-into-view@npm:^3.0.2":
   version: 3.1.0
   resolution: "compute-scroll-into-view@npm:3.1.0"
   checksum: 224549d6dd1d40342230de5c6d69cac5c3ed5c2f6a4437310f959aadc8db1d20b03da44a6e0de14d9419c6f9130ce51ec99a91b11bde55d4640f10551c89c213
@@ -4573,6 +4481,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"debug@npm:^4.1.1":
+  version: 4.3.5
+  resolution: "debug@npm:4.3.5"
+  dependencies:
+    ms: 2.1.2
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 7c002b51e256257f936dda09eb37167df952758c57badf6bf44bdc40b89a4bcb8e5a0a2e4c7b53f97c69e2970dd5272d33a757378a12c8f8e64ea7bf99e8e86e
+  languageName: node
+  linkType: hard
+
 "decimal.js@npm:^10.4.3":
   version: 10.4.3
   resolution: "decimal.js@npm:10.4.3"
@@ -4754,21 +4674,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"downshift@npm:^8.3.1":
-  version: 8.3.1
-  resolution: "downshift@npm:8.3.1"
-  dependencies:
-    "@babel/runtime": ^7.22.15
-    compute-scroll-into-view: ^3.0.3
-    prop-types: ^15.8.1
-    react-is: ^18.2.0
-    tslib: ^2.6.2
-  peerDependencies:
-    react: ">=16.12.0"
-  checksum: 3438ee9ff9662a4558fbe860e22e39269ad54f44d70dd381d4dd440129e648cc09993e2d1c7dbbe70fdbb23a66ec118c76253d689165d48020f9e670d9ce0d67
-  languageName: node
-  linkType: hard
-
 "eastasianwidth@npm:^0.2.0":
   version: 0.2.0
   resolution: "eastasianwidth@npm:0.2.0"
@@ -5727,6 +5632,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: adca162494a176ce9ecf4dd232f7b802956bb1966b37f60c15e49d2e7d961b66c60826366dc2649093cad5a0d69970cfa8875bd1695b5a1a2f33dcd2aa88da3c
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -7865,7 +7777,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.0.0, react-is@npm:^18.2.0":
+"react-is@npm:^18.0.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
   checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
@@ -8433,17 +8345,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"slate-hyperscript@npm:^0.100.0":
-  version: 0.100.0
-  resolution: "slate-hyperscript@npm:0.100.0"
-  dependencies:
-    is-plain-object: ^5.0.0
-  peerDependencies:
-    slate: ">=0.65.3"
-  checksum: 25c88fea4b9c6a8a57b2b6d5b1151190af815e84ebed76f43cc3c13b4831f26f55196a2a85a832692f3b6c9937aa9e75ee5db92fa603522c3ebdeecc692ff908
-  languageName: node
-  linkType: hard
-
 "slate-react@npm:^0.102.0":
   version: 0.102.0
   resolution: "slate-react@npm:0.102.0"
@@ -8958,7 +8859,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
+"tsconfck@npm:^3.0.3":
+  version: 3.1.0
+  resolution: "tsconfck@npm:3.1.0"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: c33cb853362dc45d5efbb4763b2cd07e5808533b6c6f84dad2dcc61f3fe6d22736ec9459233f47e9e90e8c430dd4ff284d5a09e85fa63ca570b9f144a87b1c76
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^2.0.0, tslib@npm:^2.1.0, tslib@npm:^2.4.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -9369,6 +9284,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-tsconfig-paths@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "vite-tsconfig-paths@npm:4.3.2"
+  dependencies:
+    debug: ^4.1.1
+    globrex: ^0.1.2
+    tsconfck: ^3.0.3
+  peerDependencies:
+    vite: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 7105ff641379f9f7055110f33067b236c8ee71b1390c0e6482412cdcc7a98c2e139c1c2a483d14fe9045d1977c14dc931e1ff302d6257ec919c70379db9d2419
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.0.0, vite@npm:^5.2.11":
   version: 5.2.11
   resolution: "vite@npm:5.2.11"