Preview Updated 2026-05-10

Floating inspector

Corner-anchored, collapsible inspector panel — useful for performance monitors and debug overlays.

Basic usage

Anchored to one of the four corners; offset controls the distance from the edge. Click the caret in the header to collapse / expand (the title remains visible).

src/App.vue vue

<CfFloatingInspector
v-model:open="open"
placement="bottom-right"
title="Performance"
>
<ul>...</ul>
</CfFloatingInspector>

src/App.tsx tsx

<CfFloatingInspector
open={open}
onOpenChange={setOpen}
placement="bottom-right"
title="Performance"
>
<ul>...</ul>
</CfFloatingInspector>

Four corners and close

Toggle through all four placements; click “close” to demo onOpenChange.

src/App.vue vue

<CfFloatingInspector v-model:open="open" :placement="'top-right'" />

src/App.tsx tsx

<CfFloatingInspector open={open} onOpenChange={setOpen} placement="top-right" />

API

Prop	Type	Default	Description
`open`	`boolean`	`true`
`collapsed`	`boolean`	`false`	Collapsed state
`placement`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`
`title`	`string`	—
`width`	`number \| string`	`320`
`offset`	`number`	`24`	Distance from viewport edge in px
`closable`	`boolean`	`true`