Skip to content
Get packs

Photon

A CSS toolkit for building desktop-style app interfaces with Electron.

GitHub Download source
Stars
10.1k
Forks
564
Licence
MIT
Language
CSS
Last update
7 months ago
Type
Library

What it is

Photon is a UI toolkit that provides compiled CSS, Entypo icon fonts, and a template Electron app to help developers style desktop applications built with HTML and CSS. It is meant for people who already build Electron apps and want ready-made interface styling instead of writing it from scratch. The README describes it as a way to build desktop apps with Electron, though it does not give detailed component documentation itself; that lives on the project's documentation site.

  • Start a desktop app from the included template-app with its index.html, app.js, and menu.js
  • Apply the compiled photon.css stylesheet to an Electron app's HTML pages
  • Use the bundled Entypo icon fonts in your interface

Great for

  • Developers already building Electron desktop apps who want consistent native-looking styling
  • Developers who prefer plain HTML and CSS over a JavaScript component framework
  • Prototypers who want a quick starting template with a menu and window structure

Not ideal for

  • People who need a React or Vue component library, since the README describes plain CSS and HTML assets
  • Anyone wanting a stable, actively updated release, because the README warns the master branch is unstable and no latest release is listed
  • Non-developers, since it requires building and running an Electron app
Step-by-step guide: how to use PhotonInstall, first run, examples, tips and FAQs
Photon alternativesBootstrap vs PhotonPhoton vs Tailwind CSSAnt Design vs Photon

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js (version not specified in README) · Git

    Clone the repository

    git clone https://github.com/connors/photon.git

    Install node dependencies

    npm install

    Open the example app

    npm start
  2. 2

    Run it

    • Clone the repository with git clone.
    • Run npm install in the photon folder to install dependencies.
    • Run npm start to open the example app.
    • Optionally, run npm run build in a second terminal to rebuild photon.css after editing Sass files.
  3. 3

    Get the most out of it

    • Check the tagged downloads for a stable version instead of using the unstable master branch
    • Read the documentation site at photonkit.com for component details and usage
    • Edit the Sass source files and run npm run build to produce a custom photon.css
    • Use the template-app folder as a starting point for your own Electron app

Downloads

Source code (.zip)master branch · straight from GitHub

Strengths

  • Simple to adopt: the README shows the core assets are compiled CSS, fonts, and a template app
  • MIT licensed, so it can be used in commercial and personal projects
  • Has a large following on GitHub with over 10,000 stars

Trade-offs

  • The README says the master branch is unstable and points to tagged downloads for stable copies
  • Documentation build instructions reference older tooling such as Jekyll v2.5.x, which may be dated
  • No latest release is listed, and the README does not describe current maintenance status

How it compares

ProjectStarsTypeLevelUpdatedBest for
photon (this)10.1kLibraryintermediate7 months agoDevelopers already building Electron desktop apps who want consistent native-looking styling
bootstrap175kLibrarybeginner4 days agoDevelopers building responsive websites or web app interfaces quickly
tailwindcss98.3kLibraryintermediate4 days agoWeb developers who build their own interfaces and want to avoid writing large custom stylesheets
ant-design100kLibraryintermediate4 days agoReact developers building admin dashboards or internal business tools
electron124kFrameworkintermediate4 days agoWeb developers who want to ship a desktop app using skills they already have
bulma50kLibrarybeginner2 months agoDevelopers who want a quick, consistent styling baseline for a web page

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.