Settings Profile 1 - Avatar upload with name, email and bio
A profile settings card with a local avatar upload preview, display name, email and a bio field with a live character counter. Use it as the main “Public profile” page of an account settings area.
About Settings Profile 1
A profile settings card with a local avatar upload preview, display name, email and a bio field with a live character counter. Use it as the main “Public profile” page of an account settings area.
Settings Profile 1 is a free settings profile block for React, built on shadcn/ui and Tailwind CSS. It ships as 127 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.
- settings
- profile
- avatar
- upload
- form
- bio
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/settings-profile-01Dependencies installed automatically: lucide-react.
Uses: avatar, button, input, label, reveal, separator, textarea, utils.
Usage
import SettingsProfile01 from "@/components/blocks/settings-profile-01"
export default function Page() {
return <SettingsProfile01 />
}