The Pterodactyl Panel frontend is a React application. The default look is functional but generic. If you run a branded hosting service or want a panel that looks distinct from every other Pterodactyl installation, you need to modify the source files and recompile.
This process is straightforward on the right version of Node.js. On the wrong version, or without specific environment flags, you get a wall of cryptographic library errors and a build that never finishes.
This guide gets you through the build process cleanly and covers the specific customizations most providers want.
Prerequisites
The Pterodactyl frontend build requires:
- Node.js v22.x or newer (v18 and v20 work but trigger OpenSSL issues on some setups)
- Yarn (not npm, the project uses Yarn for dependency management)
- At least 2 GB of free RAM on the build machine
Install Node.js via NVM for clean version management:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc
nvm install 22
nvm use 22
node --version # Should show v22.x.x
Install Yarn:
npm install -g yarn
yarn --version
The OpenSSL Legacy Provider Fix
Node.js 17 and later changed how OpenSSL providers work. The Webpack configuration used by older Pterodactyl panel versions uses MD4 hashing, which was removed from OpenSSL 3.x.
Without the legacy provider flag, your build fails with:
Error: error:0308010C:digital envelope routines::unsupported
Set this environment variable before running any build commands:
export NODE_OPTIONS=--openssl-legacy-provider
Add it to your shell profile to make it permanent:
echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.bashrc
source ~/.bashrc
Setting Up the Build Environment
Clone the panel source or navigate to your existing installation:
cd /var/www/pterodactyl
Install frontend dependencies:
yarn install
This downloads all JavaScript dependencies into node_modules. The first run takes a few minutes. Subsequent runs are faster.
Making Customizations
All React component source files live in resources/scripts/. The main layout, navigation, and page components are in subdirectories there.
Changing the panel name and logo:
The application name is defined in resources/scripts/App.tsx and referenced in multiple components. The logo appears in resources/scripts/components/elements/... depending on the panel version. Search for pterodactyl (case-insensitive) across all source files to find every text reference:
grep -ri "pterodactyl" resources/scripts/ --include="*.tsx" --include="*.ts"
Replace references with your brand name.
Custom colour scheme:
The panel uses Tailwind CSS. The configuration is in tailwind.config.js at the project root. Modify the colors section to change the palette:
colors: {
primary: {
50: '#eff6ff',
100: '#dbeafe',
// ... your brand colours
700: '#1d4ed8',
}
}
Custom server icons for panel navigation:
Import icons from heroicons or other icon libraries already in the project's dependencies. Replace the existing icon components in the sidebar navigation files.
Custom dashboard widgets:
Server stat cards are individual React components. Add new ones by creating a .tsx file in resources/scripts/components/dashboard/ and importing it into the main dashboard component.
Building for Production
Once your changes are in place, build the production assets:
yarn build:production
(Make sure NODE_OPTIONS=--openssl-legacy-provider is set before running this.)
The build process compiles, transpiles, and minifies all React source files into static assets in public/assets/.
A successful build finishes with output similar to:
webpack compiled successfully in 45321 ms
Production builds take longer than development builds. Expect 30 to 90 seconds on a standard VPS.
Development Mode for Faster Iteration
When actively editing and testing changes, run the development server instead of doing full production builds each time:
yarn run dev
This watches for file changes and recompiles only the changed modules. The panel auto-refreshes in the browser when files change. Development mode does not minify assets, so the output is larger but it rebuilds in under 5 seconds instead of 60.
Note: development mode assets serve from memory. You need to run a production build before deploying to a live server.
After the Build
Clear PHP and Laravel's cached views so the panel serves the new assets:
php artisan view:clear
php artisan cache:clear
Reload your web server:
systemctl reload nginx
Open the panel in an incognito window (to bypass browser cache) and verify your changes are live.
Community Themes
Several pre-built themes for Pterodactyl exist on BuiltByBit and GitHub. These ship as entire replacement frontend builds. Instead of modifying source and compiling yourself, you drop in the pre-built assets.
These themes vary in quality and security audit status. Review the source before installing any third-party theme on production infrastructure. A malicious theme has full access to everything a user does in the panel interface.
Space-Node's Custom Implementation
The panel interface at Space-Node uses a custom-compiled frontend with a distinct visual identity, modified navigation structure, and custom status visualisations. The build process is exactly what is described here. The difference is the months of accumulated design iteration that sits on top of it.
If you run a hosting business, this level of panel customization is what separates you from hosting providers who ship the stock Pterodactyl interface with a different logo.