Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
oguzhan18 avatar

Shadcn Ng

  • 152 installs
  • 6 repo stars
  • Updated April 4, 2026
  • oguzhan18/angular-ecosystem-skills

Port shadcn-style accessible Angular UI primitives—buttons, dialogs, forms, tables—with Tailwind theming into new or existing Angular feature screens and design systems.

About

Angular shadcn-ng skill teaches Claude to implement shadcn-inspired, Tailwind-styled, accessible UI components in Angular—buttons, inputs, dialogs, tables—so SaaS and content frontends ship cohesive design systems quickly.

  • shadcn-ng component patterns
  • Tailwind theme tokens
  • Accessible form controls
  • Dialog, sheet, and table primitives
  • Angular template composition

Shadcn Ng by the numbers

  • 152 all-time installs (skills.sh)
  • Ranked #1,011 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill shadcn-ng

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs152
repo stars6
Last updatedApril 4, 2026
Repositoryoguzhan18/angular-ecosystem-skills

What it does

Port shadcn-style accessible Angular UI primitives—buttons, dialogs, forms, tables—with Tailwind theming into new or existing Angular feature screens and design systems.

Files

SKILL.mdMarkdownGitHub ↗

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

Related skills

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.