NES.css
NES.css is a pure-CSS framework that styles UI elements—buttons, inputs, containers, icons, and dialogs—with a retro 8-bit, NES-inspired pixel aesthetic. It ships only components with no JavaScript dependency, leaving layout up to the developer.
Embed badge
[](https://opensources.dev/resource/nescss)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedNo commits in over a year
- No known vulnerabilitiesNo OSV advisories
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
Our analysis
A CSS-only framework that applies a nostalgic NES/8-bit pixel-art look to common UI components like buttons, form inputs, containers, badges, and icons.
When to use NES.css
Use it for game-themed sites, retro portfolios, hackathon projects, landing pages, or any UI where a playful pixel-art style fits and you want quick styling without writing custom CSS.
When not to
Avoid it for production apps needing comprehensive design systems, responsive grids/layout utilities, accessibility-first components, or a neutral/modern look — reach for Tailwind, Bootstrap, or Bulma instead.
Strengths
- Zero JavaScript dependency — just include a stylesheet
- Distinctive, well-executed 8-bit visual identity
- Tiny install via npm/CDN and easy to drop in
- Available as Sass source for customization
- Large community following and recognition
Trade-offs
- Provides components only, no layout/grid system
- Niche aesthetic unsuitable for most professional UIs
- Pairing requires pixel fonts (e.g. Press Start 2P) with limited non-English glyph coverage
- Limited browser testing (IE/Edge untested) and accessibility is not a focus
- Maintenance has slowed; not a fast-moving project
Maturity
A popular and stable project (20k+ stars) with multilingual docs and CDN distribution, but development activity is low and its scope is intentionally narrow and decorative rather than a full design system.
日本語 / 简体中文 / Español / Português / Русский / Français
NES.css is a NES-style(8bit-like) CSS Framework.
Installation
Styles
NES.css is available via either npm (preferred), Yarn, or a CDN.
via package manager
npm install nes.css
# or
yarn add nes.css
Our package.json contains some additional metadata under the following keys:
sass- path to our main Sass source filestyle- path to our non-minified CSS
AltCSS(sass, scss...)
// style.scss
@import "./node_modules/nes.css/css/nes.css"
JavaScript
// script.js
import "nes.css/css/nes.min.css";
You need to install css-loader.
HTML
<!-- index.html -->
<html>
<head>
<link rel="stylesheet" href="./node_modules/nes.css/css/nes.min.css">
</head>
<body></body>
</html>
via CDN
Import the CSS via a <link /> element:
<!-- minify -->
<link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
<!-- latest -->
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<!-- core style only -->
<link href="https://unpkg.com/nes.css/css/nes-core.min.css" rel="stylesheet" />
Fonts
NES.css doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside the library.
LanguageFont(Default)Press Start 2PEnglishKongtextJapanese美咲フォントJapaneseNu もちKorean둥근모꼴ChineseZpix (最像素)
Usage
NES.css only provides components. You will need to define your own layout.
The recommended font for NES.css is Press Start 2P. However, Press Start 2P only supports English characters. When you're using this framework with any language other than English, please use another font. Follow the Google Fonts instructions about how to include them, or simply include it as below:
<head>
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
<link href="https://unpkg.com/nes.css/css/nes.css" rel="stylesheet" />
<style>
html, body, pre, code, kbd, samp {
font-family: "font-family you want to use";
}
</style>
</head>
CSS Only
NES.css only requires CSS and doesn't depend on any JavaScript.
Browser Support
NES.css is compatible with the newest version of the following browsers:
Chrome
Firefox
Safari
Untested
IE/Edge
Copyright and license
Code and documentation copyright 2018 B.C.Rikko. Code released under the MIT License. Docs released under Creative Commons.
Development
If you'd like to help us out with the project, we welcome contributions of all types! Check out our CONTRIBUTING.md for more details on how you can help make NES.css amazing!