Sheet with Tabs for React

With Tabs, TabsList, TabsTrigger and TabsContent, mapped from a static array of three tabs. Overview is the default tab. TabsList uses variant="line", and each trigger and panel share a value.

Tab moves focus onto the selected tab, and the arrow keys move between tabs. Tab again moves into the panel.

Control the tabs: keep the value in state, set it before you open the sheet, and update it on change. Pass value and onValueChange.

One paragraph of muted text per tab. Replace it with the real panel: a member list, an activity feed, a settings form.

The button labeled Open Sheet is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Project Details, with View and manage project information as the description.