+ );
+};
diff --git a/openhands-ui/components/radio-group/RadioOption.tsx b/openhands-ui/components/radio-group/RadioOption.tsx
new file mode 100644
index 0000000000..3b60e628ce
--- /dev/null
+++ b/openhands-ui/components/radio-group/RadioOption.tsx
@@ -0,0 +1,91 @@
+import { useId } from "react";
+import type { HTMLProps } from "../../shared/types";
+import { Typography } from "../typography/Typography";
+import { cn } from "../../shared/utils/cn";
+
+type RadioOptionProps = Omit, "id" | "checked"> & {
+ label: React.ReactNode;
+ labelClassName?: string;
+ id: string;
+};
+
+export const RadioOption = ({
+ className,
+ label,
+ labelClassName,
+ value,
+ id: propId,
+ disabled,
+ onChange,
+ ...props
+}: RadioOptionProps) => {
+ const generatedId = useId();
+ const id = `${propId}_${generatedId}`;
+
+ return (
+
+ );
+};
diff --git a/openhands-ui/components/scrollable/Scrollable.stories.tsx b/openhands-ui/components/scrollable/Scrollable.stories.tsx
new file mode 100644
index 0000000000..2c4d275ae2
--- /dev/null
+++ b/openhands-ui/components/scrollable/Scrollable.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Scrollable } from "./Scrollable";
+import { Typography } from "../typography/Typography";
+
+const meta = {
+ title: "Components/Scrollable",
+ component: Scrollable,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+const text = `
+ Vivamus fermentum metus eget aliquet sagittis. Quisque tempor velit id
+ urna auctor, egestas venenatis leo accumsan. Vivamus quis turpis semper,
+ volutpat odio vel, laoreet urna. Nunc vitae felis non lectus efficitur
+ tristique nec ac leo. Phasellus libero risus, egestas non urna sit amet,
+ ultricies venenatis enim. Proin in cursus est, vitae volutpat orci. Proin
+ posuere, leo id placerat sodales, nunc risus egestas ex, non ultrices
+ ipsum justo non metus. Quisque sit amet dapibus massa. Proin vel eros
+ hendrerit libero rutrum posuere a eget enim. Donec mollis ultricies
+ sodales. Curabitur sapien purus, faucibus ut aliquam sit amet, pulvinar
+ accumsan massa. Duis gravida dapibus turpis, vitae euismod massa tristique
+ non. Curabitur massa felis, rhoncus ac tellus nec, molestie aliquet dolor.
+ Nunc et semper ligula, et lobortis dolor. Proin venenatis fermentum nibh.
+ Etiam maximus rutrum leo, nec varius ipsum laoreet ut. Donec facilisis
+ augue a massa ornare, eu mollis quam consectetur. Donec vitae diam lacus.
+ Nullam vitae erat nec neque elementum fermentum. Pellentesque condimentum
+ ac sem quis porta. Nam mattis vel nulla in venenatis. Nulla ac mattis
+ ligula. Etiam fermentum, quam finibus euismod efficitur, magna ex luctus
+ enim, quis eleifend risus leo non ex. Nunc aliquet laoreet nibh, quis
+ fringilla lorem dapibus sit amet. Nullam ipsum libero, suscipit at massa
+ quis, sagittis elementum magna. Pellentesque ac varius dolor, in molestie
+ velit. Sed sagittis felis at velit tincidunt facilisis. Fusce et lacinia
+ elit, ac mattis risus. Fusce mollis augue magna, in laoreet dui
+ scelerisque at. Mauris facilisis rutrum elit ac facilisis. Morbi a
+ fringilla velit. Ut id nulla sagittis, accumsan libero vel, placerat nisi.
+ Etiam lacinia lectus orci, maximus tempus leo interdum at. Proin sapien
+ est, pretium quis urna tempor, gravida convallis dolor. Maecenas eget
+ lorem odio. Duis maximus diam id mauris cursus, ut tempus sapien
+ tristique. Vestibulum ante ipsum primis in faucibus orci luctus et
+ ultrices posuere cubilia curae; Aliquam fermentum, ipsum et consectetur
+ blandit, nibh erat tempus justo, in aliquet ex mi in tortor. Nullam
+ posuere tortor sed mattis dictum. Nam vel nulla ex. Aenean ac est nec
+ tellus cursus semper id non est. Morbi placerat ex vel nibh fringilla,
+ vitae porta velit consequat. Sed facilisis, lacus ultrices lobortis
+ efficitur, odio augue sodales tortor, vel maximus velit purus quis nulla.
+ Nullam malesuada accumsan augue id auctor.
+`;
+
+export const Vertical: Story = {
+ args: {
+ mode: "scroll",
+ type: "vertical",
+ },
+ render: ({ mode, type }) => (
+
+ {text}
+
+ ),
+};
+
+export const Horizontal: Story = {
+ args: {
+ mode: "scroll",
+ type: "horizontal",
+ },
+ render: ({ mode, type }) => (
+
+ {text}
+
+ ),
+};
diff --git a/openhands-ui/components/scrollable/Scrollable.tsx b/openhands-ui/components/scrollable/Scrollable.tsx
new file mode 100644
index 0000000000..a707d9e174
--- /dev/null
+++ b/openhands-ui/components/scrollable/Scrollable.tsx
@@ -0,0 +1,50 @@
+import type { PropsWithChildren } from "react";
+import type { HTMLProps } from "../../shared/types";
+import { cn } from "../../shared/utils/cn";
+
+export type ScrollableMode = "auto" | "scroll";
+export type ScrollableType = "horizontal" | "vertical";
+
+export type ScrollableProps = HTMLProps<"div"> & {
+ mode?: ScrollableMode;
+ type?: ScrollableType;
+};
+
+const scrollableStyles: Record<
+ ScrollableType,
+ Record
+> = {
+ horizontal: {
+ auto: "overflow-x-auto overflow-y-hidden whitespace-nowrap",
+ scroll: "overflow-x-scroll overflow-y-hidden whitespace-nowrap",
+ },
+ vertical: {
+ auto: "overflow-y-auto overflow-x-hidden",
+ scroll: "overflow-y-scroll overflow-x-hidden",
+ },
+};
+
+export const Scrollable = ({
+ className,
+ children,
+ tabIndex,
+ mode = "auto",
+ type = "vertical",
+ ...props
+}: PropsWithChildren) => {
+ const style = scrollableStyles[type][mode];
+ return (
+
+ {children}
+
+ );
+};
diff --git a/openhands-ui/components/toggle/Toggle.stories.tsx b/openhands-ui/components/toggle/Toggle.stories.tsx
new file mode 100644
index 0000000000..c7030ccd2b
--- /dev/null
+++ b/openhands-ui/components/toggle/Toggle.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Toggle, type ToggleProps } from "./Toggle";
+import { useState } from "react";
+
+const meta = {
+ title: "Components/Toggle",
+ component: Toggle,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+const ToggleComponent = (props: ToggleProps) => {
+ const [checked, setChecked] = useState(false);
+ return (
+ setChecked(e.target.checked)}
+ />
+ );
+};
+
+export const Enabled: Story = {
+ args: {
+ label:
+ "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
+ },
+ render: ToggleComponent,
+};
+
+export const Disabled: Story = {
+ args: {
+ disabled: true,
+ label:
+ "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
+ },
+ render: ToggleComponent,
+};
diff --git a/openhands-ui/components/toggle/Toggle.tsx b/openhands-ui/components/toggle/Toggle.tsx
new file mode 100644
index 0000000000..1959d4fcb4
--- /dev/null
+++ b/openhands-ui/components/toggle/Toggle.tsx
@@ -0,0 +1,114 @@
+import { useId } from "react";
+import type { HTMLProps } from "../../shared/types";
+import { cn } from "../../shared/utils/cn";
+import { Typography } from "../typography/Typography";
+import { invariant } from "../../shared/utils/invariant";
+
+type ToggleTextProps =
+ | { onText: string; offText: string }
+ | { onText?: undefined; offText?: undefined };
+
+export type ToggleProps = HTMLProps<"input"> & {
+ label?: React.ReactNode;
+ labelClassName?: string;
+} & ToggleTextProps;
+
+export const Toggle = ({
+ className,
+ labelClassName,
+ label,
+ id: propId,
+ disabled,
+ checked,
+ onChange,
+ onText,
+ offText,
+ ...props
+}: ToggleProps) => {
+ invariant(
+ (onText == null && offText == null) || onText != null || offText != null,
+ "Both onText and offText must be either defined or undefined"
+ );
+
+ const generatedId = useId();
+ const id = propId ?? generatedId;
+
+ return (
+
+ );
+};
diff --git a/openhands-ui/components/tooltip/Tooltip.stories.tsx b/openhands-ui/components/tooltip/Tooltip.stories.tsx
new file mode 100644
index 0000000000..dd2881461e
--- /dev/null
+++ b/openhands-ui/components/tooltip/Tooltip.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tooltip } from "./Tooltip";
+import { Typography } from "../typography/Typography";
+
+const meta = {
+ title: "Components/Tooltip",
+ component: Tooltip,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ argTypes: {
+ placement: {
+ control: {
+ type: "select",
+ },
+ options: ["top", "right", "bottom", "left"],
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Hover: Story = {
+ args: {
+ placement: "top",
+ text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
+ withArrow: true,
+ },
+ render: ({ text, withArrow, placement }) => (
+
+ Hover me
+
+ ),
+};
+export const Click: Story = {
+ args: {
+ placement: "top",
+ text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries",
+ withArrow: true,
+ },
+ render: ({ text, withArrow, placement }) => (
+
+ Click me
+
+ ),
+};
diff --git a/openhands-ui/components/tooltip/Tooltip.tsx b/openhands-ui/components/tooltip/Tooltip.tsx
new file mode 100644
index 0000000000..afb71b5247
--- /dev/null
+++ b/openhands-ui/components/tooltip/Tooltip.tsx
@@ -0,0 +1,131 @@
+import {
+ useFloating,
+ offset,
+ flip,
+ shift,
+ useHover,
+ useFocus,
+ useRole,
+ useDismiss,
+ useInteractions,
+ FloatingPortal,
+ autoUpdate,
+ arrow,
+ FloatingArrow,
+ type UseFloatingOptions,
+ useClick,
+} from "@floating-ui/react";
+import { useRef, useState, type PropsWithChildren } from "react";
+import { Typography } from "../typography/Typography";
+
+type ControlledTooltipProps = {
+ open: boolean;
+ setOpen: React.Dispatch>;
+};
+
+type UncontrolledTooltipProps = {
+ open?: undefined;
+ setOpen?: undefined;
+};
+
+type TooltipTriggerType = "click" | "hover";
+
+type BaseTooltipProps = {
+ text: string;
+ withArrow?: boolean;
+ className?: string;
+ placement?: UseFloatingOptions["placement"];
+ trigger?: TooltipTriggerType;
+};
+
+export type TooltipProps = BaseTooltipProps &
+ (ControlledTooltipProps | UncontrolledTooltipProps);
+
+export const Tooltip = ({
+ children,
+ className,
+ text,
+ withArrow = true,
+ placement = "top",
+ open,
+ setOpen: setOpenProp,
+ trigger = "hover",
+}: PropsWithChildren) => {
+ const [localOpen, setLocalOpen] = useState(false);
+ const arrowRef = useRef(null);
+ const readOnlyTrigger = useRef(trigger);
+
+ const isControlled = open !== undefined;
+ const isOpen = isControlled ? open : localOpen;
+ const setOpen = isControlled ? setOpenProp : setLocalOpen;
+
+ const { refs, floatingStyles, context } = useFloating({
+ open: isOpen,
+ onOpenChange: setOpen,
+ middleware: [
+ offset(8),
+ flip(),
+ shift(),
+ withArrow
+ ? arrow({
+ element: arrowRef,
+ })
+ : undefined,
+ ],
+ whileElementsMounted: autoUpdate,
+ placement,
+ });
+
+ const triggerInteractions =
+ readOnlyTrigger.current === "click"
+ ? [useClick(context)]
+ : [useHover(context, { move: false }), useFocus(context)];
+
+ const dismiss = useDismiss(context);
+ const role = useRole(context, { role: "tooltip" });
+
+ const { getReferenceProps, getFloatingProps } = useInteractions([
+ ...triggerInteractions,
+ dismiss,
+ role,
+ ]);
+ return (
+ <>
+
+ {isOpen && (
+
+