Skip to content

myntra/applique-ui

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Applique Design System

A React implementation of Myntra's UI framework for enterprise design system

Myntra's UI framework for enterprise design system is a comprehensive solution for front-end development. With a focus on user experience (UX) and intuitive user interface (UI), our framework integrates the latest design practices to create a seamless experience for users.

The framework is built using React and TypeScript, providing robust and scalable components for fast-paced development.

Using the React components

Our framework offers a diverse range of components, including both basic elements such as Text and Button, as well as more complex components like Virtual List and Schema Form.

Installation

Run the following command using npm:

npm install @applique-ui/uikit --save

If you prefer Yarn, use the following command instead:

yarn add @applique-ui/uikit

Usage

  1. Import any of the provided components directly in your project:
import { Button, Layout, Text } from "@applique-ui/uikit"
  1. 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'),
);

Using the icon library

Our framework includes seamless integration of icons with select components like Button and NavBar, passed as React elements to the relevant component.

We provide a basic set of icons for immediate use, as well as the option to utilize custom icons for a personalized touch.

Installation

Run the following command using npm:

npm install @applique-ui/uikit-icons --save

If you prefer Yarn, use the following command instead:

yarn add @applique-ui/uikit-icons

Usage

  1. Import any of the provided icons directly in your project:
import BarsSolid from "@applique-ui/uikit-icons/svgs/BarsSolid"
import Bell from "@applique-ui/uikit-icons/svgs/Bell"
import BoxSolid from "@applique-ui/uikit-icons/svgs/BoxSolid"
  1. 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>

Contributing

Contributions through pull requests are encouraged. For further information, refer to the contribution guidelines.