Inspector Panel
A non-modal right-side inspector with Details and Activity tabs, property rows and an optional pin.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
InspectorPanelProps
Also accepts all props of Omit<React.ComponentProps<"aside">, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| open* required | boolean | — | — |
| onOpenChange* required | (open: boolean) => void | — | — |
| title* required | React.ReactNode | — | — |
| subtitle | React.ReactNode | — | — |
| icon | React.ReactNode | — | — |
| properties* required | InspectorProperty[] | — | — |
| activity | InspectorActivity[] | [] | — |
| pinnable | boolean | true | Show the pin button. Pinned panels ignore outside clicks. |
| pinned | boolean | — | — |
| defaultPinned | boolean | false | — |
| onPinnedChange | (pinned: boolean) => void | — | — |
| width | number | 360 | Panel width in px on screens wider than 640px; below that it is a full-width sheet |
| fixed | boolean | false | Use viewport positioning instead of the nearest positioned ancestor |
Install
$ npx shadcn@latest add https://chromotion.dev/r/inspector-panel.json