Lambda UI
v1.3.4
Stable

Tabs

Tabs component organizes content into separate views where only one view can be visible at a time.

Playground

Experiment with all the properties of the Tabs component in real time.

Properties
color

Controls the color scheme of the tabs.

variant

Defines the visual style of the tabs.

size
Medium

Controls the size of the tabs.

radius
Tiny

Defines the border radius of the tabs.

Home Content

Welcome to the home tab!

Usage

import { Tabs } from "lambda-ui-components";
import { Home, Settings, User } from "lucide-react";

export default function App() {
	return (
		<Tabs variant="underline" color="primary">
			<Tabs.List>
				<Tabs.Tab title="Home" icon={<Home />} />
				<Tabs.Tab title="Profile" icon={<User />} />
				<Tabs.Tab title="Settings" icon={<Settings />} />
			</Tabs.List>

			<Tabs.Panels>
				<Tabs.Panel>Home content</Tabs.Panel>
				<Tabs.Panel>Profile content</Tabs.Panel>
				<Tabs.Panel>Settings content</Tabs.Panel>
			</Tabs.Panels>
		</Tabs>
	);
}

API Reference

Props

Prop
Default
Type
variant
"underline"
"underline" | "soft" | "box" | "border"
size
"medium"
"tiny" | "small" | "medium" | "large"
color
"neutral"
"neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info"
radius
"tiny"
"none" | "tiny" | "small" | "medium" | "large" | "full"
value
0
number
onChange
undefined
(value: number) => void
disabled
false
boolean
The modern React component library.
© 2026 Lambda UI. Made with in Mexico by AletzMan.