skills.rest
pimcore
pimcoreOFFICIAL
Explore all skills by this author →
Website𝕏@pimcoreGitHub

pimcore-studio-ui-layout-components

Create two-column Pimcore Studio UIs with left navigation and tabbed detail panels.

13|Updated Apr 2, 2026
Search Tags:#layout#react#pattern#ui-components#pimcore-studio#configlayout
One-click install
npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-layout-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pimcore-studio-ui-layout-components
Source: https://github.com/pimcore/skills/tree/main/skills/pimcore-studio-ui-layout-components
Command: npx skills add https://github.com/pimcore/skills --skill pimcore-studio-ui-layout-components

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pimcore Studio UI layout components provide foundational building blocks (Content, Box, Flex, Space, ConfigLayout) to quickly assemble two-column editors, sidebars, and tabbed detail panes, reducing boilerplate and inconsistency across projects.

Core Features & Use Cases

  • Content, Box, Flex, Space: flexible primitives for spacing, padding, alignment
  • ConfigLayout: two-column layouts with an optional resizable divider
  • LIST-DETAIL-TABS-PATTERN: left searchable list with right-side tabbed editors
  • Real-world usage: entity editors, settings pages, dashboards, configuration UIs

Quick Start

Install and import the Pimcore Studio layout components to start composing two-column editors and tabbed detail views.

Frequently Asked Questions about pimcore-studio-ui-layout-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a two-column layout in Pimcore Studio with a left list and right tabbed panels?▼

Use the ConfigLayout component with the list-detail-tabs pattern to build a two-column Pimcore Studio layout. It provides a left searchable navigation list and right-side tabbed detail panels with dirty-state support, reducing boilerplate across entity editors and settings pages.

What UI components do I need to build Pimcore Studio dashboards and editors?▼

Building Pimcore Studio dashboards and editors requires Content, Box, Flex, Space, and ConfigLayout components. These primitives handle spacing, padding, alignment, and two-column resizable layouts to quickly assemble consistent configuration UIs.

Does the Pimcore Studio layout pattern support dirty-state tracking in tabbed detail panels?▼

Yes, the list-detail-tabs pattern supports dirty-state tracking in right-side tabbed detail panels. This allows Pimcore Studio editors and settings pages to track unsaved changes within the two-column layout structure.

Can I add a resizable divider to a two-column Pimcore Studio editor?▼

Yes, ConfigLayout supports an optional resizable divider for two-column layouts in Pimcore Studio. This enables flexible adjustment between the left navigation list and right tabbed detail panels when building entity editors or configuration UIs.

What's the best way to reduce boilerplate when building Pimcore Studio sidebars and tabbed detail panes?▼

Use the Pimcore Studio UI layout components to reduce boilerplate when building sidebars and tabbed detail panes. The foundational building blocks provide consistent spacing, alignment, and two-column patterns across multiple projects.

When do I need the list-detail-tabs pattern for Pimcore Studio configuration UIs?▼

Use the list-detail-tabs pattern when building Pimcore Studio configuration UIs that require a left searchable list and right-side tabbed editors. It suits entity editors, settings pages, and dashboards needing dirty-state tracking in tabs.

Related Skills

Explore More Software Engineering Skills→
pimcorepimcore
13

pimcore-studio-ui-widgets

Register and manage Pimcore Studio UI widgets across layout areas.

Official
Advanced
BSchafer01BSchafer01

tabbed-resizable-workspace

Create a workspace with a sticky left tabbed pane and resizable right viewer.

Community
Intermediate
pimcorepimcore
13

pimcore-studio-ui-tables-grids

Create type-safe interactive data tables with Grid and TanStack Table in Pimcore Studio UI.

Official
Intermediate
dylantarredylantarre
38

layout-primitives

Create reusable layout primitives with CSS flexbox, grid, and React components.

Community
Basic