affectUI › Screens › App screens

Settings & Billing

Settings page with tabs: workspace, members, API keys and billing with plan, usage, payment method, plan comparison and invoices.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/settings-billing.json · Import from @/components/ui/settings-billing

When to use

The settings area of a SaaS or AI product – workspace, team, billing and API access in one place
A billing page that shows plan, usage, payment method and invoices together

When not to use

A public pricing page – use a dedicated pricing layout
Checkout or entering card details – hand that off to your payment provider

Usage

import { SettingsBillingScreen } from "@/components/ui/settings-billing";

export default function Page() {
  return <SettingsBillingScreen defaultTab="Billing" workspace="Acme" user={{ name: "Alex Morgan" }} onNavigate={(label) => router.push(routes[label])} />;
}

Props

Name	Type	Default	Description
`defaultTab`	`"General" \| "Members" \| "Billing" \| "API keys"`	`"Billing"`	Tab that is open first
`onNavigate`	`(label: string) => void`		Called with the label of a sidebar item
`workspace`	`string`	`"Acme"`	Workspace name in the sidebar and the General tab
`user`	`{ name: string; avatar?: string }`	`{ name: "Alex Morgan" }`	Account at the bottom of the sidebar
`className`	`string`		Extra class on the root

Accessibility

Tabs, the monthly/yearly switch, menus and every row action are real buttons with labels
Invoices are a real table with column headers; download buttons name the invoice they download
Toasts are announced as a status; icons are decorative and hidden from screen readers

Responsive

Fills its container – give it the full viewport height in your app
Overview and plan cards stack on narrow panels; the invoice table scrolls sideways on phones
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"; colors are CSS variables on .ui-as

Requirements

React 19
@hugeicons/react
@hugeicons/core-free-icons
App Shell, Usage Meter, Segmented Control and Button (installed with it)