English | [简体中文](./README-zh_CN.md)

# @ray-js/smart-ui

## Introduction

`@ray-js/smart-ui` is a React component library based on the `Ray` framework and `@tuya-miniapp/smart-ui`, aimed at providing lightweight and reliable UI components that adhere to the design specifications for smart mini programs on mobile devices. By combining the `Ray` specification adaptation layer and built-in comprehensive TypeScript types, we offer a complete set of React components suitable for smart mini programs, allowing developers to quickly build mobile applications that meet design standards.

## Preview

Scan the QR code below with your smart mini program to experience the component library demo.

<img src="https://images.tuyaus.com/content-platform/hestia/1716260412b7f2ae02271.png" width="200" height="200">

## Before Getting Started

Before using Smart UI, make sure you have already studied the [Ray Development Overview](https://developer.tuya.com/en/miniapp/develop/ray/guide/overview) and [Ray Component Introduction](https://developer.tuya.com/en/miniapp/develop/ray/framework/component) from the smart mini program official documentation.

## Installation

```bash
# Install via yarn (recommended)
yarn add @ray-js/smart-ui

# Install via npm
npm i @ray-js/smart-ui
```

## Using Components

Using the button component as an example:

```jsx
import { Button } from '@ray-js/smart-ui';

export default function Demo() {
  return <Button type="info">Info Button</Button>;
}
```

## Preview in Developer Tools

```bash
# Install project dependencies
$ yarn
```

Open [Tuya MiniApp Tools](https://developer.tuya.com/cn/miniapp/devtools/tools), add the `example` directory, and you can preview the demo.

## Base Library Version

@ray-js/smart-ui provides stable support starting from the smart mini program base library version `2.19.0` and `@ray-js/ray@^1.5.1`.

## Open Source License

This project is licensed under the [MIT](https://en.wikipedia.org/wiki/MIT_License) license. Feel free to enjoy and contribute to the open source community.