A collection of reusable Angular components, inspired by shadcn/ui. Built with Tailwind CSS and modern Angular practices.
- 🎨 Modern, minimal design
- ⚡ Lightweight and performant
- 🛠️ Easy to customize
- 📦 Simple installation
- 🔧 Zero external dependencies
- ♿ Accessible components
# Install the CLI
npm install -g @ngshad/cli
# Go to your Angular project
cd my-angular-app
# Initialize NgShad
ngshad init
# Install required dependencies
npm install -D tailwindcss postcss autoprefixer
# Add your first component
ngshad add buttonimport { ButtonComponent } from './components/button';
@Component({
// ...
imports: [ButtonComponent],
template: `
<ngshad-button variant="primary">Click me</ngshad-button>
`
})button- Flexible button component with multiple variants- More components coming soon!
<!-- Default -->
<ngshad-button>Default</ngshad-button>
<!-- Primary -->
<ngshad-button variant="primary">Primary</ngshad-button>
<!-- Secondary -->
<ngshad-button variant="secondary">Secondary</ngshad-button>
<!-- Destructive -->
<ngshad-button variant="destructive">Destructive</ngshad-button>
<!-- Ghost -->
<ngshad-button variant="ghost">Ghost</ngshad-button>
<!-- Link -->
<ngshad-button variant="link">Link</ngshad-button># Clone the repository
git clone https://github.com/yourusername/ngshad.git
cd ngshad
# Install dependencies
npm install
# Build the project
npm run build
# Link for local development
cd packages/cli && npm linkngshad/
├── packages/
│ ├── cli/ # CLI tool for adding components
│ │ ├── src/
│ │ └── package.json
│ └── components/ # Component library
│ ├── src/
│ └── package.json
├── README.md
└── package.json
MIT - See LICENSE for details