Lambda UI Components

Welcome to Lambda UI Components

Lambda UI Components is a modern, accessible, and flexible React component library designed to help you build beautiful, consistent, and scalable user interfaces with ease. Every component is crafted with precision and attention to detail—because at Lambda UI, we believe in precision in every piece and harmony in the whole.

Why Lambda UI?

Accessible by default: Components follow WAI-ARIA guidelines and are keyboard-friendly.
Modern design: Built-in dark mode, theming, and responsive layouts.
Developer experience: TypeScript-first, clear props, and Storybook demos.
Flexible & composable: Extend, override, or compose components as you need.

What’s Included?

Lambda UI offers a comprehensive set of UI primitives and advanced components, including:

Button
Input & TextArea
Select & Dropdown
Checkbox & Radio
Switch
Dialog & Drawer
Notification
Table & Pagination
Card
Tabs
Slider
Avatar
Progress
Skeleton
And many more…

Get Started

Theming & Customization

Lambda UI Components uses CSS variables for theming. You can globally override the theme by changing variables in your CSS or using data-theme for dark mode and custom themes.

To customize the style of specific components, many support the unstyled prop, which removes default styles so you can apply your own. Tip: For the best experience, only override colors and minor visuals—keep sizing and spacing tokens for consistency.

Core Libraries & Dependencies

React & TypeScript: Core development and type safety.
framer-motion: Smooth animations and transitions for modals, tooltips, drawers, etc.
prismjs: Syntax highlighting for CodeBlock and code display.

These dependencies were chosen for their robustness, React ecosystem compatibility, and their contribution to developer experience, animation, accessibility, and customization.

Frequently Asked Questions (FAQ)

Can I use Lambda UI with Next.js, Vite, Astro, or other React frameworks?

Yes! Lambda UI Components works in any modern React project, including Next.js (app router and pages), Vite, Astro, Remix, and more.

Are the components compatible with React Server Components (RSC)?

Most interactive components require the "use client" directive and work as Client Components. Pure presentational components can be used as Server Components.

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

How do I customize the global theme?

Override the CSS variables in your global stylesheet.

How do I change the style of a specific component?

Use the `unstyled` prop to remove base styles and add your own classes. For best results, only modify colors and minor visuals to keep spacing and proportions consistent.

What is each dependency used for?

See the Core Libraries & Dependencies section above for a breakdown of each library and its purpose.

How do I report a bug or request a feature?

Open an issue or pull request on GitHub.