Glass Tabs

Component

About

A liquid glass segmented control with a thick specular rim and a recessed pill that stretches, flows and squashes into place when you switch.

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

Code

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

Usage.tsx

"use client"

import * as React from "react"
import { GlassTabs, glassTabsBackdrop } from "@/components/ui/glass-tabs"

export default function GlassTabsDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8" style={{ background: glassTabsBackdrop }}>
      <GlassTabs options={["Inbox", "Draft"]} size={72} />
    </div>
  )
}