Glass TagsSelectable pill-shaped tags with glass surfaces, unique color accents, and spring-animated check marks.
.png?updatedAt=1775226815629)
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-tagsFor 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 Tags
Glass Tags is a row of selectable pill-shaped tags with frosted glass surfaces, unique color accents per tag, and spring-animated checkmarks that scale in when a tag is activated. Motion drives the check animation and the tag-state transition; the glass effect uses backdrop-filter so each pill stays consistent with the background. It is a good fit for filter rows, onboarding interest-pickers, settings selectors, and any UI where users need to select multiple items from a small named set.
Built with
Frequently asked questions
- Is Glass Tags free to use?
- Yes. Glass Tags 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 Tags?
- One command: npx shadcn@latest add https://aicanvas.me/r/glass-tags.json, free with a free AI Canvas account. Or connect the AI Canvas MCP server and ask your AI editor to install Glass Tags 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 Tags built with?
- Glass Tags is built with React and TypeScript, using Motion and Tailwind CSS.
- Where would I use Glass Tags?
- Common uses include Forms, Settings, and Onboarding. Like every AI Canvas component, it is self-contained and drops into any React project.
- Can I remix Glass Tags with AI?
- Yes. Glass Tags 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