logo

Aki UI

アキ ウイ

Toolbar

ツールバー

A rail of icon tools where the active one says its name. Expandable Tabs does something similar with a shared pill that slides between items; here each button animates its own padding and gap while the label grows from zero width, so the rail squeezes around the open tool and nothing travels between them — which is what lets a tool be switched off again by clicking it a second time. It is a toolbar and not a tablist, so it behaves like one: the toolbar role↗↗, a single tab stop, arrow keys and Home/End moving focus along the rail, and aria-pressed carrying the state. The demo toast and the lock toggle of the original are dropped. Adapted from Kokonut UI↗↗ under the MIT licence.

Installation

Copy and paste the following code into a new component file:1

"use client"

/**
* Adapted for Aki UI from Kokonut UI's Toolbar.
* Original author: @dorianbaffier — https://kokonutui.com
* Copyright (c) 2025 kokonutUI, MIT License.
* https://github.com/kokonut-labs/kokonutui
*
* Reworked here onto the local palette, with the demo toast and lock toggle
* dropped, roving focus added and motion/react swapped for framer-motion.

How to use it2

"use client"

import { MousePointer2, Move } from "lucide-react"
import { Toolbar } from "@/components/ui/toolbar"

const items = [
{ id: "select", label: "Select", icon: <MousePointer2 className="h-4 w-4" /> },
{ id: "move", label: "Move", icon: <Move className="h-4 w-4" /> },
]

Props

Toolbar

NameDefaultDescription
items—

ToolbarItem[]

Tools in the order they appear

defaultIdnull

string

Which tool starts pressed

onSelect—

(id: string | null) => void

Fired on every change, with null when the tool is switched off

darkfalse

boolean

Render the dark palette

ToolbarItem

NameDefaultDescription
id—

string

Unique key

label—

string

Accessible name, tooltip, and the text revealed when pressed

icon—

ReactNode

Glyph shown at all times