User Profile 12 - Account overview with plan and usagePro
An account overview with the owner's identity, current plan card with price, renewal date and payment method, and usage meters for seats, storage and API calls that fill on scroll. Use it as the landing page of an account or billing settings area.
About User Profile 12
An account overview with the owner's identity, current plan card with price, renewal date and payment method, and usage meters for seats, storage and API calls that fill on scroll. Use it as the landing page of an account or billing settings area.
User Profile 12 is a user profile block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 133 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.
- account
- plan
- usage
- billing
- meters
- subscription
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-12Dependencies installed automatically: lucide-react, motion.
Uses: avatar, badge, button, reveal, use-reduced-motion, utils.
Usage
import UserProfile12 from "@/components/blocks/user-profile-12"
export default function Page() {
return <UserProfile12 />
}