
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-ngAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 152 |
|---|---|
| repo stars | ★ 6 |
| Last updated | April 4, 2026 |
| Repository | oguzhan18/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
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 initfor initialization andnpx shadcn-ng@latest add <component>for adding components
- NEW: Standalone components — All components are Angular standalone components with proper imports
- NEW:
cnutility — Use thecn()helper fromlib/utils.tsto 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
importsarray
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
:rootin 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
Docs Reference Index
Official Documentation
External Resources
Issues Reference Index
GitHub Repository
- shadcn-ng Issues - Main issue tracker
- shadcn/ui Issues - Original shadcn/ui issues (for reference)