Home
Softono
a

ant-design

Professional software vendor delivering innovative solutions on the Softono platform. Specialized in both open-source and proprietary software development.

Total Products
4

Software by ant-design

pro-components
Open Source

pro-components

<div align="center"> <img height="160" src="https://gw.alipayobjects.com/zos/kitchen/wzToJwlSw%24/logo.svg"> <h1>ProComponents</h1> Designed for Enterprise-Level Application, Use Ant Design like a Pro! [![][npm-release-shield]][npm-release-link] [![][npm-downloads-shield]][npm-downloads-link] [![][github-releasedate-shield]][github-releasedate-link] [![][github-action-build-shield]][github-action-build-link] [![][codecov-shield]][codecov-link] <br/> [![][github-contributors-shield]][github-contributors-link] [![][github-forks-shield]][github-forks-link] [![][github-stars-shield]][github-stars-link] [![][github-issues-shield]][github-issues-link] [![][github-license-shield]][github-license-link] <br/> [![][ant-design-shield]][ant-design-link] [![][devops-dumi-shield]][devops-dumi-link] [![][devops-father-shield]][devops-father-link] English · [简体中文](./README.zh-CN.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] ![](https://gw.alipayobjects.com/zos/kitchen/OsP5rUT6tc/pro-components.webp) </div> <details> <summary><kbd>Table of contents</kbd></summary> #### TOC - [📦 Installation](#-installation) - [✨ Features](#-features) - [Empowering Features of ProComponents](#empowering-features-of-procomponents) - [Considerations and Limitations](#considerations-and-limitations) - [🖥 Browser compatibility](#-browser-compatibility) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) - [🛣️ Ecosystem](#️-ecosystem) #### </details> ## 📦 Installation To install `@ant-design/pro-components`, run the following command: ```bash $ pnpm install @ant-design/pro-components ``` <br/> ## ✨ Features Pro Series components are meticulously engineered to bolster the robust architecture of enterprise-grade applications. [![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=183895098&image_size=auto&color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=183895098) <br/> ### Empowering Features of ProComponents > \[!NOTE] > > ProComponents stands as a beacon for React-based enterprise application development. Here’s what makes it exceptional: - 💡 **Extensive Component Suite**: ProComponents boasts a comprehensive array of UI elements—ranging from tables and forms to charts and tree views. It caters to the diverse needs of enterprise applications with finesse. - 🚀 **Advanced Functionality**: Beyond basic UI elements, ProComponents is equipped with sophisticated data handling and business logic capabilities, enabling developers to swiftly construct powerful enterprise solutions. - 🎯 **Intuitive Usage**: With its straightforward API and detailed documentation, ProComponents ensures a smooth onboarding experience for developers, fostering quick adoption and deployment. - 🎨 **Visual Configuration Tools**: Certain components within ProComponents benefit from visual configuration aids, streamlining the design process for developers by simplifying component setup. - 🛠️ **Unmatched Customizability**: The library accommodates a plethora of configurations and styling options, ensuring that ProComponents can be tailored to the unique demands of any project. In essence, ProComponents is a robust, user-friendly, and versatile UI component library, architected to empower applications across various scales and domains. <br/> ### Considerations and Limitations > \[!WARNING] > > While ProComponents offers a wealth of benefits, it’s important to weigh certain considerations: - **Limited customization**: Despite its rich component repository, ProComponents may pose challenges when it comes to deeply personalized customizations, potentially hindering the realization of certain project visions. - **Learning curve**: The library’s comprehensive API and extensive documentation, while thorough, may initially overwhelm newcomers. Mastery of ProComponents might require a dedicated learning investment. - **Browser compatibility**: ProComponents leverages cutting-edge browser technologies, which may not be supported by older browsers, potentially restricting application accessibility and necessitating additional development efforts for broader compatibility. - **Codebase size**: The substantial size of ProComponents’ codebase could impact the agility of the development process and complicate long-term maintenance. > \[!TIP] > > To summarize, ProComponents is a formidable contender in the realm of enterprise application UI libraries, yet it comes with its own set of trade-offs, including customization constraints, a considerable learning curve, browser compatibility considerations, and a sizable codebase. Developers are advised to thoroughly assess their project needs and limitations prior to integrating ProComponents into their workflow. <br/> ## 🖥 Browser compatibility - Modern browsers - [Electron](https://www.electronjs.org/) | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](https://godban.github.io/browsers-support-badges/)</br>Electron | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | > Dropped support of IE after `ProComponents 3.0`. <br/> ## ⌨️ Local Development You can use Github Codespaces for online development: [![][github-codespace-shield]][github-codespace-link] Or clone it for local development: ```bash $ git clone https://github.com/ant-design/pro-components.git $ cd pro-components $ pnpm install $ pnpm dev ``` Common scripts: ```bash $ pnpm build # library build (father) $ pnpm test # vitest (see also pnpm test:coverage) $ pnpm start # same as pnpm dev — dumi doc dev server $ pnpm docs build # static doc site build (dumi) $ pnpm docs check # @umijs/doctor publish check (same as pnpm checkPublish) ``` More detail: [CONTRIBUTING.md](./CONTRIBUTING.md). <br/> ## 🤝 Contributing > \[!IMPORTANT] > > Join our collaborative ecosystem. Your contributions are the heartbeat of our project. Here's how you can be an integral part of our vibrant community: - **Integrate and Innovate**: Incorporate Ant Design Pro, umi, and ProComponents into your projects. Your real-world usage and feedback are invaluable to us. - **Voice Your Insights**: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting [issues][github-issues-link] and help us enhance the user experience. - **Shape the Future**: Have code enhancements or feature ideas? We invite you to propose [pull requests][pr-welcome-link] and contribute directly to the evolution of our codebase. Every contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. 😃 [![][pr-welcome-shield]][pr-welcome-link] <a href="https://github.com/ant-design/pro-components/graphs/contributors" target="_blank"> <table> <tr> <th colspan="2"> <br><img src="https://contrib.rocks/image?repo=ant-design/pro-components"><br><br> </th> </tr> <tr> <td> <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=183895098&image_size=2x3&color_scheme=dark"> </td> <td rowspan="2"> <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=183895098&image_size=4x7&color_scheme=dark"> </td> </tr> <tr> <td> <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=12101536&repo_ids=183895098&image_size=2x3&color_scheme=dark"> </td> </tr> </table> </a> <a href="https://openomy.app/github/ant-design/pro-components" target="_blank" style="display: block; width: 100%;" align="center"> <img src="https://openomy.app/svg?repo=ant-design/pro-components&chart=bubble&latestMonth=3" target="_blank" alt="Contribution Leaderboard" style="display: block; width: 100%;" /> </a> ## 🛣️ Ecosystem - **[ProComponents](https://github.com/ant-design/pro-components)** - Designed for Enterprise-Level Application, Use Ant Design like a Pro!. - **[Ant Design Agentic](https://agentic.antdigital.ai)** - The Ultimate Editor UI Framework, Flow Editor and Chat Components. <br/> --- #### 📝 License Copyright © 2023 - present [AFX][ant-design-link] & [Ant Digital](https://antdigital.com). <br/> This project is [MIT](./LICENSE) licensed. <!-- LINK GROUP --> [ant-design-link]: https://ant.design [ant-design-shield]: https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black&logo=antdesign&style=flat-square [codecov-link]: https://codecov.io/gh/ant-design/pro-components [codecov-shield]: https://img.shields.io/codecov/c/github/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white [devops-dumi-link]: https://d.umijs.org/ [devops-dumi-shield]: https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF&labelColor=black&style=flat-square [devops-father-link]: https://github.com/umijs/father [devops-father-shield]: https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF&labelColor=black&style=flat-square [github-action-build-link]: https://github.com/ant-design/pro-components/actions/workflows/build.yml [github-action-build-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-components/build.yml?color=1677FF&label=build&labelColor=black&logo=githubactions&logoColor=white&style=flat-square [github-codespace-link]: https://codespaces.new/ant-design/pro-components [github-codespace-shield]: https://github.com/codespaces/badge.svg [github-contributors-link]: https://github.com/ant-design/pro-components/graphs/contributors [github-contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square [github-forks-link]: https://github.com/ant-design/pro-components/network/members [github-forks-shield]: https://img.shields.io/github/forks/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square [github-issues-link]: https://github.com/ant-design/pro-components/issues [github-issues-shield]: https://img.shields.io/github/issues/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square [github-license-link]: https://github.com/ant-design/pro-components/blob/master/LICENSE [github-license-shield]: https://img.shields.io/github/license/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square [github-releasedate-link]: https://github.com/ant-design/pro-components/releases [github-releasedate-shield]: https://img.shields.io/github/release-date/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square [github-stars-link]: https://github.com/ant-design/pro-components/network/stargazers [github-stars-shield]: https://img.shields.io/github/stars/ant-design/pro-components?color=1677FF&labelColor=black&style=flat-square [npm-downloads-link]: https://www.npmjs.com/package/@ant-design/pro-components [npm-downloads-shield]: https://img.shields.io/npm/dt/@ant-design/pro-components?labelColor=black&style=flat-square&color=1677FF [npm-release-link]: https://www.npmjs.com/package/@ant-design/pro-components [npm-release-shield]: https://img.shields.io/npm/v/@ant-design/pro-components?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square [pr-welcome-link]: https://github.com/ant-design/pro-components/pulls [pr-welcome-shield]: https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black&style=for-the-badge ## Star History [![Star History](https://api.lucabubi.me/chart?username=ant-design&repository=pro-components)](https://github.com/lucabubi/star-history)

CSS Frameworks & UI Kits JavaScript Libraries & Components
4.8K Github Stars
html2sketch
Open Source

html2sketch

<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English | [简体中文](./README.zh-CN.md) <p align="center"> <a href="https://github.com/ant-design/html2sketch"> <img src="https://gw.alipayobjects.com/zos/antfincdn/9qm%24x99yzk/Logo.png" height="200" width="200" alt="html2sketch"/> </a> </p> <h1 align="center"><a href="https://ant-design.github.io/html2sketch/">html2sketch</a></h1> <div align="center"> [![NPM version][npm-image]][npm-url] [![NPM version][npm-next-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url] [![Test CI status][test-ci]][test-ci-url] ![Deploy CI][deploy-ci] [![Coverage][coverage]][codecov-url] [![ docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/) [![Gitpod ready-to-code][gitpod-badge]][gitpod-url] <!-- gitpod url --> [gitpod-badge]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod [gitpod-url]: https://gitpod.io/#https://github.com/ant-design/html2sketch <!-- umi url --> [dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue [father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg <!-- npm url --> [npm-image]: http://img.shields.io/npm/v/html2sketch.svg?style=flat-square&color=deepgreen&label=latest [npm-next-image]: https://img.shields.io/npm/v/html2sketch/next?label=next&style=flat-square [npm-url]: http://npmjs.org/package/html2sketch [npm-size]: https://img.shields.io/bundlephobia/minzip/html2sketch?color=deepgreen&label=gizpped%20size&style=flat-square [npm-size-url]: https://packagephobia.com/result?p=html2sketch <!-- coverage --> [coverage]: https://codecov.io/gh/ant-design/html2sketch/branch/master/graph/badge.svg [codecov-url]: https://codecov.io/gh/ant-design/html2sketch/branch/master <!-- Github CI --> [test-ci]: https://github.com/ant-design/html2sketch/workflows/Test%20CI/badge.svg [deploy-ci]: https://github.com/ant-design/html2sketch/workflows/Deploy%20CI/badge.svg [test-ci-url]: https://github.com/ant-design/html2sketch/actions?query=workflow%3ATest%20CI [deploy-ci-ci]: https://github.com/ant-design/html2sketch/actions?query=workflow%3ADeploy%20CI [download-image]: https://img.shields.io/npm/dm/html2sketch.svg?style=flat-square [download-url]: https://npmjs.org/package/html2sketch </div> ## Introduction A module that transform HTML into Sketch JSON ## Quick Guide ### Install ```bash npm i html2sketch --save ``` or ``` yarn add html2sketch ``` ### Usage `html2sketch` includes three methods `nodeToLayer` 、 `nodeToGroup` 和 `nodeToSymbol` 。 #### nodeToLayer this method transforms a DOM node into Sketch Objects without processing children of nodes ```js import { nodeToLayer } from 'html2sketch'; const fn = async () => { // 1. get DOM node const node = document.getElementById('id'); // 2. run nodeToLayer method const layer = await nodeToLayer(node); // 3. generate Sketch JSON const sketchJSON = layer.toSketchJSON(); return sketchJSON; }; fn().then((json) => { console.log(json); }); ``` #### nodeToGroup This method transforms a DOM node and its children into a Sketch Group Object ```js import { nodeToGroup } from 'html2sketch'; const fn = async () => { // 1. get DOM node const node = document.getElementById('id'); // 2. run nodeToGroup method const group = await nodeToGroup(node); // 3. generate Sketch JSON const sketchJSON = group.toSketchJSON(); return sketchJSON; }; fn().then((json) => { console.log(json); }); ``` #### nodeToSymbol This method transforms a DOM node and its children into a Sketch Symbol Object ```js import { nodeToSymbol } from 'html2sketch'; const fn = async () => { // 1. get DOM node const node = document.getElementById('id'); // 2. run nodeToSymbol method const symbol = await nodeToSymbol(node); // 3. generate Sketch JSON const sketchJSON = symbol.toSketchJSON(); return sketchJSON; }; fn().then((json) => { console.log(json); }); ``` ## What's next step with Sketch JSON? the generated Sketch JSON strictly match with [Sketch File Format](https://developer.sketch.com/file-format/) Schema, So you can just synthesize the JSON according to the [Sketch File Format](https://developer.sketch.com/file-format/) into a '. Sketch 'file . So the Sketch file can be obtained simply by synthesizing the corresponding JSON into a '. Sketch 'file according to the Sketch file specification There is some community modules of synthesizing: - [sketch-json-api](https://github.com/ant-design/sketch-json-api) - [node-sketch](https://github.com/oscarotero/node-sketch) - [sketch-constructor](https://github.com/amzn/sketch-constructor) If you want to use the JSON object directly in sketch, you can use the [Sketch JSON](https://github.com/arvinxx/sketch-json) Plugin,which will allow you just paste JSON into Sketch. ## Why? The main application of this module focus on C2D (Code to Design).This module mainly refers to [html-sketchapp](https://github.com/html-sketchapp/html-sketchapp). html-sketchapp can directly transforms any HTML page into a Sketch document without framework limit, but there are significant limitations: - **Not supported pseudoelements, overflow,some kind of gradient, transform, and other properties**: As a result, many web pages transformed by html-sketchapp are not visually restored; - **Although html-sketchapp don't dependent on the framework, it fully dependent on the Sketch App**: Because JSON structure generated by html-sketchapp does not strictly match [Sketch File Format](https://developer.sketch.com/file-format/) ,it can't generate sketch document directly.What's more,it also lead to lacking of the ability to integrate on the server side. - **html-sketchapp developed by JS ,lacking perfect type definition, the project architecture is not reasonable, the secondary development is difficult** ### What html2sketch do? html2sketch makes a lot of optimization on the basis of html-sketchapp, and takes the essence to discard the dross: #### Enhancement of parsing ability html2sketch supports most web page styles which is not supported by html-sketchapp, such as pseudo-elements,radial gradient, text overflows, and so on.This is important for transforming result.Perhaps reproducing 80% using html-sketchapp, but 95% or more using html2sketch. Of course, the parsing capability of the module also needs to be improved step by step by covering the parsing scene. If you encounter any incorrect parsing situation under the real word, please be sure to submit an [issue](https://github.com/ant-design/html2sketch/issues), I will solve it as soon as possible. The styles supported by this module are currently available on [解析用例](https://ant-design.github.io/html2sketch/e2e). #### Decouple from the Sketch App The biggest difference at the functional level of html2sketch is its decoupling from the Sketch App.The relevant parsing capabilities (Svg, image, font, and so on) are all built from scratch. Thanks to the JSON generated by html2Sketch will strictly match [Sketch File Format](https://developer.sketch.com/file-format/) , you can directly synthesize it into a legal `.sketch` file by using [sketch-json-api](https://github.com/ant-design/sketch-json-api) or [node-sketch](https://github.com/oscarotero/node-sketch) . Therefore,based on html2sketch, it is possible to parse a web page and generate the Sketch file using any normal server. #### Development based on Typescript Developed with Typescript makes it a good experience for both consumers and producers.Whether it's in the organization of the project, code comments, or unit testing, there are guarantees. ## Develop Refer to [Develop Guidelines](https://github.com/ant-design/html2sketch/guide) ## License [MIT](./LICENSE)

Vector Graphics Design Systems & Tokens
180 Github Stars
ant-design-mobile-rn
Open Source

ant-design-mobile-rn

English | [简体中文](./README.zh-CN.md) <p align="center"> <a href="http://rn.mobile.ant.design"> <img width="320" src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png"> </a> </p> # Ant Design Mobile RN [![](https://img.shields.io/travis/ant-design/ant-design-mobile-rn.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-mobile-rn) [![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design-mobile-rn.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design-mobile-rn) [![npm package](https://img.shields.io/npm/v/@ant-design/react-native.svg?style=flat-square)](https://www.npmjs.org/package/@ant-design/react-native) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design/react-native.svg?style=flat-square)](https://npmjs.org/package/@ant-design/react-native) [![Dependency Status](https://david-dm.org/ant-design/ant-design-mobile-rn.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-mobile-rn) [![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile-rn.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile-rn 'Percentage of issues still open') [![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) A configurable Mobile UI specification and React-based implementation. > If you only care about the style you may give [[Tanjun]](https://github.com/bang88/Tanjun) a try. ## Features - Follow Ant Design Mobile UI specification. - Configurable UI style for different products. - Support web and native usages based on React Native. - Develop in TypeScript. ## Expo > HTML5 Preview: [ant-design-mobile-rn/index.html](https://1uokun.github.io/ant-design-mobile-rn/index.html) |SDK 54([email protected])| |--| | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=49887e3a-2353-4b84-aa37-58c14c30d2a0&host=u.expo.dev" />](https://expo.dev/preview/update?message=5.5.0%28sdk%3A54%29&updateRuntimeVersion=5.5.0&createdAt=2026-06-01T09%3A53%3A50.399Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=49887e3a-2353-4b84-aa37-58c14c30d2a0) | Open the camera app on your device and scan the code above, <br> need install expo app: https://expo.io/tools <details><summary>Expo SDK(47, 49, 50, 51, 52) history version</summary> |SDK 47 iOS|SDK 47 Android|SDK 49,50|SDK 51|SDK 52| |--|--|--|--|--| | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=38b3a547-ab2b-4066-95ed-400f1707dcc6&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?updateId=05f0e308-2dd5-4cb9-9e6b-1ae31561bfee&appScheme=exp&host=u.expo.dev" />](https://expo.dev/@1uokun/ant-design-mobile-rn) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=bbf0a647-4ff2-46bd-9aad-dfd81bc6ba08" />](https://expo.dev/preview/update?message=5.2.2&updateRuntimeVersion=5.2.2&createdAt=2024-08-12T13%3A33%3A56.096Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=bbf0a647-4ff2-46bd-9aad-dfd81bc6ba08) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=cb809e16-1f0b-4f2c-9c28-417d7a67abfe&host=u.expo.dev" />](https://expo.dev/preview/update?message=5.3.0&updateRuntimeVersion=5.3.0&createdAt=2024-11-14T07%3A33%3A14.502Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=cb809e16-1f0b-4f2c-9c28-417d7a67abfe) | [<img width="250" alt="expo/ant-design-mobile-rn" src="https://qr.expo.dev/eas-update?slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&groupId=1a1dbedd-d817-4dee-a5d9-1e7cc1ebe4a0&host=u.expo.dev" />](https://expo.dev/preview/update?message=5.3.0(sdk%3A52)&updateRuntimeVersion=5.3.0&createdAt=2024-11-14T08%3A25%3A05.823Z&slug=exp&projectId=7729a68b-f881-4294-89f5-5ae751bfb2b2&group=1a1dbedd-d817-4dee-a5d9-1e7cc1ebe4a0) | </details> ## Install & Usage ```bash $ npm install @ant-design/react-native @ant-design/icons-react-native ``` ### Installing peer dependencies Next, install the required peer dependencies. You need to run different commands depending on whether your project is an Expo managed project or a bare React Native project. - If you have an Expo managed project, install the dependencies with `expo`: ```bash npx expo install react-native-gesture-handler react-native-reanimated ``` - If you have a bare React Native project, install the dependencies with `npm`: ```bash npm install react-native-gesture-handler react-native-reanimated react-native-worklets ``` you also need to manually add the `react-native-worklets/plugin` plugin to your `babel.config.js` ``` module.exports = { presets: [ ... // don't add it here :) ], plugins: [ ... 'react-native-worklets/plugin', ], }; ``` see more details in [react-native-reanimated installation doc](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) - For iOS with bare React Native project, make sure you have CocoaPods installed. Then install the pods to complete the installation: ```bash cd ios pod install cd .. ``` ### Link icon fonts Add assets to your `react-native.config.js` ( If not exist, please create in project’s root directory ) ```js module.exports = { assets: ['node_modules/@ant-design/icons-react-native/fonts'], }; ``` Run the [react-native-asset](https://github.com/unimonkiez/react-native-asset)'s command and linking + unlinking is automatic ```bash npx react-native-asset ``` ## Links - [Home Page](http://rn.mobile.ant.design) - [More Introduce >](docs/react/introduce.en-US.md) - [Developer Instruction](development.en-US.md) ## Development - **Running On Expo** > node >= 18 ```bash # go to expo example folder cd example # install dependencies yarn # start expo yarn expo ``` - **Running On Device** ```bash # clone git clone [email protected]:ant-design/ant-design-mobile-rn.git # go to ant rn folder cd ant-design-mobile-rn # install dependencies yarn # start ios cd rn-kitchen-sink/ios && pod install yarn ios # start android yarn android ``` ## Contributing We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design-mobile-rn/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design-mobile-rn/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design-mobile-rn/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design-mobile-rn/blob/master/development.en-US.md) and have a good time! :) --- Thanks to all the contributors of @ant-design/react-native: <a href="https://github.com/ant-design/ant-design-mobile-rn/graphs/contributors"> <img src="https://opencollective.com/ant-design-mobile-rn/contributors.svg?width=960&button=false" alt="contributors" /> </a>

CSS Frameworks & UI Kits Mobile Development
3.3K Github Stars
pro-chat
Open Source

pro-chat

## 前言 新用户请直接使用 [ant-design/x](https://github.com/ant-design/x) 一些道歉和想说的:https://github.com/ant-design/pro-chat/issues/340 <div align="center"> <img height="120" src="https://gw.alipayobjects.com/zos/kitchen/wzToJwlSw%24/logo.svg"> <img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg"> <img height="120" src="https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*Mo27Sr3kS4kAAAAAAAAAAAAADmuEAQ/original"> <h1>ProChat</h1> Components Library for Quickly Building LLM Chat Interfaces. [![][npm-release-shield]][npm-release-link] [![][npm-downloads-shield]][npm-downloads-link] [![][github-releasedate-shield]][github-releasedate-link] [![][github-action-test-shield]][github-action-test-link] [![][github-action-release-shield]][github-action-release-link] [![][codecov-shield]][codecov-link] <br/> [![][github-contributors-shield]][github-contributors-link] [![][github-forks-shield]][github-forks-link] [![][github-stars-shield]][github-stars-link] [![][github-issues-shield]][github-issues-link] [![][github-license-shield]][github-license-link] <br/> [![][ant-design-shield]][ant-design-link] [![][devops-dumi-shield]][devops-dumi-link] [![][devops-father-shield]][devops-father-link] English · [简体中文](./README.zh-CN.md) · [Changelog](./CHANGELOG.md) . [Report Bug][github-issues-link] · [Request Feature][github-issues-link] ![](https://gw.alipayobjects.com/zos/kitchen/Aa%2452FxhWU/pro-chat.webp) </div> <details> <summary><kbd>Table of contents</kbd></summary> #### TOC - [📦 Installation](#-installation) - [Compile with Next.js](#compile-with-nextjs) - [🔨 Usage](#-usage) - [✨ Features](#-features) - [👀 Showcase](#-showcase) - [🖥 Browser compatibility](#-browser-compatibility) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) - [🛣️ Ecosystem](#️-ecosystem) #### </details> ## 📦 Installation > \[!IMPORTANT] > > This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). To install `@ant-design/pro-chat`, run the following command: ```bash $ pnpm install @ant-design/pro-chat ``` The default `auto-install-peers` in pnpm is `true`. If you use other package managers, you may need to install `antd` and `antd-style` separately. ### Compile with Next.js If you have some errors when using Next.js, check [here](https://pro-chat.antdigital.dev/en-US/guide/nextjs#frequently-asked-questions). ## 🔨 Usage ```jsx import { ProChat } from '@ant-design/pro-chat'; export default () => ( <ProChat request={async (messages) => { // Send a request with Message as the parameter return Message; // Supports both streaming and non-streaming }} /> ); ``` <br/> ## ✨ Features > \[!NOTE] > > ProChat focuses on quickly setting up a large language model chat dialogue framework. It aims to empower developers to easily create rich, dynamic, and intuitive chat interfaces. [![](https://next.ossinsight.io/widgets/official/compose-activity-trends/thumbnail.png?repo_id=707504998&image_size=auto&color_scheme=dark)](https://next.ossinsight.io/widgets/official/compose-activity-trends?repo_id=707504998) **Framework and Solutions for Chat Interface Components:** - 🔄 **Automatic Chat Caching**: Maintains conversation continuity without any extra effort, ensuring a smooth user experience. - 💬 **Streamlined Conversations**: Offers the choice between different conversation styles, catering to diverse user preferences. - ✏️ **Message Editing Features**: Provides a suite of editing tools, including request redo, edit combination, and deletion, for precise conversation control. - 📖 **Auto-rendered Markdown**: Delivers a rich text experience that immerses users by transforming Markdown into beautifully formatted messages. - 🎚️ **Programmatic Controls (Ref)**: Commands the chat flow with precision, allowing developers to create a tailored conversational experience. <br/> **Design Evolution / In Progress** - [ ] **Customized Dialogue Rendering with Edit Capabilities** - [issue/21](https://github.com/ant-design/pro-chat/issues/21) - [ ] **Enhanced Request Parameters** - The power to infuse additional parameters into your requests is on the horizon - [ ] **Personalized Error Handling** - Craft unique fallbacks and configurations for those unexpected moments - [ ] **Expanded Documentation & Globalization** - Access comprehensive guides and international support for a truly borderless experience - [ ] **Atomic Component Design** - Anticipate a modular approach to design that promises both simplicity and versatility <br/> ## 👀 Showcase Let's showcase some of ProChat's signature features: | **Streamlined Dialogue** | **Content Editor** | | :-: | :-: | | Engage in Streamlined Conversations that flow as naturally as a river | Refine, reshape, and perfect your dialogue with tools that allow for real-time edits. | | ![][prevew-1] | ![][prevew-3] | | **Integrated Render** | | | Dive into the vivid world of chat with our Built-in Render, a tool designed to bring text to life. | | | ![][prevew-2] | | <br/> ## 🖥 Browser compatibility > \[!NOTE] > > - Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11)) > - [Electron](https://www.electronjs.org/) | [![edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![Edge](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![chrome](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![safari](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png)](http://godban.github.io/browsers-support-badges/) | [![electron_48x48](https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png)](http://godban.github.io/browsers-support-badges/) | | --- | --- | --- | --- | --- | | Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | <br/> ## ⌨️ Local Development You can use Github Codespaces for online development: [![][github-codespace-shield]][github-codespace-link] Or clone it for local development: ```bash $ git clone https://github.com/ant-design/pro-chat.git $ cd pro-chat $ pnpm install $ pnpm dev ``` <br/> ## 🤝 Contributing > \[!IMPORTANT] > > Join our collaborative ecosystem. Your contributions are the heartbeat of our project. Here's how you can be an integral part of our vibrant community: - **Integrate and Innovate**: Incorporate Ant Design Pro, umi, and ProChat into your projects. Your real-world usage and feedback are invaluable to us. - **Voice Your Insights**: Encounter a glitch? Have a query? Your perspectives matter. Share them by submitting [issues][github-issues-link] and help us enhance the user experience. - **Shape the Future**: Have code enhancements or feature ideas? We invite you to propose [pull requests][pr-welcome-link] and contribute directly to the evolution of our codebase. Every contribution, big or small, is celebrated. Join us in our mission to refine and elevate the world of open-source enterprise UI components. 😃 [![][pr-welcome-shield]][pr-welcome-link] <a href="https://github.com/ant-design/pro-chat/graphs/contributors" target="_blank"> <table> <tr> <th colspan="2"> <br><img src="https://contrib.rocks/image?repo=ant-design/pro-chat"><br><br> </th> </tr> <tr> <td> <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=707504998&image_size=2x3&color_scheme=dark"> </td> <td rowspan="2"> <img src="https://next.ossinsight.io/widgets/official/compose-org-participants-growth/thumbnail.png?activity=active&period=past_28_days&owner_id=12101536&repo_ids=707504998&image_size=4x7&color_scheme=dark"> </td> </tr> <tr> <td> <img src="https://next.ossinsight.io/widgets/official/compose-org-active-contributors/thumbnail.png?activity=new&period=past_28_days&owner_id=12101536&repo_ids=707504998&image_size=2x3&color_scheme=dark"> </td> </tr> </table> </a> <br/> ## 🛣️ Ecosystem - **[ProComponents](https://github.com/ant-design/pro-components)** - Designed for Enterprise-Level Application, Use Ant Design like a Pro!. - **[ProEditor](https://github.com/ant-design/pro-editor)** - The Ultimate Editor UI Framework and Components. - **[ProFlow](https://github.com/ant-design/pro-flow)** - A Flow Editor Framework base on React-Flow. - **[ProChat](https://github.com/ant-design/pro-chat)** - Components Library for Quickly Building LLM Chat Interfaces. <br/> --- #### 📝 License Copyright © 2023 - present [AFX][ant-design-link] & [Ant Digital](https://antdigital.com). <br/> This project is [MIT](./LICENSE) licensed. <!-- LINK GROUP --> [ant-design-link]: https://ant.design [ant-design-shield]: https://img.shields.io/badge/-Ant%20Design-1677FF?labelColor=black&logo=antdesign&style=flat-square [codecov-link]: https://codecov.io/gh/ant-design/pro-chat [codecov-shield]: https://img.shields.io/codecov/c/github/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square&logo=codecov&logoColor=white [devops-dumi-link]: https://d.umijs.org/ [devops-dumi-shield]: https://img.shields.io/badge/docs%20by-dumi-blue?color=1677FF&labelColor=black&style=flat-square [devops-father-link]: https://github.com/umijs/father [devops-father-shield]: https://img.shields.io/badge/build%20with-father-028fe4.svg?color=1677FF&labelColor=black&style=flat-square [github-action-release-link]: https://github.com/ant-design/pro-chat/actions/workflows/release.yml [github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-chat/release.yml?color=1677FF&label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square [github-action-test-link]: https://github.com/ant-design/pro-chat/actions/workflows/test.yml [github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ant-design/pro-chat/test.yml?color=1677FF&label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square [github-codespace-link]: https://codespaces.new/ant-design/pro-chat [github-codespace-shield]: https://github.com/codespaces/badge.svg [github-contributors-link]: https://github.com/ant-design/pro-chat/graphs/contributors [github-contributors-shield]: https://img.shields.io/github/contributors/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square [github-forks-link]: https://github.com/ant-design/pro-chat/network/members [github-forks-shield]: https://img.shields.io/github/forks/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square [github-issues-link]: https://github.com/ant-design/pro-chat/issues [github-issues-shield]: https://img.shields.io/github/issues/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square [github-license-link]: https://github.com/ant-design/pro-chat/blob/main/LICENSE [github-license-shield]: https://img.shields.io/github/license/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square [github-releasedate-link]: https://github.com/ant-design/pro-chat/releases [github-releasedate-shield]: https://img.shields.io/github/release-date/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square [github-stars-link]: https://github.com/ant-design/pro-chat/network/stargazers [github-stars-shield]: https://img.shields.io/github/stars/ant-design/pro-chat?color=1677FF&labelColor=black&style=flat-square [npm-downloads-link]: https://www.npmjs.com/package/@ant-design/pro-chat [npm-downloads-shield]: https://img.shields.io/npm/dt/@ant-design/pro-chat?labelColor=black&style=flat-square&color=1677FF [npm-release-link]: https://www.npmjs.com/package/@ant-design/pro-chat [npm-release-shield]: https://img.shields.io/npm/v/@ant-design/pro-chat?color=1677FF&labelColor=black&logo=npm&logoColor=white&style=flat-square [pr-welcome-link]: https://github.com/ant-design/pro-chat/pulls [pr-welcome-shield]: https://img.shields.io/badge/%E2%9D%A4%EF%B8%8F%20PR%20WELCOME-%E2%86%92-1677FF?labelColor=black&style=for-the-badge [prevew-1]: https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*0uQhSIzSS3YAAAAAAAAAAAAADmuEAQ/original [prevew-2]: https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*e4JbQKfupVQAAAAAAAAAAAAADmuEAQ/original [prevew-3]: https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*wVSCTb7bq8UAAAAAAAAAAAAADmuEAQ/original

JavaScript Libraries & Components LLM Tools & Chat UIs
899 Github Stars