Impersonation Banner

A top of page bar telling support staff which user account they are viewing as, with an Exit button to end the session. Common in admin and support tools.

src/registry/ui/impersonation-banner.tsx/r/impersonation-banner.json

Installation#

bash

npx shadcn@latest add @minidev/impersonation-banner

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/impersonation-banner.json

Usage#

tsx

import { ImpersonationBanner } from "@/components/ui/impersonation-banner"

export function Example() {
  return (
    <ImpersonationBanner user="casey@acme.com" />
  )
}

API reference#

ImpersonationBanner props
Prop	Type	Default
`user*`	`string`	`-`
`onExit`	`() => void`	`-`
`className`	`string`	`-`

* required

Dependencies#

npm

React only

Built from

Examples#

AdminOrg, SSO, quotas

Account Setup ProgressReact onboarding card that shows account setup as completed steps out of a total, with a labelled progress bar and a hint for the next step to finish.Activity FeedReact activity feed that lists who did what and when, with initials avatars, muted action text and tabular timestamps in a single bordered card.Admin Stat StripResponsive Tailwind row of admin KPI tiles, each with a label, a large tabular value and an optional up or down delta. Collapses from four columns to one.Calendar AgendaReact agenda list of the day's events with a fixed time column, title and optional meta line such as location or attendees, divided inside one card.Goal RingA circular progress ring that shows how far along a goal is, with the percentage in the middle and a caption below. Handy for fitness, sales or weekly targets.Kpi RowA responsive row of KPI tiles, up to four across, each with a label, a large value and an up or down delta. Drop it at the top of a SaaS analytics dashboard.

All dashboard components