This brings shadcn's component philosophy to Angular. You get copy-paste Tailwind CSS components built as Angular standalone components, so you drop them into your project and modify them directly rather than fighting a component library's API. The CLI handles setup and adding components (npx shadcn-ng@latest add), and everything uses CSS variables for theming. It's genuinely useful if you like the shadcn approach of owning your UI code but want it in Angular instead of React. The standalone component architecture means clean imports without module boilerplate, and the cn utility handles class merging the same way you're used to from the React version.

skills.sh installs
152
GitHub stars
7
last updated
Aug 21, 2026

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill shadcn-ng --agent claude-code

Installs into .claude/skills of the current project.

Files

unovue/shadcn-ng shadcn-ng

Version: Latest (2025) Tags: Angular, Tailwind CSS, Radix Primitives

References: Docs — installation, components, theming • GitHub Issues — bugs, workarounds • GitHub Discussions — Q&A, patterns

API Changes

This section documents version-specific API changes.

  • NEW: Angular support — shadcn-ng is the Angular port of shadcn/ui, providing copy-paste components styled with Tailwind CSS

  • NEW: CLI commands — Use npx shadcn-ng@latest init for initialization and npx shadcn-ng@latest add <component> for adding components

  • NEW: Standalone components — All components are Angular standalone components with proper imports

  • NEW: cn utility — Use the cn() helper from lib/utils.ts to merge Tailwind CSS classes

  • NEW: CSS variables theming — Configure colors via CSS variables in globals.css

Best Practices

  • Use standalone components — All shadcn-ng components are standalone, import them directly in imports array
import { Component } from "@angular/core";
import { UbButtonDirective } from "~/components/ui/button";

Sponsors

Details

Repository
github.com/oguzhan18/angular-ecosystem-skills
Categories
Frontend Development, Documentation, Debugging
First seen
Jun 3, 2026

More from oguzhan18/angular-ecosystem-skills

All 45
1nextlevelbuilder avatarui-ux-pro-maxnextlevelbuilder/ui-ux-pro-max-skillUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guideline443.3Kskills.sh installs
2vercel-labs avatarvercel-react-view-transitionsvercel-labs/agent-skillsGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view tran185.5Kskills.sh installs
3wshobson avatartailwind-design-systemwshobson/agentsBuild scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implemen72.7Kskills.sh installs
4heygen-com avatartailwindheygen-com/hyperframesTailwind CSS v4.2 browser-runtime patterns for HyperFrames compositions. Use when scaffolding or editing projects created with `hyperframes init --tailwind`, wr70.6Kskills.sh installs
5expo avatarexpo-tailwind-setupexpo/skillsFramework (OSS). Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling53.6Kskills.sh installs
6angular avatarangular-developerangular/skillsGenerates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices o48.9Kskills.sh installs