Glass ProgressGlassmorphism progress bar panel with glowing gradient fills, spring-animated counters, staggered reveal, and replay button.
.png?updatedAt=1775226802133)
Add to your project
One command adds this component to your project.
Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.
npx shadcn@latest add @aicanvas/glass-progressFor dark mode, add the dark class to your <html> element:
<html class="dark">Install with AI Canvas MCP
With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.
About Glass Progress
Glass Progress is a panel of progress bars with glassmorphism surfaces, glowing gradient fills, spring-animated counters that count up as the bars advance, and a staggered reveal so multiple metrics arrive in a satisfying cascade. A replay button restarts the animation, which makes it ideal for demos and showcases. Use it for dashboard metrics, onboarding completion meters, settings completeness indicators, or any UI that needs to show multiple bounded values at once with a sense of arrival.
Built with
Frequently asked questions
- Is Glass Progress free to use?
- Yes. Glass Progress is part of the free AI Canvas library and is open source under the MIT license, so you can use it in personal and commercial projects.
- How do I install Glass Progress?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-progress.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Progress for you. You can also copy the source straight from the Code tab, no account needed. It works in any React project with Tailwind CSS.
- What is Glass Progress built with?
- Glass Progress is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Progress?
- Common uses include Dashboard, Onboarding, and Settings. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Progress with AI?
- Yes. Glass Progress ships with expert prompts for Claude Code, Lovable, and V0, so you can recreate and customize it in your AI builder of choice.
AI Canvas