Soft Tabs

Component 1

About

A soft, raised tab bar whose pressed-in well glides between tabs on a spring, beside a round frosted glass plus with drifting pastel iridescence.

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

Code

How Soft 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 { SoftTabs } from "@/components/ui/soft-tabs";

/** Soft Tabs centred in the preview. Click a tab, use the arrow keys, or press the glass plus. */
export default function SoftTabsDemo() {
  const [tab, setTab] = React.useState("memories");
  return (
    <main className="relative h-screen min-h-[340px] w-full overflow-hidden" style={{ backgroundColor: "#eef0f4" }}>
      <SoftTabs value={tab} onValueChange={setTab} style={{ width: "100%", height: "100%" }} />
    </main>
  );
}