skills.rest
webiny
webinyOFFICIAL
Explore all skills by this author →
Website𝕏@WebinyCMSGitHub

webiny-admin-ui-extensions

Customize Webiny Admin UI with white-labeling, custom columns, dialogs, drawers, and Lexical plugins.

8.0k|673|Updated Jan 9, 2018
Search Tags:#dialogs#drawers#admin UI#webiny#white-labeling#reAct#CMS extension
One-click install
npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-ui-extensions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webiny-admin-ui-extensions
Source: https://github.com/webiny/webiny-js/tree/main/skills/user-skills/admin/ui-extensions
Command: npx skills add https://github.com/webiny/webiny-js --skill webiny-admin-ui-extensions

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires zod.

What problem does it solve?

Developers extending Webiny need to rebrand the Admin app, add custom columns to content entry lists, build custom page-type forms, and register reusable dialogs or drawers without modifying core platform code.

Core Features & Use Cases

  • White-Labeling: Set theme colors, logos, and app titles via AdminConfig components wrapped in AdminConfig.Public.
  • Custom Data List Columns: Add columns to content entry tables with simple path bindings or custom React cell components, restricted by model IDs.
  • Named Dialogs and Drawers: Register dialogs and drawers by name, open them from anywhere with typed params validated by Zod schemas.
  • Use Case: A team white-labels the Admin app with their company logo and colors, adds an Email Type column to a contact submission list view, and opens a named drawer showing record details when a row action is clicked.

Quick Start

Ask the AI to create a Webiny Admin extension that sets a custom logo and title, then register it in webiny.config.tsx with the full .tsx file path.

Frequently Asked Questions about webiny-admin-ui-extensions

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

FAQPage Schema
How do I white-label the Webiny Admin app?▼

Use AdminConfig components like Theme.Color, Title, and Logo wrapped in AdminConfig.Public inside a React component. Register the component with Admin.Extension in webiny.config.tsx, including the full .tsx file path in the src prop.

How to add custom columns to Webiny content entry lists?▼

Use ContentEntryListConfig.Browser.Table.Column with a name, header, and either a path for simple data or a custom cell component. Restrict columns to specific content models with the modelIds prop and position them with the after prop.

Can I open dialogs with typed parameters in Webiny Admin?▼

Yes, register a named dialog with AdminConfig.Dialog and open it using useOpenDialog with params. Pass a Zod schema to useDialog inside the dialog to get fully typed params.

What is the difference between Webiny named dialogs and drawers?▼

Only one named dialog can be open at a time, while multiple drawers stack on top of each other. Opening the same drawer name again is a no-op, and closeNamedDrawer without arguments closes the topmost drawer.

Why does my Webiny Admin extension fail to build?▼

The most common cause is omitting the .tsx file extension in the Admin.Extension src prop. Always use the full path like /extensions/MyExtension.tsx rather than /extensions/MyExtension.

Related Skills

Explore More Software Engineering Skills→
Dispo-GeniusDispo-Genius

authoring-claude

Document how to create and register Claude Code extensions with SKILL.md frontmatter rules.

Official
Advanced
Black-Sugar-21Black-Sugar-21

blacksugar-web-development

Unify Angular 21 workflows for building, testing, and deploying BlackSugar21.

Official
Advanced
sharkitect-solutionssharkitect-solutions

shopify-development

Develop Shopify apps, themes, and extensions using Shopify CLI and GraphQL Admin API.

Community
Intermediate
ShopifyShopify
491

shopify-admin

Generate Shopify Admin GraphQL queries and mutations validated against the latest schema.

Official
Intermediate