Mui-clone NPM | npm.io

Mui Clone

this is a "clone" of material ui using atomic-library-core. it's a recreation of the most components

differences

in this package you need to replace "variant" with "type" and "color" with "subType". for instance

    <Btn type="filled" subType="primary">Click here</Btn>
    <Btn type="ghost" subType="success">Click here</Btn>

types

sub types

Note: if the component is an input, you can use inputType to set the type of the input

<Btn component="H1" >click</Btn>
//instead of using
<Btn component="h1" >click</Btn>
//or
<Avatar component="Button" >click</Avatar>
//instead of using
<Avatar component="button" >click</Avatar>

Examples

import { Btn, BtnGroup, Checkbox, ...rest } from "mui-clone"

    <Btn>default</Btn>
    <Btn type='filled' subType='primary'>Click here</Btn>
    <Btn type='ghost' subType='success'>Click here</Btn>
    <Btn type='smooth' subType='danger'>Click here</Btn>
    <Btn type='text' subType='secondary'>Click here</Btn>

    <BtnGroup>
        <Btn>Click here</Btn>
        <Btn type='ghost' subType='success'>
            Click here
        </Btn>
        <Btn type='smooth' subType='danger'>
            Click here
        </Btn>
        <Btn type='text' subType='secondary'>
            Click here
        </Btn>
    </BtnGroup>
    <BtnGroup fullRounded mT='10px' type='text' subType='success' >
        <Btn>Click here</Btn>
        <Btn>Click here</Btn>
        <Btn>Click here</Btn>
    </BtnGroup>

    <Checkbox />
    <Checkbox defaultChecked />
    <br />
    <Checkbox disabled />
    <Checkbox disabled checked />
    <br />
    <Checkbox label='label' />
    <Checkbox>label</Checkbox>
    <br />
    <Checkbox subType='success' />
    <Checkbox subType='danger' />
    <br />
    <Checkbox colorCheck='orange' />
    <Checkbox colorCheck='brown' />
    <br />
    <Checkbox flowRowReverse>Terms</Checkbox>

    <RadioGroup
        value={radioValue}
        onChange={(e) => setRadioValue(e.target.value)}
        subType='success'
    >
        <Radio value='label 1' label='label 1' />
        <Radio value='label 2'>label 2</Radio>
    </RadioGroup>

Status of components

in the following tables i expose information about the components with the categories: component, status and description.

Note: although many of them have the status "done", this being the first version, the components are not perfect and with some missing functionalities.

Note: the "not necessary" state means the component can be easily recreated by atomic-library-core components