Setup of Kirby Panel (Admin Interface)
Panel is Kirby's built-in content management interface. Works on Vue.js, opens at /panel (or customizable path). All panel behavior described via Blueprint files in YAML — no clicks in settings, everything versioned with code.
Initial Setup
On first /panel access without existing users, Kirby shows admin registration form. After creating — form closes automatically. To disable manual creation:
// site/config/config.php
return [
'panel' => [
'install' => false, // forbids user creation via browser
'slug' => 'manage', // /manage instead of /panel
],
];
Site Blueprint
# site/blueprints/site.yml
title: Site Settings
tabs:
general:
label: General
icon: settings
fields:
site_name:
type: text
label: Site Name
required: true
site_description:
type: textarea
label: Description
maxlength: 160
logo:
type: files
label: Logo
max: 1
query: site.files.filterBy("extension", "svg")
contacts:
label: Contacts
icon: email
fields:
email:
type: email
label: Email
phone:
type: tel
label: Phone
address:
type: textarea
label: Address
social:
label: Social Media
icon: globe
fields:
social_links:
type: structure
label: Links
fields:
platform:
type: select
options:
telegram: Telegram
vk: VKontakte
youtube: YouTube
github: GitHub
url:
type: url
Page Blueprint with Tabs
# site/blueprints/pages/service.yml
title: Service
columns:
left:
width: 2/3
sections:
content:
type: fields
fields:
title:
type: text
label: Title
required: true
intro:
type: writer
label: Introduction
marks:
- bold
- italic
body:
type: blocks
label: Content
fieldsets:
- heading
- text
- image
- list
- callout
right:
width: 1/3
sections:
meta:
type: fields
fields:
slug:
type: slug
label: URL
sync: title
status:
type: select
label: Status
options:
draft: Draft
listed: Published
sort:
type: number
label: Sort Order
icon:
type: files
label: Icon
max: 1
seo_title:
type: text
label: SEO Title
seo_description:
type: textarea
label: SEO Description
maxlength: 160
Access Rights Setup
Roles described in site/blueprints/users/:
# site/blueprints/users/editor.yml
title: Editor
permissions:
access:
panel: true
settings: false
users: false
pages:
create: true
delete: false
duplicate: true
update: true
changeSlug: false
changeStatus: true
files:
create: true
delete: true
update: true
user:
changePassword: true
changeRole: false
For fine-grained rights via code:
// site/config/config.php
return [
'permissions' => [
'pages' => [
'delete' => function (): bool {
/** @var \Kirby\Cms\User $user */
$user = kirby()->user();
// only admins can delete published pages
if ($this->isListed()) {
return $user->isAdmin();
}
return $user->role()->id() === 'editor';
},
],
],
];
Custom Panel Sections
Section is list of child pages or files with custom config:
# site/blueprints/pages/blog.yml
title: Blog
sections:
articles:
type: pages
label: Articles
template: article
status: all
layout: table
info: "{{ page.date.toDate('d.m.Y') }}"
columns:
title:
label: Title
width: 1/2
date:
label: Date
width: 1/4
tags:
label: Tags
width: 1/4
sortBy: date desc
empty: No articles yet
drafts:
type: pages
label: Drafts
status: draft
template: article
layout: list
Pages Field for Links
related_articles:
type: pages
label: Related Articles
query: site.find('blog').children.listed
max: 3
template: article
layout: cards
image:
query: page.cover.toFile
cover: true
Card Appearance Customization
# in section or pages field
info: "{{ page.date.toDate('d.m.Y') }} · {{ page.readingTime }} min"
image:
query: page.cover.toFile
ratio: 3/2
cover: true
Panel CSS Override
// site/config/config.php
return [
'panel' => [
'css' => 'assets/panel.css',
],
];
/* assets/panel.css */
:root {
--color-black: #1a1a2e;
--color-focus: #e94560;
}
.k-header-logo img {
height: 32px;
}
Development Timelines
Basic panel setup with blueprints for 5–7 page types and two roles: 1–2 days. With complex structure fields, custom rights and custom CSS: 2–3 days.