#What is lynx-ui?

@lynx-js/lynx-ui is the official headless UI library for ReactLynx. It is maintained by the Lynx team and provides a flexible, reusable, and high-performance foundation for building ReactLynx components.

It extends native components through frontend abstractions, helping build a high-performance, native-like Lynx component ecosystem with broad compatibility.

UI capabilities across platforms often differ in behavior, APIs, and even design philosophy, especially for advanced interactions. Cross-platform frameworks need to reconcile these differences, and Lynx is no exception.

lynx-ui organizes the behavior and constraints of low-level atomic APIs, then provides consistent frontend components on top of them so developers can deliver a more predictable cross-platform experience.

#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

• LynxSDK: >= 3.2

#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.