react-soft-ui

React component library for soft / neumorphic design

View the Storybook for these components here

Table of contents

• Usage
• Getting started
  • Prerequisites
  • Installing and running
  • Running the tests
• Deployment
• Built with
• Contributing
• Versioning
• Release history
• Meta
• License
• Known issues / bugs
• Feature roadmap
• Acknowledgements

Usage

npm i react-soft-ui

import React from "react";

import { SoftButton } from "react-soft-ui";
import "react-soft-ui/dist/esm/index.css";

function App() {
  return <SoftButton>Button</SoftButton>;
}

export default App;

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes

Prerequisites

What things you need to install the software and how to install them

If you don't have Node.js 14+ and npm installed, install them from here.

Installing and Running

In the root directory:

npm install

npm run storybook

Running the tests

npm run test

Built with

• React - Front-end framework
• styled-components - CSS-in-JS
• TypeScript - Strongly-typed programming language that builds on JavaScript
• Storybook - UI component explorer
• rollup - JavaScript module bundler
• Jest - JavaScript testing framework

Contributing

1. Fork it (https://github.com/bryce-mcmath/react-soft-ui/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

Versioning

SemVer will only start being used for versioning once the base library is complete (1.0.0). For the versions available, see the tags on this repository.

Release history

• 0.1.2
  • WIP
  • First few components
• 0.1.1
  • The first release
  • Just the scaffolding of the library

Meta

Bryce McMath – [email protected]

https://github.com/bryce-mcmath

License

MIT

See the LICENSE.md file for details

Known issues / bugs

• Infant library, still needs more experienced eyes to guide its development

To add an issue, start a new one here.

Feature roadmap

• Radio buttons
• Checkbox
• Switch
• Select dropdown
• Inputs
• Choice group
• Verticle and horizontal sliders
• Verticle and horizontal progress bars
• Circular progress bar

If you'd like to add a feature yourself, please see the Contributing guidelines.

Acknowledgements

• Shout out to all the attempts to build a neumorphic React library thus far, definitely drawing inspiration from some of them
• There are some major drawbacks to neumorphic style that are very difficult to practically address but it's just too cool to ignore