Glass Toolbar

Buttons 2

About

A floating pill-shaped toolbar made of liquid glass that groups icon action buttons, like an iOS 26 formatting toolbar.

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

Code

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

Usage.tsx

"use client";

import {
  GlassToolbar,
  GlassToolbarButton,
  GlassToolbarSeparator,
} from "@/components/ui/glass-toolbar";

import * as React from "react";
import { HugeiconsIcon } from "@hugeicons/react";
import {
  BoldIcon,
  HighlighterIcon,
  ItalicIcon,
  LinkIcon,
  UnderlineIcon,
} from "@hugeicons/core-free-icons";

const tools = [
  { id: "bold", icon: <HugeiconsIcon icon={BoldIcon} /> },
  { id: "italic", icon: <HugeiconsIcon icon={ItalicIcon} /> },
  { id: "underline", icon: <HugeiconsIcon icon={UnderlineIcon} /> },
  { id: "highlight", icon: <HugeiconsIcon icon={HighlighterIcon} /> },
];

export default function GlassToolbarDemo() {
  const [active, setActive] = React.useState<string[]>(["bold"]);
  const toggle = (id: string) =>
    setActive((a) => (a.includes(id) ? a.filter((x) => x !== id) : [...a, id]));

  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
      <GlassToolbar>
        {tools.map((tool) => (
          <GlassToolbarButton
            key={tool.id}
            aria-label={tool.id}
            active={active.includes(tool.id)}
            onClick={() => toggle(tool.id)}
          >
            {tool.icon}
          </GlassToolbarButton>
        ))}
        <GlassToolbarSeparator />
        <GlassToolbarButton aria-label="Link">
          <HugeiconsIcon icon={LinkIcon} />
        </GlassToolbarButton>
      </GlassToolbar>
    </div>
  );
}