#What is lynx-ui?

@lynx-js/lynx-ui is the official headless UI library built for ReactLynx, the most popular framework for building Lynx apps. It reconciles cross-platform differences in UI behavior and APIs, providing consistent, high-performance frontend components on top of Lynx's low-level primitives.

#Quick Start

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

#Full-Library Import (Recommended)

Install and import the main lynx-ui package. Tree-shaking is supported, so unused components will not increase your final bundle size.

npm install @lynx-js/lynx-ui

yarn add @lynx-js/lynx-ui

pnpm add @lynx-js/lynx-ui

bun add @lynx-js/lynx-ui

deno add npm:@lynx-js/lynx-ui

Use it in your project:

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

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

#Importing Individual Components

Each lynx-ui component is also published as a separate package. Use this approach when you have compatibility constraints or need to depend on a specific component package.

For example, to use <Button>:

npm install @lynx-js/lynx-ui-button

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

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

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

deno add npm:@lynx-js/lynx-ui-button

Use it in your project:

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

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

#Configuration

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

#Compatibility

• Lynx Engine: >= 3.2
• Platforms: full support for iOS and Android, with ongoing improvements for Harmony, Web, and Desktop

#Further Resources

lynx-ui components make heavy use of Main Thread Script, which runs interaction logic directly on the main thread for smoother, more responsive experiences. To understand how it works, see the Main Thread Script guide in the ReactLynx docs.

If you use AI-assisted development, lynx-ui Skills provides pre-configured component references that help coding agents generate more accurate lynx-ui code.

#Building with the Community

lynx-ui is a place to explore and validate new ideas for Lynx components. We welcome contributions from the community and hope to make every improvement visible and reusable.

#Share Real-World Use Cases

Whether you are building e-commerce, social, live-streaming, or other types of apps, we welcome real-world cases from your development practice. If you discover meaningful interactions, stability improvements, or performance optimizations, lynx-ui can help refine them into reusable components with appropriate compatibility and performance considerations.

#Explore New Interaction Patterns

lynx-ui is committed to advancing interaction design in Lynx. We look forward to working with the community to discuss, iterate on, and implement practical solutions for more expressive user experiences.

#Grow the Lynx Ecosystem

Your experience with Lynx development is essential to the growth of the ecosystem. We sincerely welcome your feedback, participation, and contributions.

Visit the GitHub repository to get started, or read the Contribution Guide for details.