DEDUPED Hot AI repos, turned into use cases Get the Monday 5

How to add a Keyline icon to a shadcn/ui project with Keyline Icons

Add one icon as self-contained source through the shadcn CLI, without installing the whole package.

Short answer: Add the registry entry "@keyline": "https://keylineicons.com/r/{name}.json" under registries in components.json; then run npx shadcn add @keyline/bell to add the stroke bell icon; run npx shadcn add @keyline/fill/bell or npx shadcn add @keyline/sharp/fill/bell to add a different style or corner treatment. All steps.

Who it is forA developer on a shadcn/ui project who wants a few icons as files they can edit.

The problemInstalling a whole icon package to use two or three icons adds a dependency the team may not want.

The outcomeEach icon arrives as a standalone component file that can be renamed or edited inside the project.

What you need first

  • Node.js with npm for the package installs
  • A React, React Native or shadcn/ui project to add the icons to
  • A Figma account if you want the plugin or Community file

Steps

  1. Add the registry entry "@keyline": "https://keylineicons.com/r/{name}.json" under registries in components.json.
  2. Run npx shadcn add @keyline/bell to add the stroke bell icon.
  3. Run npx shadcn add @keyline/fill/bell or npx shadcn add @keyline/sharp/fill/bell to add a different style or corner treatment.
  4. Use the generated component in your code, since it imports nothing from the package.

Prompt for your agent

In the shadcn/ui project at <path to project>, add the Keyline bell icon from the @keyline registry using npx shadcn add, then confirm the generated component file exists and contains no import from @keyline-icons. Report the file path that shadcn wrote.

Caveat. The site registry depends on keylineicons.com being reachable, so use the GitHub install command from the README if you cannot reach it.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for keyline-icons/keyline-icons and "Add a Keyline icon to a shadcn/ui project"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer