Toolbar

A capsule of glass holding buttons and separators.

Installation#

pnpmnpmyarnbun

$ pnpm dlx shadcn@latest add @liquikit/toolbar

Needs the @liquikit registry in your components.json. Set it up once.

Usage#

import { Toolbar } from "@/components/liquikit/toolbar"
import { Bold, Link } from "lucide-react"

<Toolbar.Root aria-label="Formatting">
  <Toolbar.Button icon aria-label="Bold"><Bold className="size-4" /></Toolbar.Button>
  <Toolbar.Separator />
  <Toolbar.Button icon aria-label="Link"><Link className="size-4" /></Toolbar.Button>
</Toolbar.Root>

API Reference#

Prop	Type	Default
`theme`	`"light" \| "dark"` Light or dark glass. Falls back to the nearest `GlassThemeProvider`, then light.	—
`lens`	`Partial<LensProfile>` Overrides for the lens profile, such as `thickness`, `bevel`, `ior` and `magnification`.	—
`liquid`	`number` How far the glass squashes and stretches as it moves. `0` keeps it rigid.	—
`refraction`	`"interactive" \| "always"` When the glass bends the page. `interactive` bends it while the component is pressed, dragged or focused, `always` bends it all the time.	"interactive"
`children`	`ReactNode` The content.	—

Also takes every prop of Base UI's toolbar, plus className and style.

Prop	Type	Default
`icon`	`boolean`	false

Also takes every prop of Base UI's toolbar, plus className and style.

Toggle Group Tooltip