Inset Command Dock

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/inset-command-dock.json

Usage

import { InsetCommandDock } from "@/components/matos-ui/inset-command-dock"

<InsetCommandDock
  defaultActiveId="edit"
  groups={[
    {
      id: "content",
      actions: [
        { id: "edit", label: "Edit", icon: <FilePenLine /> },
        { id: "preview", label: "Preview", icon: <Eye /> },
      ],
    },
  ]}
  status={{ label: "Saved" }}
/>

Reference

InsetCommandDock Props

Prop	Type	Default	Description
`actions`	`InsetCommandDockAction[]`	-	Flat list of actions.
`groups`	`InsetCommandDockGroup[]`	-	Grouped actions with separators.
`activeId`	`string?`	-	Controlled active action id.
`defaultActiveId`	`string?`	First action	Initial active action id.
`onAction`	`(action) => void`	-	Callback fired when action is used.
`showLabels`	`boolean`	`true`	Shows labels next to icons.
`status`	`InsetCommandDockStatus?`	-	Optional dock status.
`shape`	`"rounded" \| "pill"`	`"rounded"`	Dock corner style.
`density`	`"compact" \| "comfortable"`	`"comfortable"`	Dock spacing preset.
`variant`	`"default" \| "floating"`	`"default"`	Visual treatment.

Also exported: insetCommandDockVariants, InsetCommandDockGroupView, InsetCommandDockStatusView, and related types.