Toolkit

A flexible toolbar component for grouping related actions and tools with multiple variants and selection modes

Default Variant (Single Selection)

Multiple Selection (Formatting Tools)

Active: bold

Outline Variant

Ghost Variant (with spacing)

Filled Variant

Size Variants

Small

Medium (Default)

Large

Vertical Orientation

Default

Outline

Ghost

With Disabled Items

Text Editor Toolbar (Complex Example)

Social Actions (Multiple Selection)

Selected actions: select

Card with Toolkit

Document Settings

Configure your document preferences and formatting options using the toolbar above.

Toolkit Component

tsx

1"use client";
2import React, { useState } from "react";
3import { cn } from "@/lib/cn";
4
5interface ToolkitItem {
6  id: string;
7  label: string;
8  icon?: React.ReactNode;
9  disabled?: boolean;
10  active?: boolean;