Settings Page
blockA React settings page combining a profile form, theme picker, notification preferences and a danger zone for destructive actions under one header.
npx shadcn@latest add @minidev/settings-pageCode Settings and billing pages for React
Free settings page blocks for React and Tailwind CSS v4: a settings layout with sections, profile form, billing page, feature flags, API keys and team management. MIT.
9 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Settings pages are where SaaS products live after the first week. These blocks cover the layout, the profile form, billing with invoices and payment methods, feature flags and the team page, each built from smaller components you can rearrange.
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.
npx shadcn@latest add @minidev/settings-layoutCode An account profile form with a display name input, a bio textarea and a Save profile button, composed from FormField, Input and Textarea in React.
npx shadcn@latest add @minidev/profile-formCode Billing Page
blockA Tailwind workspace billing page with three plan cards and a highlighted Pro tier, a seat usage meter, and an invoice list with paid and void statuses.
npx shadcn@latest add @minidev/billing-pageCode Feature Flags
blockA feature flag settings list that pairs each flag key in monospace with a labelled switch. Drop it into admin or developer settings to toggle rollouts.
npx shadcn@latest add @minidev/feature-flagsCode React settings panel listing API keys with masked previews, created date badges and a rotate button per key, plus a header action to create a new key.
npx shadcn@latest add @minidev/api-key-listCode Team member row with an initials avatar, name, email and a role badge, truncating cleanly in narrow lists. Built for team pages and member management in React.
npx shadcn@latest add @minidev/team-member-rowCode Danger zone settings card with a red outline, a warning that the action cannot be undone and a destructive delete button. Put it last on settings pages.
npx shadcn@latest add @minidev/danger-zoneCode A notification settings list of labeled switches for email digests, product updates and security alerts. A simple React start for preference pages.
npx shadcn@latest add @minidev/notification-preferencesCode Frequently asked questions
How should a settings page be structured?
Group by what people come for: profile, workspace, members, billing, notifications, integrations, danger zone. Keep each group on its own route or anchored section and save per form, not per field.