User Profile 3 - Header with Overview, Activity and Settings tabsPro
A profile page with an avatar header and animated tabs switching between an overview with about and details, a recent activity list and notification settings with switches. Use it as the main account page in a SaaS or community app.
About User Profile 3
A profile page with an avatar header and animated tabs switching between an overview with about and details, a recent activity list and notification settings with switches. Use it as the main account page in a SaaS or community app.
User Profile 3 is a user profile block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 139 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.
- tabs
- overview
- activity
- settings
- switches
- account
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add user-profile-03Dependencies installed automatically: lucide-react.
Uses: avatar, button, label, reveal, switch, tabs, utils.
Usage
import UserProfile03 from "@/components/blocks/user-profile-03"
export default function Page() {
return <UserProfile03 />
}