Neomorphik

This package provides a library with Neomorphism Styled Components.

Install :

npm i neomorphik

Usage :

Components :

import NeoButton from 'neomorphik';

<NeoButton>Click Here</NeoButton>;

Mixins :

import styled from 'styled-components';
import BackgroundDark from 'neomorphik';

const Container = styled.div`
  ${BackgroundDark}
`;

Available Components :

Light Theme :

Div - <NeoDiv />
Span - <NeoSpan />
Button - <NeoButton />
Input - <NeoInput />
Select - <NeoSelect />
Text Area - <NeoTextArea />

import NeoButton from 'neomorphik';

const Example = () => {
    return (
      <>
        <NeoButton>Click Here</NeoButton>
      </>
    );
  }

export default Example;

Light Theme Inverted :

Div - <NeoDivInverted />
Span - <NeoSpanInverted />
Button - <NeoButtonInverted />
Input - <NeoInputInverted />
Select - <NeoSelectInverted />
Text Area - <NeoTextAreaInverted />

import NeoButtonInverted from 'neomorphik';

const Example = () => {
    return (
      <>
        <NeoButtonInverted>Click Here</NeoButtonInverted>
      </>
    );
  }

export default Example;

Dark Theme :

Div - <NeoDivDark />
Span - <NeoSpanDark />
Button - <NeoButtonDark />
Input - <NeoInputDark />
Select - <NeoSelectDark />
Text Area - <NeoTextAreaDark />

import NeoButtonDark from 'neomorphik';

const Example = () => {
    return (
      <>
        <NeoButtonDark>Click Here</NeoButtonDark>
      </>
    );
  }

export default Example;

Dark Theme Inverted :

Div - <NeoDivDarkInverted />
Span - <NeoSpanDarkInverted />
Button - <NeoButtonDarkInverted />
Input - <NeoInputDarkInverted />
Select - <NeoSelectDarkInverted />
Text Area - <NeoTextAreaDarkInverted />

import NeoButtonDarkInverted from 'neomorphik';

const Example = () => {
    return (
      <>
        <NeoButtonDarkInverted>Click Here</NeoButtonDarkInverted>
      </>
    );
  }

export default Example;

Available Mixins :

Add these mixins to your parent containers:

${Background}
${BackgroundDark}

import styled from 'styled-components';
import Background from 'neomorphik';

const MyContainer = styled.div`
    ${Background};
`;

const Example = () => {
    return (
      <MyContainer>
        Hello World
      </MyContainer>
    );
  }

export default Example;

Add these mixins to customize your components:

${Neo}
${NeoInverted}
${NeoDark}
${NeoDarkInverted}

import styled from 'styled-components';
import NeoDark from 'neomorphik';

const MyComponent = styled.div`
    ${NeoDark};
`;

const Example = () => {
    return (
      <MyComponent>
        Hello World
      </MyComponent>
    );
  }

export default Example;