Prodular UI

Settings

Pro

Workspace settings with a secondary section nav: a general form, members with an invite dialog, billing and usage, notifications, API keys, security and a danger zone, separated by dividers.

Open full screen
Settings screen from Prodular UI

Install

The screen lands in app/settings/ with every component it uses. Change it like any other code in your app. It is part of Prodular UI Pro, so run npx prodular-ui login first. See pricing.

npx prodular-ui add settings

States

The screen ships with 5 states. Pick one with the tabs above the preview, with ?state= in the URL, or with the state prop from your app.

  • Default
  • Loading
  • Save failed
  • Read only
  • Seat limit

Files

  • app/settings/page.tsx
  • app/settings/states.tsx
  • app/settings/members.tsx
  • app/settings/app-shell.tsx