Member Profile
A member's profile in an agent workspace: a cover and avatar, lifetime stats, a year of runs that regroups by week, month or year, runs per agent by month and recent tasks, with sharing and editing.
This example uses generated pictures and sample data from this site: art.ts and data.ts. Copy those files from the repository, or use your own images and data in their place.
"use client";
import { MemberProfile } from "@/components/miyuki-ui/member-profile";
import { landscape } from "@/registry/lib/art";
import { people } from "@/registry/lib/data";
const avatars = Object.fromEntries(people.map((p) => [p.name, p.avatar]));
const cover = landscape("otaru-winter", { width: 1600, height: 400, mood: "dawn" });
export default function MemberProfileDemo() {
return <MemberProfile cover={cover} avatars={avatars} />;
}Install
npx shadcn@latest add @miyuki-ui/member-profileThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
MemberProfile
Prop
Type
Kanban Board
A kanban board with four columns whose cards drag between and within columns by pointer or keyboard, with list and timeline views of the same tasks.
Observatory
A public observatory's night page: tonight's sky with seeing, cloud cover and moonrise, an hour-by-hour chart, the moon with a two-week strip, the sun's arc, a month of events, a booking card and a visitor notice.