Getting Started

Lambda UI Components requires React 18+ and ReactDOM as peer dependencies. Make sure they are installed in your project.

pnpm add react react-dom

For syntax highlighting in CodeBlock, install prismjs:

pnpm add prismjs

Lambda UI Components is published as an npm package. You can install it using your favorite package manager:

pnpm add lambda-ui-components

Tip: For best results, use pnpm or yarn in monorepo setups.

Import and use components in your React app:

import { Button, Card } from "lambda-ui-components";

export default function Example() {
  return (
    <Card>
      <Button color="primary">Hello Lambda UI</Button>
    </Card>
  );
}

All components are fully typed and support both controlled and uncontrolled usage patterns.

If you use Next.js App Router, add "use client" at the top of your page or component file whenever you use interactive components:

"use client";
import { Button } from "lambda-ui-components";
// ...

This is only necessary in Next.js App Router. In Vite, Astro, Remix, or CRA, you do not need this directive.

Import the Lambda UI CSS in your main entry file (usually src/index.tsx or _app.tsx in Next.js):

import "lambda-ui-components/dist/main.css";

This ensures all components are styled correctly out of the box.

For advanced theming, localization, and consistent UI configuration, wrap your app with LambdaConfigProvider and ThemeProvider at the root of your component tree:

import { LambdaConfigProvider, ThemeProvider } from "lambda-ui-components";

export default function App({ children }) {
  return (
    <LambdaConfigProvider lang="en">
      <ThemeProvider defaultTheme="dark">
        {children}
      </ThemeProvider>
    </LambdaConfigProvider>
  );
}

Learn more:

• Theming & Customization
• Dark Mode
• Localization & Language