A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

Overview

React Pluto Component Design System + UI Kit

Product Hunt Banner (Light)

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

Open in Gitpod

React Pluto Components - Small but beautiful React components from the planet Pluto. | Product Hunt

npm install react-pluto --save-dev

How to import and start using Pluto Components

  • For an instance, consider a component view named as ScreenView, and we need to use a button component.
import { Button } from 'react-pluto';

export default function ScreenView() {
    return (
        <div className="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';

export default function ScreenView() {
    return (
        <Button style={{ background: 'black', color: 'white', width: '100%' }}>
            Pluto Button
        </Button>
    )
}
import React, { useState } from 'react';
import { Button } from 'react-pluto';

export default function ScreenView() {
    const [currentValueRef, setCurrentValue] = useState(0);
    return (
        <React.Fragment>
            <h2>Current Value is: {currentValueRef}</h2>
            <Button onClick={() => setCurrentValue(++currentValueRef)}> 
                Pluto Button
            </Button>
        </React.Fragment>
    )
}

Tools and Technologies used

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

Comments
  • Feature: Create a card wrapper component

    Feature: Create a card wrapper component

    Is your feature request related to a problem? Please describe. To create a card wrapper component.

    Describe the solution you'd like The card wrapper component will be working as a childrenProp wrapper with some existing styling methods such as a border-radius, a thin border, padding.

    Describe alternatives you've considered All the above mention features will be default but are operational, means developer can pass props to update, remove the existing stylings of the card component. By default, all the styles should be similar to the design system.

    Additional context Follow the design systems and assets in the Figma file

    A contextual image of how the card component should look like

    image

    enhancement no-issue-activity 
    opened by yashsehgal 1
  • Bug/Issue: Add border-radius inherit properties to Elevation wrapper component

    Bug/Issue: Add border-radius inherit properties to Elevation wrapper component

    Describe the bug The elevation wrapper is not changing it's border-radius according to its children component.

    Expected behavior It should completely wrap the children component and inherit overflow and border properties.

    Screenshots image

    bug no-issue-activity 
    opened by yashsehgal 1
  • Feature: Flex & Grid wrapping components

    Feature: Flex & Grid wrapping components

    Is your feature request related to a problem? Please describe. Create flex and grid wrapper components to utilize the features.

    Describe the solution you'd like Flex + Grid wrappers will be wrapping up components as children and will be using the properties provided by these components.

    Describe alternatives you've considered

    • Flex will be having properties such as align-items, justify-content, flex-direction, gap, row-gap, and other properties required to operate a Flex container
    • Gird will be having all the above similar properties as Flex + properties such as grid-col and grid-row count.
    no-issue-activity 
    opened by yashsehgal 1
  • Create github-workflows for better developer/contributor experience

    Create github-workflows for better developer/contributor experience

    Is your feature request related to a problem? Please describe. Create github-workflows for better developer/contributor experience.

    Describe the solution you'd like Creating these workflow features will give the developer or contributor ease to contribute more easily and focus more on the issue and the feature development part.

    Describe alternatives you've considered Things to add in these workflows

    • Issue Templates and Labelers
    • PR Templates
    • Contributing/Issue raising actions and bot-replies
    enhancement 
    opened by yashsehgal 1
  • Feature: To create button component

    Feature: To create button component

    Is your feature request related to a problem? Please describe. To create a button component.

    Describe the solution you'd like The button component should have a set of variations with understandable states and more usable UX.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Buttons are designed are present in Figma

    opened by yashsehgal 0
  • Feature: Testing feature responses

    Feature: Testing feature responses

    Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

    Describe the solution you'd like A clear and concise description of what you want to happen.

    Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

    Additional context Add any other context or screenshots about the feature request here.

    opened by yashsehgal 0
  • [ImgBot] Optimize images

    [ImgBot] Optimize images

    Beep boop. Your images are optimized!

    Your image file size has been reduced by 16% 🎉

    Details

    | File | Before | After | Percent reduction | |:--|:--|:--|:--| | /docs/static/img/tutorial/docsVersionDropdown.png | 24.51kb | 12.58kb | 48.69% | | /docs/static/img/tutorial/localeDropdown.png | 29.32kb | 16.08kb | 45.16% | | /docs/static/img/undraw_docusaurus_mountain.svg | 30.72kb | 29.17kb | 5.04% | | /docs/static/img/undraw_docusaurus_react.svg | 35.13kb | 33.57kb | 4.43% | | /docs/static/img/undraw_docusaurus_tree.svg | 11.51kb | 11.47kb | 0.33% | | /assets/GithubBannerLight.svg | 24.83kb | 24.81kb | 0.08% | | /assets/GithubBannerDark.svg | 24.82kb | 24.80kb | 0.07% | | | | | | | Total : | 180.83kb | 152.47kb | 15.68% |


    📝 docs | :octocat: repo | 🙋🏾 issues | 🏪 marketplace

    ~Imgbot - Part of Optimole family

    opened by imgbot[bot] 0
Owner
Yash Sehgal
Design Systems. UI Engineering. Building @DesignSystemsOSS | Previously Frontend SDE Intern @economizecloud | Open Source @asyncapi
Yash Sehgal
An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

Kelechi Okoronkwo 7 Sep 22, 2022
Beautiful theme for Obsidian, Base on Minimal theme

?? obsidian_orange 是什么? obsidian_orange 是一款基于 minimal theme 定制的主题。 ✨ obsidian_orange 实现了什么功能? 多样式“提示块” 图片并列显示 高亮块 & 文本多颜色高亮 徽章(Badge):在标题或文本的右上角添加状态信息

echoxu 84 Jan 6, 2023
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k Jan 4, 2023
Set of react components based on styled-components

React to styled Links Documentation Contributing Ask question or give feedback Packages @react-to-styled/components – all components in one package @r

null 11 Jan 1, 2023
:handbag: A beautiful CSS library to kickstart your projects

Picnic CSS Unpack your meal and get coding. An invasive CSS library to get your style started. Getting started There are many ways of using Picnic CSS

Francisco Presencia 3.6k Jan 4, 2023
Minimal Portfolio Page Built with React

Minimal Portfolio Page Built with React Documentation : https://github.com/singhkshitij/My-Landing-Page/wiki/ Demo https://singhkshitij.github.io/My-L

Kshitij Singh 154 Dec 19, 2022
Small utility for react-redux's `useSelector` that allows passing args.

use-selector-with Monorepo for the following two packages: use-selector-with: Small utility for react-redux's useSelector that allows passing args. es

Codecademy 5 Jan 28, 2022
A beautiful vue.js homepage template, very useful

Vue Nice HomePage DEMO is here About particles-bg-vue library This project uses the react particle background component library https://github.com/lin

Nordic Giant 38 Dec 24, 2022
A Simple and beautiful template for blog or portfolio using Next js.

Next js Blog Configuration Update your name in theme.config.js or change the footer. Update your name and site URL for the RSS feed in scripts/gen-rss

pritu 6 Apr 20, 2022
The fastest way to build beautiful Electron apps using simple HTML and CSS

Photon UI toolkit for building desktop apps with Electron. Getting started Clone the repo with git clone https://github.com/connors/photon.git Read th

Connor Sears 9.9k Dec 29, 2022
Minimal landing page for developers

Dev Landing Page Minimal landing page for developers. Developers don't talk much. Their code does all the talking. So here's a minimal landing page fo

Dinesh Pandiyan 1.2k Jan 4, 2023
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
A small codebase to simulate environment of a real software engineering job built using html/css/js

How to setup your development environment? Before you can begin, you will need git, node, and a text editor. If you are running Windows, we recommend

JobSimulator 89 Dec 21, 2022
:book: Opinionated CSS styleguide for scalable applications

css Opinionated CSS styleguide for scalable applications This guide was heavily inspired by experiments, awesome people like @fat and @necolas and awe

Guilherme Coelho 411 Nov 30, 2022
A built-time CSS library for styling React components.

Stylin Stylin is a build-time CSS library that offers an elegant way to style React components. It extends CSS Modules and adds some missing features

Sultan 173 Dec 30, 2022
Startup Landing Page Components for React.js

neal-react neal-react is a collection of reactjs components to quickly build landing pages. I found that using hosted services like Launchrock doesn't

Denny Britz 1.4k Nov 30, 2022
Apply CSS based on your browser's text rendering engine

Type Rendering Mix Type Rendering Mix website Type Rendering Mix detects your browser’s text rasterizer and antialiasing method by parsing the user ag

Bram Stein 496 Dec 6, 2022
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023