mcpField
S
shadcn-ng

shadcn-ng

github.com/oguzhan18Design & UI7152 installsUpdated 30w ago
Repository

About shadcn-ng

shadcn-ng is an Angular port of shadcn/ui for developers building interfaces with Tailwind CSS. It provides standalone, copy-and-customize components and a CLI for initializing projects and adding components.

Key features

  1. 01Standalone Angular components
  2. 02Tailwind CSS styling
  3. 03CLI initialization and component addition
  4. 04CSS-variable theming
  5. 05Class-merging cn() utility

Use cases

  1. 01Starting an Angular UI project
  2. 02Adding reusable UI components
  3. 03Customizing component styles and colors

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill shadcn-ng

After installing, type/shadcn-ngin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

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";

@Component({
  standalone: true,
  imports: [UbButtonDirective],
  // ...
})
export class ExampleComponent {}

  • Configure Tailwind CSS — Follow the official installation guide to set up tailwindcss-animate, class-variance-authority, clsx, and tailwind-merge

  • Use CSS variables for theming — Define colors in :root in your globals.css for dynamic theming

  • Treat components as your own code — Copy components into your project and customize as needed

  • Use registry for custom components — Create your own registry.json to share and reuse custom components across projects

Comments

Markdown supported