Giter Club home page Giter Club logo

applique-ui's Introduction

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.

applique-ui's People

Contributors

advaitk7 avatar airishgupta avatar ashwinsri1 avatar kartik7pande avatar mehuljain27 avatar pranshi20 avatar rohankarparag avatar saurabh33846 avatar sunil-jhamnani avatar vaibhavsingh241995 avatar yashr97 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

vaishaliahuja33

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.