A React implementation of Myntra's Design System

The Myntra's UIKit is a design system that aims to establish a common vocabulary between everyone in an organization. It captures repeating design structures, conventions, and, decisions across dozens of applications and builds as a re-usable pattern library.

UIKit is a continuous effort of finding new patterns and decommissioning older irrelevant patterns, so we adopt a component status convention.

We do offer a varity of components which includes simple one's like Text and Button and complex components Virtual List, Schema Form etc.

Run the following command using npm:

npm install @myntra/uikit --save

If you prefer Yarn, use the following command instead:

yarn add @myntra/uikit

1. Import any of the provided components directly in your project:

import { Button, Layout, Text } from "@myntra/uikit"

2. Tell React to render the element in the DOM:

ReactDOM.render(
  <Provider>
    <Layout>
        <Text.Title>Page Title</Text.Title>
        <Button onClick={() => alert('Button clicked!')}>Example button</Button>
    </Layout>
  </Provider>,
  document.querySelector('#app'),
);

We offer integration of icons with some of our components like Button, NavBar, etc. All these icons are passed as a react element to the desired component. We offer some of the basic set of icons that you can use. Apart from that, you can use your own icons as well.

Run the following command using npm:

npm install @myntra/uikit-icons --save

If you prefer Yarn, use the following command instead:

yarn add @myntra/uikit-icons

1. Import any of the provided icons directly in your project:

import BarsSolid from "@myntra/uikit-icons/svgs/BarsSolid"
import Bell from "@myntra/uikit-icons/svgs/Bell"
import BoxSolid from "@myntra/uikit-icons/svgs/BoxSolid"

2. Pass this icon element as a prop to the component:

<Icon name={BarsSolid} />
<Button icon={Bell}>Pencil</Button>
<NavBar.Item icon={BoxSolid}>Home</NavBar.Item>

Pull requests are welcome. See the contribution guidelines for more information.

Sunil Jhamnani