User Profile 1 - Cover header with avatar, stats and follow buttonPro

A full-width profile header with a cover image, an overlapping avatar, name, bio, meta row, follower counts and a follow button that toggles state. Use it at the top of a social or community profile page.

About User Profile 1

A full-width profile header with a cover image, an overlapping avatar, name, bio, meta row, follower counts and a follow button that toggles state. Use it at the top of a social or community profile page.

User Profile 1 is a user profile block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 120 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • cover
  • avatar
  • follow
  • header
  • social
  • stats

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add user-profile-01

Dependencies installed automatically: lucide-react.

Uses: avatar, button, number-ticker, reveal, utils.

Usage

import UserProfile01 from "@/components/blocks/user-profile-01"

export default function Page() {
  return <UserProfile01 />
}

FAQ