Team Chat App Hero

Hero75: Team Chat App Hero

Split hero pairing marketing copy with a fully mocked team-chat interface: a channel sidebar with unread counts, a message thread with avatars and a pinned-message indicator, an online-users list, and a floating new-message notification that animates continuously.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/hero75?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/hero75?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/hero75.tsx and the shadcn/ui badge, button, and card components it depends on.

Quick start

The installed file exports hero75Demo alongside the block: the exact props behind the preview above. Spread it to get a working hero in one line.

import { Hero75, hero75Demo } from "@/components/beste/block/hero75";

export default function Page() {
  return <Hero75 {...hero75Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Hash } from "lucide-react";
import { Hero75 } from "@/components/beste/block/hero75";

export default function Page() {
  return (
    <Hero75
      badge={{ label: "Team Chat", variant: "outline" }}
      heading="Where teams come together"
      description="Real-time messaging and file sharing built for fast-moving teams."
      buttons={[{ label: "Get Started Free", href: "/signup" }]}
      channels={[
        { icon: Hash, name: "general", active: true },
        { icon: Hash, name: "engineering", unread: 5 },
      ]}
      messages={[
        { sender: { name: "Emily Zhang" }, content: "Just pushed to staging!", time: "10:32 AM", pinned: true },
        { sender: { name: "Marcus Chen" }, content: "Looks great, testing now.", time: "10:34 AM" },
      ]}
      onlineUsers={[{ name: "Emily Zhang", status: "online" }]}
      displayPosition="left"
    />
  );
}

Props

type HeroButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "secondary" | "ghost" | "link";
};

type ChannelItem = {
  icon: LucideIcon;
  name: string;
  unread?: number;
  active?: boolean;
};

type MessageItem = {
  sender: { name: string; avatar?: string };
  content: string;
  time: string;
  pinned?: boolean;
};

type OnlineUser = {
  name: string;
  avatar?: string;
  status: "online" | "away" | "busy";
};

Behavior notes

• Unlike the enum-based icon props used elsewhere in this registry, ChannelItem.icon takes a LucideIcon component reference directly (e.g. Hash), so callers import the icon from lucide-react and pass the component itself rather than a string key.
• The channels sidebar (and its nested online-users list) is hidden below sm (hidden ... sm:block); mobile viewports show only the messages pane.
• displayPosition reorders the text and mockup columns with lg:[&>*:first-child]:order-2, an arbitrary-variant selector on the grid's first child that only takes effect at lg and above.
• A "New message" notification card is hardcoded outside the messages/onlineUsers props and runs a continuous CSS float keyframe animation via inline style, positioned with absolute -right-4 sm:-right-6 outside the chat Card.
• Message and online-user avatars fall back to the first letter of the person's name in a plain <span> whenever avatar is omitted.