Staaarter

Billing Settings Sidebar Nav

A focused sidebar nav for billing settings screens, plan, usage, invoices, payment methods, billing address, team seats, and add-ons. Each item can carry a badge for things like an expiring card or a pending invoice. On small screens the list becomes a horizontally scrollable row instead of eating vertical space. Built for account portals and multi-page billing settings layouts.

By Staaarter Team
Billing
Updated May 22, 2026
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/billing-settings-sidebar-nav.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing122.tsx instead.

Usage

The file also exports billing122Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing122, billing122Demo } from "@/components/blocks/billing/billing122";

export default function Page() {
  return <Billing122 {...billing122Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Billing"Section label above the nav list, also used as the nav's aria-label.
itemsBillingNavItem[]noneNav items rendered in order. Each item picks its icon from a fixed set by name.
classNamestringnoneExtra classes for the outer nav element.

Types

type BillingNavIcon = "plan" | "usage" | "invoices" | "payment" | "address" | "team" | "addons";

interface BillingNavItem {
  label: string;
  href: string;
  icon: BillingNavIcon;
  active?: boolean;
  badge?: string;
}

Behavior notes

  • Each item picks an icon from a fixed internal lookup table keyed by the icon string, rather than accepting a Lucide icon component as a prop.
  • The active item is entirely prop-driven: pass active: true on whichever item matches the current route, typically from Next.js's usePathname.
  • Active items get a tinted background and primary text color plus aria-current="page"; the rest render in muted text.
  • On viewports below the sm breakpoint the list becomes a horizontally scrolling row (overflow-x-auto); at sm and above it's a normal vertical stack.
  • A badge string on an item renders as a small destructive badge to the right of the label, for example an unread count or an "Action needed" flag.

Frequently asked questions

More Billing Blocks

View all →

Billing Invoice List

Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.

Billing Failed Payment Alert

High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.

Billing Credit Balance

Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.

Billing Payment Methods

A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.

Billing Add Card

A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.

Billing Coupon Code

An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.