Configure.mdx

import { Meta } from '@storybook/blocks'

import Github from './assets/github.svg' import Discord from './assets/discord.svg' import Youtube from './assets/youtube.svg' import Tutorials from './assets/tutorials.svg' import Styling from './assets/styling.png' import Context from './assets/context.png' import Assets from './assets/assets.png' import Docs from './assets/docs.png' import Share from './assets/share.png' import FigmaPlugin from './assets/figma-plugin.png' import Testing from './assets/testing.png' import Accessibility from './assets/accessibility.png' import Theming from './assets/theming.png' import AddonLibrary from './assets/addon-library.png'

export const RightArrow = () => ( <svg viewBox='0 0 14 14' width='8px' height='14px' style={{ marginLeft: '4px', display: 'inline-block', shapeRendering: 'inherit', verticalAlign: 'middle', fill: 'currentColor', 'path fill': 'currentColor', }}

<path d='m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z' />

)

# Configure React NES Components

Welcome to React NES Components! This guide will help you set up and configure the components in your project. Below, you'll find essential information about styling, theming, and integration with your application.

NES-Style Styling

Learn how to customize the retro NES look and feel of your components. From pixel-perfect borders to authentic color palettes, make your UI truly nostalgic.

Learn more

Component Context

Understand how to properly integrate NES components with your React application's context providers and state management.

Learn more

Assets and Resources

Access and customize the pixel art assets, fonts, and other resources that make your NES components authentic.

Learn more

# Advanced Features

Take your NES components to the next level with these advanced features and integrations.

Component Documentation

Explore detailed documentation for each NES component, including props, examples, and usage guidelines.

Learn more

Testing

Learn how to write effective tests for your NES components, ensuring they work perfectly in all scenarios.

Learn more

Accessibility

Make your NES components accessible while maintaining their retro aesthetic.

Learn more

Custom Theming

Create custom themes for your NES components while preserving their authentic look and feel.

Learn more

Contribute to the React NES Components project.

  <a
    href="https://github.com/koji/react-nes-components"
    target="_blank"
  >Star on GitHub<RightArrow /></a>
</div>

<style> {` .sb-container { margin-bottom: 48px; } .sb-section { width: 100%; display: flex; flex-direction: row; gap: 20px; } img { object-fit: cover; } .sb-section-title { margin-bottom: 32px; } .sb-section a:not(h1 a, h2 a, h3 a) { font-size: 14px; } .sb-section-item, .sb-grid-item { flex: 1; display: flex; flex-direction: column; } .sb-section-item-heading { padding-top: 20px !important; padding-bottom: 5px !important; margin: 0 !important; } .sb-section-item-paragraph { margin: 0; padding-bottom: 10px; } .sb-chevron { margin-left: 5px; } .sb-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 32px 20px; } .sb-socials { display: grid; grid-template-columns: repeat(4, 1fr); } .sb-socials p { margin-bottom: 10px; } .sb-explore-image { max-height: 32px; align-self: flex-start; } @media screen and (max-width: 600px) { .sb-section { flex-direction: column; } .sb-features-grid { grid-template-columns: repeat(1, 1fr); } .sb-socials { grid-template-columns: repeat(2, 1fr); } } `} </style>