7+ Progress Bars, Reading Rails, Command Palettes, and Gamification
Scroll progress bars, reading progress rails, sticky table of contents, onboarding step bars, XP bars, circular percentage rings, leaderboards, and command palettes for apps and article layouts. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Scroll Progress Bar (Top of Page)
Scroll progress bar for pages, a thin top-of-page line that fills as the reader scrolls, for long-form articles, blog posts, and documentation pages. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Reading Progress Rail (Sidebar with Read Time)
Reading progress rail with percent-complete and estimated read-time labels, for blog posts, documentation, and long-form editorial articles. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Sticky Table of Contents Sidebar
Sticky table of contents sidebar for long-form article pages, highlights the visible section as the reader scrolls, for documentation sites, knowledge bases, and blog posts. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Onboarding Progress Bar (Multi-Step Numbered)
Multi-step onboarding progress bar with numbered circles connected by a filling line, for SaaS signup flows, product setup wizards, and ecommerce checkout funnels. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Ship 10 more prompts to reach Level 4.
XP Progress Bar (Gamification Level Card)
XP progress bar gamification card showing level, XP, and progress to the next level, for gamified learning apps, fitness apps, and community platforms. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Circular Progress Ring (SVG Percentage)
Circular progress ring showing a percentage inside an SVG ring, for SaaS dashboards, AI generation UIs, credit meters, and stat cards. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
Leaderboard Row (Ranking with Change Indicator)
Leaderboard row with rank, avatar, points, and change indicator, for community leaderboards, sales gamification dashboards, and competitive-play interfaces. Build with Claude Code, Cursor, Lovable, Codex, Replit, or Google Stitch. React and Tailwind source included.
What can I build with progress bars, reading rails, and gamification?
Build:
- + scroll progress bars
- + reading progress rails
- + sticky table of contents
- + onboarding step bars
- + XP progress cards
- + circular percentage rings
- + leaderboards
- + command palettes
- + multi-step signup wizards
All components are built with React 18 and Tailwind CSS and can be customized using Claude Code, Cursor, Codex, Lovable, Replit, and Google Stitch.
About progress bars, reading rails, and gamification
Scroll progress bars, reading progress rails, sticky table of contents, onboarding step bars, XP progress cards, and leaderboards. Every component in this category ships with a live preview, copy-paste React and Tailwind source code, and the prompt that regenerates it in Claude Code, Cursor, Codex, Lovable, Replit, or Google Stitch.
Every component includes
- + A live preview of the exact section, screen, or animation
- + The prompt written for each of the 6 AI coding tools
- + Copy-paste React and Tailwind source code
- + Commercial usage rights
- + Implementation notes
- + Supported frameworks
Used inside
- + Landing pages
- + AI product websites
- + SaaS dashboards
- + AI chat apps
- + Startup websites
- + Portfolios
- + Marketing pages
- + Waitlist pages
React 18 and Tailwind CSS v3 assumed. Additional dependencies (framer-motion, gradflow) are listed on each component page when required.
Related prompts for progress bars, reading rails, and gamification
Frequently asked questions
Can I use this component copyright-free in my website or app?+
Yes. Every component, code file, and included asset on this page is free for commercial use with no attribution required. There is no license fee, no royalty, and no copyright restriction. Copy it, adapt it, ship it in client work, SaaS products, open-source projects, or internal tools — it is yours from the moment you copy the code.
How do I use this component in my project?+
Copy the source file from the "Copy code" button and save it into your components folder. Add any listed dependencies (React 18 or later and Tailwind CSS v3 or later are always required, plus framer-motion or gradflow if the component lists them). Import and render the component wherever you want it. Every prop is optional and defaulted.
Does this component work with TypeScript?+
Yes. Every component is written in TypeScript with fully typed props and exported interfaces. Paste it into a TypeScript project and it works without modification. If you need a plain JavaScript version, paste the file into Claude Code or Cursor and ask it to strip the types.
Can I customise this component for my brand?+
Yes. Every component uses Tailwind utility classes throughout and accepts content props (headline, subtitle, image URL, CTA, and so on). Change the brand color in one place and every CTA updates. Swap the font in next/font and every heading updates. For structural changes, paste the prompt into Claude Code, Cursor, Lovable, Replit, or Codex and describe your brand tokens, spacing, or motion preferences.
Will this component slow down my page?+
No meaningful impact. Components that animate use CSS transforms, which are GPU-composited and do not trigger layout. Components that scroll-drive use a lightweight IntersectionObserver or useScroll hook — no polling or continuous repaints. The Tailwind output is tree-shaken at build time so no unused styles ship. Total JavaScript added per component is under 2 KB gzipped in most cases.
Can I use this with shadcn/ui or other component libraries?+
Yes. These components are standalone: no shared context, no global CSS, no conflicting reset. They use Tailwind utility classes and standard React hooks, which are compatible with shadcn/ui, Radix UI, MUI, and any other component library. Import them alongside your existing components without conflicts.
Are the components free for commercial use?+
Yes. Everything on this page is free to copy, adapt, and ship in commercial projects. No attribution required. If you post a public showcase we always appreciate a link back.
Which AI coding tool works best for these components?+
All five prompts produce the same design. Claude Code and Codex are best when you want the component slotted into a project with existing conventions. Cursor is ideal for editing inside your IDE with the file open. Lovable and Replit spin up a fresh preview fastest, useful for a quick play.
Do these work with Next.js, Vite, and Remix?+
Yes. The source files are plain React 18 client components. They run on any framework that supports React 18 and Tailwind CSS v3. If a component needs the "use client" directive (all of them do here, since they use hooks), keep the directive at the top of the file when you paste.