Skip to content
Lenso UI

Getting started

Build React interfaces with Lenso UI components, native interactions and StyleX.

Lenso UI is a React component library with a shared theme, typed component parts and native keyboard and focus behavior. Import components from @lenso/ui, load the theme from @lenso/tokens, and use StyleX to customize their presentation.

Why Lenso UI?

  • Ready-to-use components. Buttons, forms, navigation and overlays share the same theme and component variants.
  • Composable parts. Build a dialog, menu or field from its public parts without replacing the interaction that connects them.
  • Typed styling. Use xstyle for application styles and semantic CSS variables for colors and surfaces.
  • Native interactions. Ordinary interactive components use Base UI; date, time and color components use React Aria's value models and context. Component API tables describe the actual props and events.

Start building

Follow Quick start to install the packages, load the theme and configure the build adapter. Then render your first component:

import { Button } from "@lenso/ui";
export function App() {  return <Button onClick={() => console.log("Saved")}>Save changes</Button>;}

Browse Components for usage, examples and API details. Learn Styling to customize a component, and Composition to arrange its parts.

Lenso tools

The CLI, MCP server and agent skill expose the same component API, styles and documentation. Use the tool version and contract that match your UI release. Current tool candidates can be built from the source repository; these instructions do not assume they are published on npm.

FAQ

Does Lenso UI require a provider?

There is no universal UI provider. Load the theme stylesheet in your application entry, apply a light or dark scope, and keep contextual parts inside their component root.

Can I customize the components?

Yes. Use a component's variants, compose its public parts, or add StyleX declarations through xstyle. Theming explains shared CSS variables.

Does it work with TypeScript?

Components export their native prop and ref types. The API reference is generated from the current package, including callback signatures.

What about accessibility?

Native components supply their keyboard, focus and semantic behavior. Your application still owns labels, content, contrast and any custom composition. Test these together; the library does not certify your application.

Contribute

Report issues and propose changes in the Lenso UI repository. Read its contribution policy before changing public behavior. Lenso UI is distributed under Apache-2.0, with the notices required by its source adaptations.