mcpField
S
shadcn-ng

shadcn-ng

github.com/oguzhan18デザイン・UI7152 回インストール30 週間前に更新
リポジトリ

shadcn-ng について

shadcn-ngは、Tailwind CSSを使うAngular開発者向けのshadcn/ui移植版です。コピーしてカスタマイズできるスタンドアロンコンポーネントと、初期化や追加に使うCLIを備えています。

主な機能

  1. 01スタンドアロンAngularコンポーネント
  2. 02Tailwind CSSスタイル
  3. 03初期化・コンポーネント追加用CLI
  4. 04CSS変数によるテーマ設定
  5. 05クラス統合用cn()ユーティリティ

活用シーン

  1. 01Angular UIプロジェクトの開始
  2. 02再利用可能なUIコンポーネントの追加
  3. 03コンポーネントのスタイルと色の調整

インストール

コマンドをコピーしてターミナルで実行します。

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

インストール後、Claude Code で/shadcn-ngを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

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

詳細

unovue/shadcn-ng shadcn-ng

バージョン： 最新（2025） タグ： Angular、Tailwind CSS、Radix Primitives

参考資料： ドキュメント — インストール、コンポーネント、テーマ設定 • GitHub の Issues — バグ、回避策 • GitHub Discussions — Q&A、パターン

API の変更

このセクションでは、バージョン固有の API の変更について説明します。

  • 新機能：Angular のサポート — shadcn-ng は shadcn/ui の Angular 移植版で、Tailwind CSS でスタイル設定されたコピー＆ペースト可能なコンポーネントを提供します

  • 新機能：CLI コマンド — 初期化には npx shadcn-ng@latest init、コンポーネントの追加には npx shadcn-ng@latest add <component> を使用します

  • 新機能：スタンドアロンコンポーネント — すべてのコンポーネントは、適切なインポートを備えた Angular のスタンドアロンコンポーネントです

  • 新機能：cn ユーティリティ — lib/utils.ts の cn() ヘルパーを使用して Tailwind CSS クラスを結合します

  • 新機能：CSS 変数によるテーマ設定 — globals.css の CSS 変数で色を設定します

ベストプラクティス

  • スタンドアロンコンポーネントを使用する — shadcn-ng のすべてのコンポーネントはスタンドアロンなので、imports 配列に直接インポートします
import { Component } from "@angular/core";
import { UbButtonDirective } from "~/components/ui/button";

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

  • Tailwind CSS を設定する — 公式インストールガイドに従って、tailwindcss-animate、class-variance-authority、clsx、tailwind-merge を設定します

  • テーマ設定には CSS 変数を使用する — 動的なテーマ設定のため、globals.css の :root に色を定義します

  • コンポーネントを自分のコードとして扱う — コンポーネントをプロジェクトにコピーし、必要に応じてカスタマイズします

  • カスタムコンポーネントにはレジストリを使用する — 独自の registry.json を作成して、プロジェクト間でカスタムコンポーネントを共有し、再利用します

コメント

Markdown 対応