Configuration · Page template

Settings

Sectioned form with sidebar nav — the canonical settings page.

app.example.com/settings/profile
What it is

When to reach for it.

The canonical settings surface. A left-rail of section anchors (Profile, Notifications, Security, Billing, etc.) scrolls a right-side form into view. Each section is a card with its own Save/Cancel — so a user editing Notifications doesn't have to also commit to Security changes.

  • Building the user-settings or workspace-settings page for a SaaS app.
  • Any configuration screen with more than three distinct concerns.
  • Replacing a tab-based settings page that's outgrown its tab bar.
Structure

What's in the template.

Each section pre-wired with the right CleenUI primitives. Swap, remove, or extend any of them — the template is a starting point, not a constraint.

  1. 1

    Left rail

    Section anchors; scroll-spy highlights the active section.

    VerticalNav
  2. 2

    Section card(s)

    One card per concern; each has its own Save/Cancel row.

    CardInputToggleButton
  3. 3

    Dangerous zone

    Bottom card for destructive actions (delete account, etc.).

    CardButton
Components used

Everything this template touches.

All of these are in the catalog — the Builder skill imports them automatically. Each chip links to that component's page.

VerticalNavCardInputToggleButtonHeading
What you customize

Substitutions.

When the Builder skill scaffolds this template for you, these are the fields it asks about — or infers from your prompt.

FieldExampleWhere it appears
sectionListProfile · Notifications · Security · BillingLeft-rail sections and section card headings
settingsScopeWorkspacePage title
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Ask your AI agent to scaffold this template in your project — the Builder skill knows the Settings layout and the components it uses.

Get started

Get started with CleenUI.

Two paths to your first component. Pick the one that fits how your team builds.

Path A · Recommended

With AI agent skills

One prompt to your AI tool. The Setup skill handles dependencies, design tokens, build config, and component registration — all without leaving your editor.

Path B · Manual

With npm

The classic flow. Install the package, import the styles, drop in your first component. No agents required — same end result.