Toolbar

A sleek formatting toolbar with smooth scale animations, text alignment, and active state tracking. Built with Framer Motion and Lucide React.

Preview

Installation

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/toolbar.json

Usage

Import the component:

import { Toolbar } from "@/components/ui/toolbar"

Use it in your code:

import { Toolbar } from "@/components/ui/toolbar";

export default function App() {
  return (
    <div className="relative">
      <Toolbar 
        onAction={(action, state) => console.log(action, state)} 
        className="my-4"
      />
    </div>
  );
}

Props

Property	Type	Default	Description
`onAction`	`function`	`-`	Callback function triggered when any button is clicked: (action: string, state: boolean \| string) => void.
`className`	`string`	`-`	Optional CSS classes to apply to the toolbar wrapper container.