Components

Toolbar

Floating glass toolbar: groups of swelling buttons on one capsule with a lifting selection lens, and round buttons beside them that fuse with it when pressed.

Choose a tool. One glass lens follows the selection; press the round button beside the group and the two glasses flow together.

Select tool selected

Installation

pnpm dlx shadcn@latest add https://liquidcn.snmandela.com/r/liquid-toolbar.json

The command copies these files into your project:

components/ui/liquid/toolbar.tsx
components/ui/liquid/button.tsx
components/ui/liquid/liquid.css
lib/liquid/motion.ts
lib/liquid/press.ts
lib/liquid/lens.ts
lib/liquid/lens-parts.ts
lib/liquid/refraction.ts
lib/liquid/fusion.ts
lib/liquid/bar.ts
lib/liquid/roving.ts

It extends the shadcn button component, whichever primitive library yours is built on. If your project doesn't have it yet, the CLI adds it from shadcn's registry; if it does, yours stays as it is, and the CLI asks before replacing it.

Usage

import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/components/ui/liquid/toolbar"

<Toolbar aria-label="Photo actions">
  <ToolbarGroup>
    <ToolbarButton aria-label="Favorite" aria-pressed={favorite}>
      <Heart />
    </ToolbarButton>
    <ToolbarSeparator />
    <ToolbarButton aria-label="Add to album">
      <Plus />
    </ToolbarButton>
  </ToolbarGroup>
  <ToolbarButton aria-label="More actions">
    <Ellipsis />
  </ToolbarButton>
</Toolbar>

Examples

Actions and a menu

A toggle and a plain action share a group; the menu trigger stands beside it as a round button of its own. The lens sits on whichever button has aria-pressed.

API reference

Toolbar

A div with the toolbar role that lays out groups and round buttons. Other props go to the div.

Prop	Type	Default
`orientation` Lays the toolbar out in a row or a column; arrow keys follow.	`"horizontal" \| "vertical"`	`"horizontal"`

ToolbarGroup

A capsule of glass around related buttons, with the selection lens. Props go to the div.

ToolbarButton

A liquid Button, so it takes the shadcn Button props. In a group it sits on the group's glass; directly in the toolbar it is a round glass button of its own.

Prop	Type	Default
`aria-pressed` The lens lands on the button in a group where this is true.	`boolean`	None
`variant` Any liquid Button variant, e.g. `prominent` for a tinted round button.	`LiquidButtonVariant`	`"ghost" in a group, "default" outside`

ToolbarSeparator

A line between buttons, across the toolbar's direction.

Motion

Parameter	Value
Button swell	Same as Button: up to 1.18 for a 44 px circle
Lens	Lifts and travels to the pressed button, like the Tabs lens
Fusion	A round button and the group beside it grow a glass neck while pressed, like the tab bar and its search button

Springs keep their velocity when interrupted, and every value here is removed under reduced motion. How the motion works

Accessibility

One tab stop for the whole toolbar. Arrow keys along its direction move between buttons and wrap, mirrored in right-to-left layouts; Home and End jump to the ends. Disabled buttons are skipped.
Icon buttons need an aria-label. Toggles use aria-pressed with a label that stays the same.
The lens and the glass neck are decorative and hidden from assistive technology.