Settings Layout

Settings page layout with a 200px side nav column and a content area, plus a SettingsSection for titled groups divided by hairlines. Tailwind grid based.

src/registry/ui/settings-layout.tsx/r/settings-layout.json

Installation#

bash

npx shadcn@latest add @minidev/settings-layout

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/settings-layout.json

Usage#

tsx

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

export function Example() {
  return (
    <SettingsLayout className="w-full max-w-3xl" nav={<>
      <Button variant="ghost" className="w-full justify-start">Profile</Button>
      <Button variant="secondary" className="w-full justify-start">API</Button>
      <Button variant="ghost" className="w-full justify-start">Billing</Button>
    </>}>
      <SettingsSection title="Profile" description="Public details for your workspace.">
        <FormField id="name" label="Name" className="max-w-sm"><Input id="name" defaultValue="MiniDev" /></FormField>
      </SettingsSection>
      <SettingsSection title="API keys">
        <ApiKeyList keys={[{ id: "1", name: "Production", preview: "md_live_••••1234" }]} />
      </SettingsSection>
      <SettingsSection title="Danger zone"><DangerZone /></SettingsSection>
    </SettingsLayout>
  )
}