{"id":26947171,"url":"https://github.com/quedicesebas/ngx-tailwind-ui","last_synced_at":"2025-04-02T20:18:17.584Z","repository":{"id":233165880,"uuid":"785925905","full_name":"quedicesebas/ngx-tailwind-ui","owner":"quedicesebas","description":"Simple bottom sheet modal for Angular, using Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-03-31T07:17:51.000Z","size":1874,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-31T08:23:27.399Z","etag":null,"topics":["angular","angularx","tailwindcss","ui","ui-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/quedicesebas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-12T23:33:48.000Z","updated_at":"2025-03-31T07:17:55.000Z","dependencies_parsed_at":"2024-05-02T21:47:57.903Z","dependency_job_id":"dd639553-1bed-4a15-8c5a-09eb0f2a1f93","html_url":"https://github.com/quedicesebas/ngx-tailwind-ui","commit_stats":{"total_commits":26,"total_committers":1,"mean_commits":26.0,"dds":0.0,"last_synced_commit":"14b2f570e4941a78ac39e001b011aab9166ea93c"},"previous_names":["quedicesebas/ngx-bottom-sheet-modal","quedicesebas/angular-tailwind-ui","quedicesebas/ngx-tailwind-ui"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quedicesebas%2Fngx-tailwind-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quedicesebas%2Fngx-tailwind-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quedicesebas%2Fngx-tailwind-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quedicesebas%2Fngx-tailwind-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quedicesebas","download_url":"https://codeload.github.com/quedicesebas/ngx-tailwind-ui/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246735569,"owners_count":20825266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angularx","tailwindcss","ui","ui-components"],"created_at":"2025-04-02T20:18:17.124Z","updated_at":"2025-04-02T20:18:17.577Z","avatar_url":"https://github.com/quedicesebas.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Tailwind UI\n\nA collection of easy-to-use Angular components, directives, and services built with Angular 19 and TailwindCSS 3. This library provides a set of modern, accessible, and customizable UI components that follow best practices and integrate seamlessly with your Angular applications.\n\n## ✨ Features\n\n- 🎨 **Modern Design**: Built with TailwindCSS 3 for beautiful, responsive components\n- 🚀 **Angular 19 Ready**: Fully compatible with the latest Angular version\n- ♿ **Accessibility First**: All components follow WCAG guidelines\n- 🌙 **Dark Mode Support**: Built-in dark mode support for all components\n- 📱 **Responsive**: Mobile-first approach with desktop optimizations\n- 🎯 **Type-Safe**: Full TypeScript support with comprehensive type definitions\n- 🔧 **Customizable**: Easy to customize with TailwindCSS classes\n- ⚡ **Performance**: Optimized for fast loading and smooth interactions\n- 📦 **Modular**: Install only what you need\n- 🛠️ **Developer Experience**: Built with developer productivity in mind\n\n## 📦 Packages\n\n### [Bottom Sheet Modal](https://github.com/quedicesebas/ngx-tailwind-ui/blob/main/projects/bottom-sheet-modal/README.md)\n\nA responsive bottom sheet modal that adapts to screen size:\n\n- 📱 Displays as bottom sheet on mobile\n- 💻 Shows as modal dialog on desktop\n- 🔄 Smooth animations and transitions\n- 🎨 Customizable styling with TailwindCSS\n\n```bash\nnpm install @ngx-tailwind-ui/bottom-sheet-modal\n```\n\n![Bottom Sheet Modal Demo](https://raw.githubusercontent.com/quedicesebas/ngx-tailwind-ui/main/projects/bottom-sheet-modal/demo.gif)\n\n### [Toast](https://github.com/quedicesebas/ngx-tailwind-ui/blob/main/projects/toast/README.md)\n\nA flexible toast notification system:\n\n- 📝 Multiple types (info, success, warning, error)\n- ⏱️ Configurable duration\n- 🎨 Visual feedback with icons\n- 🔄 Progress bar support\n- 🎯 Dismissible notifications\n\n```bash\nnpm install @ngx-tailwind-ui/toast\n```\n\n### [Phone Numbers](https://github.com/quedicesebas/ngx-tailwind-ui/blob/main/projects/phonenumbers/README.md)\n\nA comprehensive phone number handling solution:\n\n- 🔍 Validation using Google's libphonenumber\n- 🌍 Automatic country code detection\n- 📱 Formatting to international/national format\n- 🔄 Two-way binding support\n- ♿ Accessibility features\n\n```bash\nnpm install @ngx-tailwind-ui/phonenumbers\n```\n\n## 🎮 Demo\n\nView the live [demo](https://stackblitz.com/edit/ngx-tailwind-ui) to see all components in action.\n\n## 🛠️ Prerequisites\n\n- Angular 17+ project\n- TailwindCSS 3\n- And package specific ones\n\n## 🚀 Quick Start\n\n1. Install the package(s) you need:\n\n```bash\nnpm install @ngx-tailwind-ui/bottom-sheet-modal @ngx-tailwind-ui/toast @ngx-tailwind-ui/phonenumbers\n```\n\n2. Import the components in your Angular application:\n\n```typescript\nimport { TauiBottomSheetModalComponent } from \"@ngx-tailwind-ui/bottom-sheet-modal\";\nimport { TauiToastComponent } from \"@ngx-tailwind-ui/toast\";\nimport { TauiPhonenumbersDirective } from \"@ngx-tailwind-ui/phonenumbers\";\n```\n\n3. Add TailwindCSS to your project if not already installed:\n\n```bash\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init\n```\n\n4. Configure your `tailwind.config.js`:\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\"./src/**/*.{html,ts}\", \"./node_modules/@ngx-tailwind-ui/**/*.{html,ts,js,mjs}\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n};\n```\n\n## 🌐 Browser Support\n\nAll components are tested and supported on:\n\n- Chrome (latest)\n- Safari (latest)\n- Edge (latest)\n\n## ⚡ Performance Considerations\n\n- **Change Detection**: Optimized to minimize change detection cycles\n- **Lazy Loading**: Supports lazy loading for better initial load performance\n- **Bundle Size**: Minimal impact on bundle size\n- **Memory Usage**: Efficient memory management\n\n## 🤝 Contributing\n\nWe welcome contributions!\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://raw.githubusercontent.com/quedicesebas/ngx-tailwind-ui/main/LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquedicesebas%2Fngx-tailwind-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquedicesebas%2Fngx-tailwind-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquedicesebas%2Fngx-tailwind-ui/lists"}