Trusted by Betterstacks

Build Interactive ToolbarsThat Users Love

A powerful SDK for creating floating toolbars with snap-to-grid positioning, smooth animations, and complete customization. Built for React ecosystem and production-ready.

toolbar-demo.app

Everything You Need

Built with developers in mind, featuring all the tools you need for seamless integration.

Quick Setup

Get started in minutes with our simple installation process. No complex configuration required.

$ npm install @betterstacks/toolbar-sdk
// React Integration
import
{ Toolbar } from '@betterstacks/toolbar-sdk';

<Toolbar
actions={actions}
position="top-right"
/>
npm installimport & usecustomize

Snap-to-Grid

9 predefined hotspots with intelligent positioning.

React Ecosystem

Built specifically for React and Next.js applications with TypeScript support.

React
Next.js
TypeScript

Production Ready

Optimized for performance with smooth animations and responsive design.

5kb
Bundle Size
60fps
Animations
9
Positions
100%
Customizable

Persistent Storage

Remembers user's preferred position and settings across sessions.

Position saved

Auto Orientation

Automatically adapts layout based on available space and user preferences.

Get Started in Minutes

Simple installation and configuration with comprehensive documentation.

Terminal
$npm i @betterstacks/toolbar-sdk

Copy and run in your terminal

React Integration
Import and use directly in your React application
// Install the package
$ npm install @betterstacks/toolbar-sdk

// Import and use
import
{ Toolbar } from '@betterstacks/toolbar-sdk';

<Toolbar />
Next.js Integration
Dynamic import with SSR disabled for Next.js apps
// Dynamic import
const
Toolbar = dynamic(() => import('@betterstacks/toolbar-sdk'), { ssr: false });

Ready to Get Started?

Join the developers already using Toolbar SDK to create better user experiences.