https://github.com/koji/react-nes-components

react ui-components with nes.css
https://github.com/koji/react-nes-components

components es6 js nes-css nescss npm-package reactjs styled-components typescript vite

Last synced: about 1 month ago
JSON representation

react ui-components with nes.css

• Host: GitHub
• URL: https://github.com/koji/react-nes-components
• Owner: koji
• License: mit
• Created: 2019-10-11T09:20:07.000Z (almost 6 years ago)
• Default Branch: develop
• Last Pushed: 2025-06-03T07:29:35.000Z (about 1 month ago)
• Last Synced: 2025-06-03T18:13:03.028Z (about 1 month ago)
• Topics: components, es6, js, nes-css, nescss, npm-package, reactjs, styled-components, typescript, vite
• Language: TypeScript
• Homepage: https://react-nes-components.netlify.app/
• Size: 7.23 MB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# nes-components

[![Generic badge](https://img.shields.io/badge/npm-v0.0.15-.svg)](https://shields.io/)

[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/) [![Greenkeeper badge](https://badges.greenkeeper.io/koji/nes-components.svg)](https://greenkeeper.io/)

[![Netlify Status](https://api.netlify.com/api/v1/badges/727cb6ad-c35e-4c06-bd80-0775befda5a0/deploy-status)](https://app.netlify.com/projects/react-nes-components/deploys)

### What is `nes-components`?

`nes-components` is a react component that is using NES.css.

### What is `NES.css`?

NES.css is a NES-style(8bit-like) CSS Framework.

https://github.com/nostalgic-css/NES.css

### How to use this?

#### install

```

$ yarn add nes-components

$ npm i nes-components

```

#### Doc

Please see StoryBook https://nes-components.netlify.com/    

#### samples ToDo

Sample codes are in Storybook(`Typescript`).

Please check it out.

`js` samples will be added soon.

### Use Storybook

```

$ cd nes-components

$ yarn & yarn storybook

or

$ npm i & npm run storybook

```

The terminal will open [localhost:9009](localhost:9009).

You will see like below.

![storrybook](./assets/storybook.png)