Blocks / Settings

Settings Shell

The shared frame around every /settings page: layout with heading and width constraint, a configurable tab bar (lib/settings-nav.ts), and a /settings index that redirects to the first tab.

$pnpm exec shadcn add @intelligo/settings-shell

Run it inside an app made by intelligo create. Anywhere else, name the registry and install the base first.

Loading preview…
about this block

The shared frame around every /settings page: layout with heading and width constraint, a configurable tab bar (lib/settings-nav.ts), and a /settings index that redirects to the first tab. Install alongside the settings items - without it they render unframed and plain /settings links 404.

yours to edit
  • lib/settings-nav.ts

messages/en/settings-shell.json

Everything else is used verbatim; a deployment varies through these files and translations.How seams work →

built from

tabs, page-header

npm packages it adds

lucide-react · next-intl

what shadcn add writes · 5 files
Routes
  • app/[locale]/(app)/settings/layout.tsx
  • app/[locale]/(app)/settings/page.tsx
Components
  • components/settings/settings-tabs.tsx
Actions, config and messages
  • lib/settings-nav.ts
  • messages/en/settings-shell.json

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started