Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/myntra/applique-ui
A design system build by Myntra
https://github.com/myntra/applique-ui
components design-system icons react reactjs sass typescript ui-components uikit
Last synced: 4 days ago
JSON representation
A design system build by Myntra
- Host: GitHub
- URL: https://github.com/myntra/applique-ui
- Owner: myntra
- License: mit
- Created: 2020-07-22T12:46:29.000Z (over 4 years ago)
- Default Branch: deploy
- Last Pushed: 2024-10-06T19:49:29.000Z (30 days ago)
- Last Synced: 2024-10-29T23:07:45.861Z (7 days ago)
- Topics: components, design-system, icons, react, reactjs, sass, typescript, ui-components, uikit
- Language: JavaScript
- Homepage: https://applique.myntra.com
- Size: 6.13 MB
- Stars: 12
- Watchers: 5
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
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:
```bash
npm install @applique-ui/uikit --save
```
If you prefer Yarn, use the following command instead:
```bash
yarn add @applique-ui/uikit
```
### Usage
1. Import any of the provided components directly in your project:
```js
import { Button, Layout, Text } from "@applique-ui/uikit"
```
2. Tell React to render the element in the DOM:
```js
ReactDOM.render(
Page Title
alert('Button clicked!')}>Example button
,
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:
```bash
npm install @applique-ui/uikit-icons --save
```
If you prefer Yarn, use the following command instead:
```bash
yarn add @applique-ui/uikit-icons
```
### Usage
1. Import any of the provided icons directly in your project:
```js
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"
```
2. Pass this icon element as a prop to the component:
```js
Pencil
Home
```
## Contributing
Contributions through pull requests are encouraged. For further information, refer to the [contribution guidelines](https://applique.myntra.com/for-developers/how-to-contribute).