@lynx-js/lynx-ui

@lynx-js/lynx-ui is the official headless UI library for ReactLynx, provided as a reference for building flexible, universal, and high-performance ReactLynx components.

We extend native components' capabilities through frontend components, toward a high-performance, native-like Lynx component ecosystem with broad compatibility.

UI characteristics on the same platform often differ in behavior, APIs, and even design philosophy, especially for advanced features. Cross-platform frameworks must bridge these gaps, and Lynx is no exception.

This is where lynx-ui comes in, streamlining and unifying disparate atomic APIs to reconcile underlying behaviors and limitations, delivering a consistent experience across platforms.

lynx-ui supports both full-library imports and individual component imports.

Import the entire lynx-ui package. Tree-shaking is supported, so unused components won't increase your final build size.

pnpm add @lynx-js/lynx-ui

Usage:

import { Button } from '@lynx-js/lynx-ui'

export default function App() {
  return (
    <view>
      <Button>Hello</Button>
    </view>
  )
}

Each lynx-ui component is distributed as a separate package. Use this approach for compatibility or specific requirements.

Example with <Button>:

pnpm add @lynx-js/lynx-ui-button

Usage:

import { Button } from '@lynx-js/lynx-ui-button'

export default function App() {
  return (
    <view>
      <Button>Hello</Button>
    </view>
  )
}

If you are using rspeedy, configure the pluginReactLynx as follows:

// lynx.config.ts
import { defineConfig } from '@lynx-js/rspeedy'

export default defineConfig({
  plugins: [
    pluginReactLynx({
      enableNewGesture: true,
    }),
  ],
})

• LynxSDK: >= 3.2

These are full-library requirements. Individual components may have different version requirements.

If you are interested in contributing to lynx-ui, please read our Contributing Guide.

lynx-ui is licensed under the Apache License 2.0. You can find the full license details in the LICENSE file.