Settings Profile 2 - Left navigation with sectionsPro

A full settings page with a vertical section nav on the left and the active section’s form on the right, switching between profile, account, appearance, notifications and billing. Use it as the shell of an app’s settings area.

About Settings Profile 2

A full settings page with a vertical section nav on the left and the active section’s form on the right, switching between profile, account, appearance, notifications and billing. Use it as the shell of an app’s settings area.

Settings Profile 2 is a settings profile block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 156 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
  • sidebar
  • navigation
  • sections
  • form
  • account

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 settings-profile-02

Dependencies installed automatically: lucide-react.

Uses: button, input, label, reveal, separator, switch, utils.

Usage

import SettingsProfile02 from "@/components/blocks/settings-profile-02"

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

FAQ