LogoNEXTDEVKIT Docs

Settings Tabs Configuration

Configure settings page tabs and navigation structure

NEXTDEVKIT provides a comprehensive settings tabs configuration system for organizing settings pages. The settings tabs configuration is located in src/config/settings-tabs.tsx and supports icons, internationalization, and flexible navigation.

🔧 Settings Tabs Structure

The settings tabs system provides a structured way to organize settings pages:

export function getSettingsTabsConfig(): SettingsTabsConfig {
  const t = useTranslations("settings.tabs");

  const settingsTabs: SettingsTabItem[] = [
    {
      value: "account",
      label: t("account"),
      icon: User,
      href: "/app/settings/account",
    },
    {
      value: "security",
      label: t("security"),
      icon: Lock,
      href: "/app/settings/security",
    },
    {
      value: "billing",
      label: t("billing"),
      icon: CreditCard,
      href: "/app/settings/billing",
    },
    {
      value: "notification",
      label: t("notification"),
      icon: Bell,
      href: "/app/settings/notification",
    },
  ];

  return {
    heading: t("heading"),
    description: t("description"),
    tabs: settingsTabs,
  };
}

📋 Settings Tabs Types

SettingsTabItem Interface

export interface SettingsTabItem {
  value: string;
  label: string;
  icon: LucideIcon;
  href: string;
}
PropertyTypeDescription
valuestringUnique identifier for the tab
labelstringDisplay text for the tab
iconLucideIconLucide React icon component
hrefstringNavigation link URL

SettingsTabsConfig Interface

export interface SettingsTabsConfig {
  heading: string;
  description: string;
  tabs: SettingsTabItem[];
}
PropertyTypeDescription
headingstringMain heading for the settings section
descriptionstringDescription text for the settings section
tabsSettingsTabItem[]Array of settings tab configurations