People & social

<Avatar name="Ada Lovelace" />

<AvatarGroup
    max={3}
    names={["Ada Lovelace", "Grace Hopper", "Alan Turing", "Linus Torvalds"]}
/>

<PresenceAvatar name="Ada Lovelace" status="success" />

<UserButton name="Ada Lovelace" email="[email protected]" onClick={() => {}} />

<OrgSwitcher
    org={{ id: "acme", name: "Acme Inc.", plan: "Pro" }}
    onClick={() => {}}
/>

<ProfileHeader
    name="Ada Lovelace"
    handle="ada"
    bio="Analyst of engines. Writes the first programs."
    actions={
        <Button variant="outline" onClick={() => {}}>
            Follow
        </Button>
    }
/>

function Example() {
    const members = signal([
        { name: "Grace Hopper", email: "[email protected]" },
        { name: "Alan Turing", email: "[email protected]" },
    ]);
    return (
        <Stack gap="0.25rem">
            <For each={members()}>
                {(member) => (
                    <MemberRow
                        name={member.name}
                        email={member.email}
                        onRemove={() => members.set(members().filter((m) => m !== member))}
                    />
                )}
            </For>
            <Show when={members().length === 0}>
                <Text muted>No members left.</Text>
            </Show>
        </Stack>
    );
}

function Example() {
    const status = signal("Invitation pending");
    return (
        <Stack gap="0.5rem">
            <InviteCard
                email="[email protected]"
                onResend={() => status.set("Invitation re-sent just now")}
                onRevoke={() => status.set("Invitation revoked")}
            />
            <Text muted>{status()}</Text>
        </Stack>
    );
}

<Comment author="Ada Lovelace" meta="2h ago">
    Looks great — can we add a reduced-motion variant?
</Comment>

<Stack gap="0.5rem">
    <ChatBubble from="them" author="Grace" meta="09:41">
        Is the deploy done?
    </ChatBubble>
    <ChatBubble from="me" meta="09:42">
        Yes — live on production.
    </ChatBubble>
</Stack>

<Text>
    Thanks <Mention name="ada" onClick={() => {}} />, merging now.
</Text>

function Example() {
    const reactions = signal([
        { emoji: "👍", count: 12, active: true },
        { emoji: "🎉", count: 4, active: false },
        { emoji: "👀", count: 2, active: false },
    ]);
    const toggle = (emoji: string) =>
        reactions.set(
            reactions().map((r) =>
                r.emoji === emoji ? { ...r, active: !r.active, count: r.count + (r.active ? -1 : 1) } : r,
            ),
        );
    return <ReactionBar reactions={reactions()} onToggle={toggle} />;
}

<ActivityItem icon="git" title="Ada pushed 3 commits to main" meta="12 minutes ago" />

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

<InboxItem
    icon="git"
    title="Grace requested your review"
    body="#421 Toast: pause on hover"
    time="5m"
    unread
    onClick={() => {}}
/>

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

<Testimonial
    quote="We replaced three component libraries with one and our bundle got smaller."
    author="Grace Hopper"
    role="Staff engineer, Navy Labs"
/>

<ReviewCard order={3} rating={4} title="Solid mug" author="Linus T.">
    Keeps coffee warm, survives the dishwasher.
</ReviewCard>

type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;

<SocialLinks
    items={[
        { icon: "git", label: "GitHub", href: "https://github.com" },
        { icon: "mail", label: "Email", href: "mailto:[email protected]" },
    ]}
/>

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";