Tabs

Buttons

About

Radix tabs in two looks, segmented and underline, with disabled tabs and arrow-key movement. Part of the Layro System: layro.vercel.app.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tabs to your project and fits it to your theme.

Code

How Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}