Telegram Profile Header

Buttons 318

About

An animated profile header component inspired by Telegram's mobile interface. It was originally made as a non-reusable component by @alisamadi__ This reusable component features: - Expandable avatar with smooth animations - Responsive layout transitions - Customizable action button - Animated text color changes - Gradient overlay in expanded state Perfect for social media profiles, user settings pages, or any interface requiring an elegant profile header with image preview functionality.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Telegram Profile Header to your project and fits it to your theme.

Code

How Telegram Profile Header is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import * as React from "react";
import { TelegramHeader } from "@/components/ui/telegram-profile-header";

function DemoContent() {
  return (
    <div className="mt-8 px-4 space-y-4">
      <div className="h-8 w-full rounded-lg bg-white" />
      <div className="h-8 w-full rounded-lg bg-white" />
      <div className="overflow-hidden rounded-lg bg-white">
        {Array.from({ length: 5 }).map((_, index) => (
          <React.Fragment key={index}>
            <div className="h-8 w-full" />
            <div className="my-0 ml-12 h-[1px] bg-[#F1F1F6]" />
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

function DefaultDemo() {
  return (
    <div className="mx-auto w-full max-w-md h-[600px] overflow-hidden rounded-[30px] bg-[#F1F1F6]">
      <div className="sticky top-0 bg-[#F1F1F6] relative z-10">
        <TelegramHeader
          avatar="https://www.alisamadii.com/my-image.png"
          name="John Doe"
          phone="+1 234 567 8900"
          username="@johndoe"
          actionButton={{
            text: "Edit",
            onClick: () => console.log("Edit clicked"),
            backgroundColor: "#ff7000",
          }}
        />
        <DemoContent />
      </div>
    </div>
  );
}

export { DefaultDemo };