The truth about Pelican Panel themes

Are you planning to create a theme for Pelican Panel with unique UI features for your commercial hosting? Then this is going to cost you $6,000 per year! Please note that this statement reflects our subjective viewpoint and our interpretation of a Pterodactyl/Pelican Panel theme.

First of all, it is important to know how the front end of the Pelican Panel works. Most of the Pelican dev team originally came from Pterodactyl, and so Pelican is a fork of that. Pterodactyl works mostly with react and tailwindcss for the frontend.

There is major differences between plain HTML and React that you need to understand. The traditional method of creating a website using plain HTML is to create separate files for HTML, CSS, and JavaScript. These files are then linked to the HTML document to form the basis of a web page. If you want to create a pop-up window that appears when a button is clicked, you have to write the HTML in the HTML file, style the pop-up in the CSS file, and write the function to open and close the pop-up in the Javascript file. But in this file are also written other parts of the website, which results in very long files.

With React, you write your HTML, CSS, and Javascript in the same file. React uses a component-based architecture, where different parts have their own separate files. This approach allows you to easily reuse components across web pages, but also to customize them in one place. So with the last example, if you want to make a pop-up, you create a file called "Popup.js" and inside this file you write your HTML, CSS, and Javascript, which you than have to import to the webpage you want to.

Pterodactyl/Pelican Panel uses exactly this structure. For example, all buttons on the panel can be changed by changing 1 file "Button.tsx", which contains all HTML, CSS and Javascript of this component. So if you want to change the color, this is the file you need, the same goes for the input fields, boxes, popups, and any other component on the panel.

The most popular ones modify all of these files to create a unique and engaging experience on your game panel. This requires a deep understanding of React, Tailwind, CSS, and the Pterodactyl/Pelican panel file structure.

But I hear you thinking: "why will a unique theme for Pelican Panel cost me $6,000 a year, in another blog it was said that the plugin system also supports themes." And yes it is true, there will be a plugin system that supports themes too, but there is a catch, it can overwrite the CSS, and not modify the HTML or Javascript of the frontent. What the theming system does is create a CSS file, like the traditional way of making websites using pure HTML. And this will override the styling inside the React components. This means you're restricted to tweaking colors and styling of components, but you can't adjust their layout or functionality.

If you want to create a theme that changes the way the console works or the way graphs are displayed, you have to modify the React files anyway. But because the Pelican development team has licensed it under AGPL-3, you're forced to pay $6,000 a year to keep the theme private when using it commercially.

A good alternative for Pelican Panel is Blueprint.zip, it's an open source and MIT licensed system that allows users to use extension APIs, inject HTML, modify stylesheets, package extensions and much more. Learn here more about Blueprint.zip