neumorphic-react
v0.1.7
Published
![Preview](/assets/screenshot.png)
Downloads
8
Readme
Neumorphic-UI v0.1
What this is
This is a React component library built on styled-components based on the style of neumorphism.
Formal documentation and website coming soon at neumorphic-ui.com (not yet live.)
As of this writing, completed components include:
- AppBar
- Button
- Checkbox
- Drawer
- Input
- MenuItem
- Paper
- RadioButton
- Select
- Switch
- Typography
What is Neumorphism/Neomorphism
It combines elements of 3D and soft lighting to create a pseudo-realistic effect. This article explains it way better.
How to use this
- Install the project with
npm i neumorphic-react
- Import a component (i.e. a button) with:
import { Button } from 'neumorphic-react
- Create a button with some text:
<Button>Hello</Button>
Features
This library will let you customize stylistic elements such as:
- ( In Development ) Direction of light ( this impacts shadows and highlights)
- ( In Development )Colors. Why is this special? Neumorphism requires the use of highlights and shadows to achieve a realistic effect. These shadows and highlights are variations of some base color. It would be tedious to recalculate thsee everytime. This library will allow you to specify a base color and auto-calculate the appropriate light/shadow colors.
Migrating from Material-UI
If you are a frequent user of Material-UI ( I am very grateful for their work), you may notice that the components in this library are named the same as those in Material-UI. This is intentional.
To convert your Material-UI to Neumorphic-UI, simply change the name of your imports.
For example:
Change
import { Button } from '@material-ui/core'
to
import { Button } from 'neumorphic-ui'
That's it.
Bugs
Please help me find bugs. This project is in the very early stages so there will likely be many.
Want to get involved?
Send me a message on Github or Twitter (@turckalicious)