Radix tabs in two looks, segmented and underline, with disabled tabs and arrow-key movement. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/layro-tabs";
/* Two looks from one component: segmented for switching views of one
thing, underline for sections of a page. Arrow keys move between tabs. */
export default function TabsDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 460 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Workspace</h2>
<div className="mb-5" />
<Tabs defaultValue="members">
<TabsList variant="underline">
<TabsTrigger value="members">Members</TabsTrigger>
<TabsTrigger value="invites">Invites</TabsTrigger>
<TabsTrigger value="roles">Roles</TabsTrigger>
</TabsList>
<TabsContent value="members" className="text-[13px] text-muted-foreground">9 active members, 1 seat left on Team.</TabsContent>
<TabsContent value="invites" className="text-[13px] text-muted-foreground">4 invites waiting for an answer.</TabsContent>
<TabsContent value="roles" className="text-[13px] text-muted-foreground">Owner, Admin, Member and Viewer.</TabsContent>
</Tabs>
<Tabs defaultValue="month" className="mt-6">
<TabsList>
<TabsTrigger value="week">Week</TabsTrigger>
<TabsTrigger value="month">Month</TabsTrigger>
<TabsTrigger value="year">Year</TabsTrigger>
<TabsTrigger value="all" disabled>All time</TabsTrigger>
</TabsList>
<TabsContent value="week" className="text-[13px] text-muted-foreground">42 documents signed this week.</TabsContent>
<TabsContent value="month" className="text-[13px] text-muted-foreground">168 documents signed in September.</TabsContent>
<TabsContent value="year" className="text-[13px] text-muted-foreground">1,204 documents signed in 2026.</TabsContent>
</Tabs>
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.