A users admin page with search, role and status filters, a sortable table, row selection with a bulk action bar, pagination and a slide-in detail panel.
24 members in the Northwind workspace
| Admin | Active | Just now | |||
| Admin | Active | Just now | |||
| Admin | Active | 8 min ago | |||
| Editor | Active | 15 min ago | |||
| Editor | Active | 18 min ago | |||
| Editor | Active | 40 min ago | |||
| Admin | Active | 1 h ago | |||
| Editor | Active | 2 h ago |
npx shadcn@latest add https://hyperblur.dev/r/admin-dashboard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/admin-dashboard.tsx.
import { AdminDashboard } from "@/components/hyperblur/admin-dashboard"
<AdminDashboard pageSize={8} onSelectionChange={(ids) => console.log(ids)} />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Accent color for selection, checkboxes, active nav item and focus rings. |
| brand | string | "Control" | Product name shown at the top of the sidebar. |
| user | string | "Amara Okafor" | Name used for the avatar initials in the top bar. |
| workspace | string | "Northwind" | Workspace name shown in the breadcrumb and subtitle. |
| users | AdminUser[] | Users to list. Each has id, name, email, role, status, lastActive (minutes ago, -1 for never), team, location, joined and twoFactor. Defaults to 24 sample users. | |
| pageSize | number | 8 | Rows per page. |
| defaultSelected | string[] | [] | Ids of the users selected on first render. |
| onSelectionChange | (ids: string[]) => void | Called with the selected user ids whenever the selection changes. |