Components
Loading preview...
The ActionToolbar component is a modern, interactive toolbar built to combine functionality and design elegance. Inspired by the shared-border button style, it presents a unified, polished look with rounded edges, subtle gradients, and smooth hover transitions. Each button can act independently or include dropdown menus for extended actions, making it ideal for editor panels, dashboards, or productivity interfaces. The toolbar supports active states, badges for counts, and an optional compact mode for tighter layouts. With its clean design, responsive behavior, and intuitive interactivity, ActionToolbar offers both practicality and a refined visual experience—perfect for any modern web application interface.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/action-toolbarimport { AlignLeft, AlignCenter, AlignRight, Edit3, MoreHorizontal } from "lucide-react";
import { ActionToolbar } from "@/components/ui/action-toolbar";
export default function ToolbarDemo() {
return (
<div className="p-6">
<ActionToolbar
buttons={[
{ label: "Left", icon: <AlignLeft className="size-4" /> },
{ label: "Center", icon: <AlignCenter className="size-4" /> },
{ label: "Right", icon: <AlignRight className="size-4" /> },
{
label: "Edit",
icon: <Edit3 className="size-4" />,
dropdownItems: ["Rename", "Duplicate", "Move to…"],
},
{
label: "More",
icon: <MoreHorizontal className="size-4" />,
dropdownItems: ["Settings", "Export", "Archive"],
},
]}
/>
</div>
);
}