A package of small but beautiful React components from the planet Pluto. To install the latest version, run this installation command.

npm install react-pluto --save-dev

• For an instance, consider a component view named as ScreenView, and we need to use a button component.

import{Button}from'react-pluto';exportdefaultfunctionScreenView(){return(<divclassName="screen-view"><Button> Pluto Button </Button></div>)}

• Passing custom properties is extremely easy in these components. You can easily pass style, className, id, methods, actions as props.

import{Button}from'react-pluto';exportdefaultfunctionScreenView(){return(<Buttonstyle={{background: 'black',color: 'white',width: '100%'}}> Pluto Button </Button>)}

importReact,{useState}from'react';import{Button}from'react-pluto';exportdefaultfunctionScreenView(){const[currentValueRef,setCurrentValue]=useState(0);return(<React.Fragment><h2>Current Value is: {currentValueRef}</h2><ButtononClick={()=>setCurrentValue(++currentValueRef)}> Pluto Button </Button></React.Fragment>)}

• React

• CSS/SCSS

• Figma

• Notion

• Creative Mind

• You can check out more detailed resources

  • Figma Design File: https://www.figma.com/file/kNV6TrZSPWq2dllmwFtvDl/React-Pluto-Component-Design-System?node-id=0%3A1
  • Notion Developer Documentation: https://yashsehgal.notion.site/React-Pluto-Component-Design-System-UI-Kit-c50c6c5c6b46450bbee64a069dd8834a

We would love if you will raise issues and new feature requests to make this library more better. Thanks for checking out, hope you liked it, if yes then please leave a star ⭐