SettingsLayout — Bounce Kit

Install

npx bouncekit@latest add settingslayout

Import

import { SettingsLayout } from "@/components/settings/settings-layout"

import { SettingsLayout } from "@/components/settings/settings-layout"

<SettingsLayout
  nav={[
    { title: "Profile", href: "/settings" },
    { title: "Billing", href: "/settings/billing" },
    { title: "API Keys", href: "/settings/api-keys" },
  ]}
>
  {children}
</SettingsLayout>

API Reference

Prop	Type	Required	Description
`title`	`string`	—	Page heading. Default: "Settings".
`description`	`string`	—	Supporting text below the heading.
`nav`	`SettingsNavItem[]`	yes	Sidebar navigation items.
`children`	`ReactNode`	yes	Active settings page content.

Source

src/components/settings/settings-layout.tsx