Tabs

Guidelines#

Use it for 2–6 views of the same object (Overview, Activity, Emails). Different destinations belong in the sidebar. Below lg, Max uses a full-width segmented control.

What you provide: Tabs with defaultValue or value/onValueChange, a TabsList of TabsTriggers (short nouns, sentence case; disabled for unavailable views), and a TabsContent per value. The list scrolls horizontally when it overflows.

Known gap: the active highlight jumps rather than slides (noted in Max's motion guide).

Facts#

API#

TypeScript declarations emitted from src/components/ui/tabs.tsx (the module also exports its other parts).

declare function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): any;
declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): any;
declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): any;
declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): any;
export { Tabs, TabsList, TabsTrigger, TabsContent };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h(DC.Tabs, { defaultValue: "overview", className: "max-w-xl" },
    h(DC.TabsList, null,
      h(DC.TabsTrigger, { value: "overview" }, "Overview"),
      h(DC.TabsTrigger, { value: "activity" }, "Activity"),
      h(DC.TabsTrigger, { value: "emails" }, "Emails"),
      h(DC.TabsTrigger, { value: "notes", disabled: true }, "Notes")),
    h(DC.TabsContent, { value: "overview" },
      h(DC.Card, null, h(DC.CardHeader, null, h(DC.CardTitle, null, "Northwind Traders"), h(DC.CardDescription, null, "Series B fintech · 240 people · Paris")))),
    h(DC.TabsContent, { value: "activity" }, h("p", { className: "text-sm text-muted-foreground p-2" }, "12 events this week.")),
    h(DC.TabsContent, { value: "emails" }, h("p", { className: "text-sm text-muted-foreground p-2" }, "3 threads.")));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Navigation#