News App Topic Picker Onboarding

News app topic picker onboarding screen: follow topics as chips with follower counts, search them and continue once three interests are selected.

Also known as: choose your interests screen, follow topics onboarding, interest picker chips, news app onboarding ui, select categories screen mobile

Tailwind CSS Onboarding Screens Responsive #app #chips #mobile #onboarding #search

News App Topic Picker Onboarding live demo

Open in new tab

Tailwind CSS code (HTML, CSS, JS)

Beautify

A news app topic picker onboarding screen built with Tailwind CSS: readers follow topics as chips with follower counts, search the list and continue once three interests are picked. It is an HTML mobile template for mobile news sites and PWAs and can be packaged as an app with Capacitor. Use it as the "choose your interests" step of a news, magazine or podcast app.

How it works

The root .ntp-app is a phone-width column with a sticky top app bar (back, step progress, Skip), the picker in [data-ntp-picker] and a sticky footer in [data-ntp-foot]. Topics are grouped in .ntp-group sections. Every .ntp-chip is a real <button> with aria-pressed; style.css swaps the plus icon for a check and fills the chip when it is pressed.

script.js counts the pressed chips on every click and updates [data-ntp-count] and the hint ("Pick 1 more to continue"). The Continue button uses aria-disabled instead of disabled, so it stays focusable; while too few topics are chosen a click only re-announces the hint. Typing in [data-ntp-search] filters chips by their .ntp-chip-label, hides empty groups and shows [data-ntp-empty] with a Clear search button when nothing matches. Escape clears the field.

When enough topics are chosen, Continue shows the [data-ntp-done] state. The script builds one .ntp-alert row per topic with an alert .ntp-switch (role="switch"). Edit topics and the back button return to the picker with the selection kept.

Customization

data-ntp-min on .ntp-app: the number of topics required before Continue unlocks (default 3).
--ntp-accent in style.css: red used for chip icons, chip focus outlines and the alert switches; match it to the bg-red-600 classes on .ntp-continue.
--ntp-chip-on in style.css: background of a followed chip (near black by default).
Add a topic by copying an .ntp-chip button; set aria-pressed="true" to preselect it.
Add a new .ntp-group section with its own h2; search and empty-group hiding pick it up automatically.
font-family on .ntp-app: replace Source Sans 3 and update the Google Fonts URL.

Use cases

News and magazine apps: personalise the home feed on first launch.
Podcast and newsletter apps: choose categories before recommendations load.
Community and forum PWAs: follow channels or tags during sign-up.
Learning apps: pick subjects of interest before the first lesson.

Accessibility

Chips are toggle buttons with aria-pressed, at least 44 px tall, and the follower count has a visually hidden "followers" suffix so it is read in context. The search field has a label, and the number of matching topics is announced through a polite live region. The selection hint is also a live region. Focus moves to the success heading on Continue and back to the Continue button on Edit topics. All controls show a visible focus outline, and colour transitions are removed under prefers-reduced-motion.

Usage notes

Send the selected labels to your API in the Continue click handler in script.js before showing the done state.

News App Topic Picker Onboarding at a glance

Framework: Tailwind CSS
Code: HTML, CSS, JavaScript
JavaScript: Vanilla JavaScript, no jQuery
Dependencies: Tailwind CSS, fonts.googleapis.com, Bootstrap Icons
Layout: Mobile-first app screen, centred on wider screens
Category: Onboarding Screens
License: Free for personal and commercial use

Questions about this template

Can I use the News App Topic Picker Onboarding code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

Load Tailwind CSS and fonts.googleapis.com and Bootstrap Icons from a CDN (the links are under Requirements). Paste the HTML where the component should appear, add the CSS to your stylesheet and load the JavaScript before the closing </body> tag. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. The script is plain vanilla JavaScript, so it works without jQuery, React or Vue. You can still use the markup inside those frameworks.

Can I turn this screen into an iOS or Android app?

Yes. It is plain HTML, CSS and JavaScript, so it works in a mobile website or progressive web app as it is. To ship it as a store app, put it in the web folder of a Capacitor or Cordova project and build it for iOS and Android; replace the sample data with calls to your own API.

How does it look on a desktop screen?

The screen is designed for phones. On wider screens it stays at phone width in the middle of the page, so it still looks like an app. The live demo opens at mobile width; use the Tablet and Desktop buttons to check other sizes.

Requirements

Add these to your page (already included in the download):

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.