Building a whole Tailwind app, not just this component?
You just browsed 18 Tailwind settings pages. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
A complete SaaS account settings layout in Tailwind v4: a sticky section nav that tracks the card you are reading, Profile, Email & login, Preferences and Privacy cards, whole-row switches built from real checkboxes, user-invalid: validation and a floating save bar that springs up on the first edit. Below lg the sidebar becomes a swipeable tab strip.
A zero-JavaScript billing page: a dark current-plan card with seat maths and a billing-period bar, a Monthly / Annual segmented toggle whose thumb slides under the active option, three selectable plan cards whose prices swap with the cycle, and a change summary that rewrites itself for every plan × cycle combination.
A usage dashboard where limits read at a glance: a conic-gradient ring for API requests that animates in through a registered @property, a 14-day request chart with an end-of-cycle forecast, and five linear quota meters that turn amber at 80% and red past the limit — with a page-level overage banner that appears only when a meter is over.
A billing-history table with zero-JS status filter chips, row selection that tints the row and raises a bulk-action bar, a native indeterminate select-all, status pills for Paid, Open, Failed and Refunded, and per-row download buttons that cycle idle → generating → done before handing over a real file.
A premium payment-methods panel: saved cards and a bank account as a selectable radio list, and an add-card form with a holographic 3D card preview that mirrors every keystroke, recolours itself for Visa, Mastercard or Amex, and flips to its back the moment the CVC field takes focus — all four transform pieces are Tailwind v4 3D utilities.
A team page that scales from 5 to 500 people: a seat meter, instant search across names and emails, a segmented role filter with a live result count, colour-coded role selects that recolour the moment you change them, a locked Owner, 2FA status per person, a pending-invite row with Resend, and removal that collapses the row smoothly with a five-second Undo toast.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A fast, forgiving invite flow: paste a whole list or type addresses one by one and they become chips — invalid and duplicate ones turn red and are skipped — then pick a role from descriptive cards, see the seat cost before you commit, and send with a button that counts for you. A side panel adds a copyable invite link and domain auto-join.
A clear RBAC matrix: permissions grouped by area down a sticky first column, roles across the top with live 'n / 12' counts, custom checkbox cells built on real inputs, a locked Owner column, crosshair row and column highlighting, destructive permissions flagged in red, and change tracking that marks every edited cell and counts unsaved changes in a save bar.
A developer-grade API keys page in a dark theme: masked keys with copy, Live / Test badges, scopes, last-used and 24-hour request sparklines, a stale-key warning, a two-step revoke that arms then confirms, and a native <dialog> that creates a scoped key with crypto.getRandomValues and reveals the secret exactly once.
A guided 2FA enrolment wizard: choose an authenticator app or SMS, scan a QR code drawn on a canvas (with a copyable setup key fallback) or enter a phone number, type a 6-digit code into an OTP input that auto-advances, spreads pasted codes and shakes on a wrong one, then save ten recovery codes before the Finish button unlocks.
A security-first sessions page: the current device pinned at the top with a live animate-ping pulse, every other session listed with device, app, location, IP and last activity, an unrecognised sign-in flagged in amber with a secure-account shortcut, per-session sign out that collapses the row, a staggered 'sign out everywhere else', and an empty state that appears on its own.
A notification matrix that respects attention: event types grouped down the side, Email, Push, In-app and Slack across the top, mini-switch cells on real checkboxes, column master toggles with true indeterminate state, a locked security row, a Pause-all switch that dims and disables the matrix, digest frequency, quiet hours that reveal their time pickers, and quiet autosave.
A zero-JavaScript integrations directory: category chips that filter the grid, a 'Connected' chip that shows only what you've linked, connect buttons built on real checkboxes that flip to 'Connected' and reveal what each app can access, and a sticky footer whose live count comes from a CSS counter — not a script.
A live appearance panel with zero JavaScript: pick Light, Dark or System from mini window previews and the whole page re-themes through light-dark(); choose an accent, density, text size and high-contrast borders, and a live preview of the app updates beside the controls as you click.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A GDPR-ready 'download your data' page: selectable data cards with size estimates, Select all, JSON / CSV / ZIP format, a date range, a live size and time estimate, then a three-stage Queued → Preparing → Ready tracker with a real progress bar and a download that produces an actual file — plus a history of past exports and a plain-language rights panel.
A zero-JavaScript audit trail grouped by day: who did what, to what, from where — with category chips and a 'High-risk only' switch that filter in pure CSS, empty day headings that hide themselves, and every event expanding into a red/green JSON diff of exactly what changed.
A complete webhook manager: an endpoint list with health dots, success rates and 24-hour delivery sparklines, a detail pane with the URL, an enable switch that marks the endpoint Paused, toggleable event chips, a signing secret you can reveal, copy and roll, a 'Send test event' that lands in the delivery log live, and expandable deliveries showing request and response.
A responsible danger zone: transfer ownership, archive (reversible) and delete, each with its consequence spelled out. Delete opens a native dialog that lists exactly what will be lost, offers an export first, asks for a reason, requires typing the workspace name, and then a press-and-hold button — ending in a 30-day soft delete you can undo.
FAQ
Frequently asked questions
How does the sticky section nav on the account settings page highlight the card I'm currently reading?
The nav on Demo 01 is a column with position: sticky (Tailwind sticky top-6) so it stays pinned while the panel column scrolls. Each link points at a section id, and the active state is driven by an IntersectionObserver watching every section: as a section crosses the viewport threshold, its matching nav link gets an active class toggled on and the others cleared. Clicking a link is just an in-page anchor, so native smooth scrolling and keyboard focus still work. The common bug is the highlight flickering between two sections at once — fix it by giving the observer a rootMargin that biases toward the top (for example a negative bottom margin) so only one section is considered current at a time, and by only ever setting the active class on a single link per callback rather than toggling each independently.
How does the Monthly / Annual billing toggle switch prices without any JavaScript?
Demo 02 drives the whole toggle with a hidden radio or checkbox and the :has() selector — there is no script. The period switch is an <input> whose <label> pills read Monthly and Annual; when the annual input is checked, a rule like .card:has(input:checked) .price-annual reveals the discounted figure and hides the monthly one with display swaps. The seat maths and billing-period bar are plain markup, not computed. The trap is browser support and specificity: :has() needs a reasonably current engine, and because both price spans exist in the DOM you must actually hide the inactive one (not just lower its opacity) or screen readers announce both numbers. Keep each price in its own element and toggle visibility on the :checked state rather than rewriting text content, which plain CSS cannot do.
How is the conic-gradient quota ring on the usage page animated and kept accessible?
Demo 03 draws the API-requests ring with a conic-gradient background whose sweep angle is set from a CSS custom property, for example --value: 72%, interpolated via an @property registration so the angle can transition. On load the property animates from 0 to the target, giving the fill-in sweep. Visually it reads instantly, but a gradient is invisible to assistive tech, so the real number must live in text next to the ring and the control should expose role and aria-valuenow if it represents a live meter — or simply be a labelled figure. Two things bite here: @property is required for the angle to animate at all (a bare custom property jumps), and you must gate the animation behind prefers-reduced-motion: reduce so the ring appears at its final value for users who opt out rather than sweeping on every scroll into view.
How do the status filter chips and bulk-action bar in the invoice table work with zero JavaScript?
Demo 04 is a pure-CSS filter and selection pattern. The status chips (Paid, Open, Overdue) are radio <input> elements; each row carries a data attribute or status class, and rules like form:has(#paid:checked) tr:not(.is-paid) hide the non-matching rows. Row selection uses a per-row checkbox: a checked row gets tinted via tr:has(:checked), and the bulk-action bar is revealed with table:has(tbody :checked) .bulk-bar. The classic bug is the 'select all' header box — plain CSS can reflect state but cannot set the child boxes, so a header checkbox that ticks every row genuinely needs a few lines of JavaScript. If you keep it CSS-only, drop the master checkbox or make it a visual filter, and make sure hidden rows use display: none so keyboard tabbing skips them instead of landing on invisible controls.
What is the accessible way to build the roles-and-permissions matrix with its sticky first column?
Demo 08 lays the RBAC grid out as a real <table> with <th> headers for both the role columns across the top and the permission-area labels down the side; the first column is pinned with position: sticky and left: 0. Each cell's toggle is a checkbox with a <label> so it is reachable by Tab and operable with Space. The accessibility work that is easy to skip: associate every checkbox with both its row and column headers using scope on the header cells (and headers/id on dense grids) so a screen reader announces 'Billing, Admin, enabled' rather than a bare checkbox. Keep a visible :focus-visible ring, and don't rely on colour alone for the enabled state — pair the tint with a checkmark glyph. Demo 12's notification matrix follows the same rule for its Email / Push / In-app / Slack columns.
The invite-teammates form turns pasted addresses into chips — how does that work and what breaks?
Demo 07 is one of the few demos that genuinely needs JavaScript. An <input> listens for input, keydown (Enter and comma), and paste; on paste it splits the clipboard text on commas, semicolons and whitespace, validates each token against an email pattern, and renders valid ones as removable chips while flagging invalid ones. Each chip has its own remove <button> with an aria-label. The bugs to watch: handle the paste event and read from the event rather than waiting for the field to settle, or a bulk paste only becomes one chip; de-duplicate case-insensitively; and keep keyboard parity so Backspace on an empty field deletes the last chip and the invalid state is announced, not just coloured red. Don't over-reach — a strict regex rejects valid-but-unusual addresses, so validate shape, not deliverability.
How does the appearance page preview Light / Dark / System and apply the theme without JavaScript?
Demo 14 selects the theme with radio <input> elements rendered as mini window previews, and recolours the whole panel through :has(): .panel:has(#dark:checked) swaps the custom-property palette, and the System option falls back to @media (prefers-color-scheme: dark) scoped so it only applies when System is the checked radio. There is no script and nothing persists. Two caveats before you lift it into a product: a real app needs to remember the choice, which means writing the selection to storage and reapplying it with a line of JavaScript — pure CSS forgets on reload. And the System branch must use the mirror pattern, meaning the checked-and-dark-OS and checked-and-light-OS cases each restore the opposite palette, or the toggle appears dead for visitors whose OS already matches the demo default. Restore every palette token in the flip, not just the background.
When should I not use these settings pages as-is, and how is the delete-account danger zone meant to behave?
Treat these as production-ready layouts, not finished features. Anything that mutates real data — saving a payment method (Demo 05), deleting an account (Demo 18), rotating an API key (Demo 09) — needs a server, authentication, CSRF protection and real validation behind it; the demos render the UI and the consequences, not the backend. The CSS-only filters and toggles are perfect for static previews but need JavaScript plus persistence once state must survive a reload or sync across devices. Demo 18's danger zone is the model for destructive actions: it separates transfer, archive (reversible) and delete, spells out the consequence of each in plain text, and gates the irreversible one behind a confirmation step such as typing the workspace name. Don't collapse that into a single red <button> — the friction and the explicit copy are the safety feature, and the confirm control should be a real focusable element, not a styled <div>.
