Settings (Web app)
The organised home for every account-level preference, with destructive actions isolated.
Account & Settings · 7 checks · 76 resources
Before you ship
7- 01Structure — settings organised into logical categories e.g. account, notifications, security, billing
- 02Account details — the fields where users update their name, email address, and profile photo
- 03Security details — change password, two-factor authentication and other security information, gated by re-authentication
- 04Notification preferences — which notifications the user receives and through which channel, grouped by type
- 05Billing — managing payment method and plan, or a preview with a link directly to the billing area
- 06Additional preferences — language, timezone, date format, and appearance settings like dark mode
- 07Danger zone — destructive actions like account deletion, clearly separated and confirmation-gated
Resources that help you build this
76- ARIA Authoring Practices Guide · W3C's 30 canonical widget patterns with keyboard maps and working HTML examples
- Ark UI · 49 headless components with one API across React, Vue, Solid and Svelte
- Astryx · Meta's open-source React + StyleX design system, 150+ components and 42 templates
- Chakra UI · 114 accessible React components with a token-driven styling system
- Kumo · Cloudflare's production React library: 44 components on Base UI + Tailwind v4, MIT
- Coss UI · Cal.com's design system: 60 Base UI primitives shipped as a shadcn registry
- daisyUI · 68 pure-CSS Tailwind components as semantic class names, MIT, with 35 built-in themes
- GPUI Component · 60+ Rust desktop UI components for GPUI, with a 200K-line code editor and charts
- Headless UI · 16 unstyled, fully accessible React and Vue primitives from Tailwind Labs
- HeroUI (formerly NextUI) · 71 React components on React Aria + Tailwind v4, with an MCP server
- HeroUI Pro · Paid React + React Native components, 6 templates, MCP server and agent skills
- HTMLrev Free Shadcn Templates · 120 free shadcn/ui templates and starters, indexed on one page
- Intent UI · 80+ React Aria components with real ARIA semantics, MIT and copy-paste
- Kibo UI · shadcn registry of 41 complex components: Gantt, Kanban, editor, sandbox, cropper
- Lucide Animated · 467 MIT Lucide icons that animate on hover, with a markdown page for every icon and a skill file written for an agent
- Mantine · 150+ styled React components, 70+ hooks, CSS modules, no runtime CSS-in-JS
- Mobbin · Searchable library of real mobile and web app screens, organized into user flows
- MUI · React component suite: Material UI, MUI X data grid, charts and date pickers
- Radix UI · Unstyled accessible React primitives, plus Themes, Colors and Icons
- React Aria · Adobe's unstyled React primitives with ARIA, keyboard, i18n and touch behavior built in
- React Bits Pro · 703 paid React items in one license-gated shadcn registry: 134 animated components, 538 blocks, 11 templates and an Agent Kit
- Refero · Searchable library of real product screens, user flows and design systems, with an MCP server
- Refero Styles · DESIGN.md files reverse-engineered from real product sites, for agents
- ReUI · 1,052 free shadcn components, 502 pro blocks, 10 templates, hosted MCP
- shadcn/ui · 64 copy-in React components on Radix + Tailwind, installed by CLI
- shadcn/ui (GitHub) · Source monorepo for shadcn/ui: components, CLI, registry schema, skills
- tweakcn · Visual shadcn/ui theme editor that exports 42 presets as a shadcn registry
- Untitled UI · Figma UI kit plus React Aria + Tailwind v4 component library with an MCP server
- UX Patterns for Devs · 92 UX patterns with accessibility rules, an MCP server and llms.txt
- 8bitcn/ui · Retro pixel-art restyle of shadcn/ui: 57 components and 44 blocks
- AlignUI · React + Tailwind design system with a code-synced Figma library
- Ant Design · 73-component React library and design language for enterprise back-office apps
- Appica UI · 70 React components on Base UI and Tailwind v4, with an llms.txt and markdown docs
- Atlassian Design System · Atlaskit: 59 Apache-2.0 React components behind Jira, Confluence and Bitbucket
- Base UI · 37 unstyled React components from the Radix, Floating UI and MUI teams
- beUI · 76 React motion components and AI agent UI, installed through a shadcn registry
- beUI · 106-item Motion + Tailwind registry for React, shadcn-compatible
- Carbon Design System · IBM's open-source design system: 44 documented components across five frameworks
- coss ui · Cal.com's Base UI + Tailwind v4 registry: 56 primitives and 500 particle variants
- Cult UI · 82 free design-engineer components plus 10 paid full-stack AI starters
- Flowbite · 56+ MIT Tailwind components with vanilla-JS behaviour, plus a paid 450+ block library
- Fluent 2 · Microsoft's design system: 47 web components plus Windows, iOS and Android kits
- Fluid Functionalism · shadcn registry of 23 components where motion carries state, not decoration
- HextaUI · 103 shadcn registry items: primitives plus AI, auth, billing, settings and team blocks
- hue · Agent skill that turns any brand URL or screenshot into a design system
- Humane by Design · 7 digital well-being principles broken into 29 concrete UI best practices
- HyperUI · 537 free MIT Tailwind blocks across application, marketing and neobrutalism sets
- Opensource UI · 154 free MIT React and Next.js components across 26 categories, copy-pasted from pages that serve the full TypeScript source in the HTML
- shadcn design · Paid Figma kit for shadcn/ui, plus coded Pro Blocks and a Figma-to-code plugin
- Shadcn Form Builder · Drag fields into a form, export shadcn + Zod code for four form libraries
- Shadcn Space · 401+ shadcn blocks, 393+ component variants and 10 site templates, freemium
- shadcn Studio · 800+ shadcn blocks, 16 templates, themes, MCP server and Figma-to-code
- shadcn-templ · shadcn/ui ported to Go and templ: 52 components, 27 blocks, its own CLI
- Shadcnblocks · 1,837 paid shadcn blocks and 19 Next.js and Astro templates, lifetime license
- shadcncraft · Paid shadcn/ui registry plus a 1:1 Figma kit, 8 styles across Radix and Base UI
- Shark UI · 86 shadcn-style components built on Ark UI, installed through the shadcn CLI
- Shopify Polaris · Shopify's admin design system, now shipped as framework-agnostic web components
- Subframe · Visual editor that emits React + Tailwind + Radix code, with an MCP server
- Tailwind Plus · 500+ paid Tailwind UI blocks, 13 Next.js templates and the Catalyst React kit
- Tremor · 40 copy-paste React chart and dashboard components, plus 300+ free blocks
- Watermelon UI Dashboards · Nine full React admin dashboards installed through the shadcn CLI from a public registry
- Animate UI · 73 motion-first React components shipped as a shadcn registry
- BoardUI · React 19 + Tailwind v4 design system for dashboards and agent UIs — 57 components, 47 of them free through a shadcn-schema registry
- FigComponents · 1,619 copy-paste Figma components, 1,002 of them free, CC BY 4.0
- Nicely Done · Searchable index of ~199k SaaS screens, 12.5k flows and 29k UI components
- Park UI · 59 styled Ark UI components delivered by CLI, themed with Panda CSS
- Preline UI · Free Tailwind library with 640+ examples, 204 blocks and documented plugin wiring
- Primer · GitHub's design system: 62 React components, Octicons and design tokens
- shadcn-glass-ui · Glassmorphism component set for React that installs through the shadcn CLI
- Soft Club UI · 118 Radix-based React components in a late-90s dark-glass aesthetic
- TailwindAdmin · shadcn/ui admin dashboard template in React, Next.js, Vue, Angular and TanStack
- Tark UI · One-page showcase of 41 Ark UI components with 333 Tailwind-styled examples
- The Gridcn · Tron-styled shadcn registry: 140 items, six themes, HUD and 3D grid components
- Untitled UI on GitHub · The MIT source repos behind Untitled UI: components, icons, and 3 starter kits
- UX Pilot · AI generates wireframes and hi-fi UI screens, then exports them into Figma
- Pando (Pluralsight Design System) · Pluralsight's design system documented in zeroheight; public code frozen at v0.7.1