ShadNG for Angular: Shadcn/UI-Inspired Design System With Icons, MCP, and Skills

Home
Prefer reading on the original site? View on Dev.to

Angular developers deserve the same clean, composable product patterns that made shadcn/ui popular.

That’s why I built ShadNG: an Angular implementation of shadcn/ui-inspired design patterns, plus an icon package, MCP server, and skills for modern AI coding workflows.

What is ShadNG?

ShadNG is a toolkit made of 4 parts:

  • @shadng/sng-ui → Angular UI components
  • @shadng/sng-icons → Angular icon package
  • @shadng/sng-mcp → MCP server for better AI-assisted development
  • sng-skills → ready skill packs for tools like Codex, Claude, Gemini, and more

Why this project exists

Most teams want:

  • component patterns that are easy to edit
  • no hard lock-in
  • docs + examples that feel like real app UI
  • better AI context when building features

ShadNG focuses on exactly that.

Core idea: copy-paste ownership

You can install and use packages normally, and also use the copy-paste model to own component source in your app when needed.

  npm i @shadng/sng-ui @shadng/sng-icons
  npx @shadng/sng-ui init
  npx @shadng/sng-ui add button card table dialog drawer
Enter fullscreen mode Exit fullscreen mode

This gives teams full control over implementation details without fighting a closed abstraction.

MCP + Skills

ShadNG also includes:

  • MCP server (@shadng/sng-mcp) for structured AI context
  • Skill packs (sng-skills) to guide different AI tools with consistent ShadNG conventions

That helps AI assistants understand your project faster and generate changes that match your design system.

Live docs and demo

Packages

GitHub repos

Current direction

I’m continuing to improve:

  • component depth and quality
  • docs clarity for both humans and AI
  • dashboard-grade examples
  • MCP + skills ecosystem

If you build Angular products, I’d love your feedback after trying ShadNG.