Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/serafimcloud/telegram-profile-headerimport * 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 };