Home
Examples
Typography

ui-neumorphism is a react component library designed on the "new skeuomorphism" UI/UX trend.


Program

Arm

training

In progress..

Weight

training

Have finished

Run

training

In progress..

Yoga

training

No task

Courses Collection

Courses I attended

11 courses in total

Plan list

8,690

Goal: 12k

Completed: 3 group

Goal: 4 group

Completed: 6 group

Goal: 6 group

Fitness App by Jray. UI Created using components from this library.

Installation

npm install --save ui-neumorphism

Usage

Components in this package can be imported as individual React component.

import { Card, Button } from 'ui-neumorphism'

Quick usage example to get you started:

import React, { Component } from 'react'

import { Button } from 'ui-neumorphism'
import 'ui-neumorphism/dist/index.css'

class Example extends Component {
  render() {
    return <Button />
  }
}

Theming

In neumorphism UI, theming is dead simple.

It is accomplished by using and modifying root css variables for colors.

To change the theme, you modify the root css variables directly or with the help of overrideThemeVariables() function, like this:

import React, { Component } from 'react'

import { overrideThemeVariables } from 'ui-neumorphism'
import 'ui-neumorphism/dist/index.css'

class App extends Component {
  componentDidMount() {
    // takes an object of css variable key-value pairs
    overrideThemeVariables({
      '--light-bg': '#E9B7B9',
      '--light-bg-dark-shadow': '#ba9294',
      '--light-bg-light-shadow': '#ffdcde',
      '--dark-bg': '#292E35',
      '--dark-bg-dark-shadow': '#21252a',
      '--dark-bg-light-shadow': '#313740',
      '--primary': '#8672FB',
      '--primary-dark': '#4526f9',
      '--primary-light': '#c7befd'
    })
  }

  ...
}

Using the power of CSS variables, you can change the theme anywhere in the entire application.

Live theme example

Toggle below buttons to see change in theme

Author

Ankit Kumar Pandit