Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/luciano-work/angular-tailwind

Angular & Tailwind CSS Admin Dashboard Starter Kit, Free and Open Source
https://github.com/luciano-work/angular-tailwind

admin-dashboard angular dashboard free open-source tailwind tailwind-css tailwindcss

Last synced: 2 months ago
JSON representation

Angular & Tailwind CSS Admin Dashboard Starter Kit, Free and Open Source

Host: GitHub
URL: https://github.com/luciano-work/angular-tailwind
Owner: luciano-work
Created: 2022-03-24T18:07:07.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-11-09T15:08:39.000Z (8 months ago)
Last Synced: 2024-01-08T10:41:28.379Z (6 months ago)
Topics: admin-dashboard, angular, dashboard, free, open-source, tailwind, tailwind-css, tailwindcss
Language: SCSS
Homepage: https://at.lanno.dev
Size: 8.18 MB
Stars: 134
Watchers: 10
Forks: 50
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml

Lists

awesome-tailwindcss - Angular-Tailwind - Dashboard starter kit using Angular and Tailwind CSS. (Starters & Themes)
awesome-tailwindcss - Angular-Tailwind - Dashboard starter kit using Angular and Tailwind CSS. (Starters & Themes)

README

        


    





    

        

    

    

        

    

    

        

    



#### Motivation

For me, the best strategy for learning new skills is to practice. I have created this project to learn more about Tailwind CSS using my favorite framework (Angular). I have to tell you, Tailwind is amazing!

 The project is not finished yet!

See [Demo](https://at.lanno.dev) page.



  



#### Versions

 

#### Features

- [x] Sidebar

- [x] Dark Theme

- [x] Navbar

- [x] Footer

- [x] Auth Module

- [x] Dashboard Module

- [x] Standalone components

- [x] Angular Signals

- [x] Multi Theme

- [x] Tests E2E

- [ ] User Module

- [ ] Guards

- [ ] Animations

#### Commands

| command                   | What it does?                                 |

| ------------------------- | :-------------------------------------------- |

| `npm start`               | Starts the server in dev mode                 |

| `npm run lint`            | Runs ESLint on project                        |

| `npm run prettier`        | Runs prettier on entire src folder            |

| `npm run prettier:verify` | Runs prettier-check and throws error if fails |

| `npm run prettier:staged` | Runs prettier on only staged (changed) files  |

| `npm run e2e-ui`          | Runs playwright e2e test with UI              |

#### Dependencies

| Package            | What it does?                                                                               | Link                                                   |

| ------------------ | :------------------------------------------------------------------------------------------ | :----------------------------------------------------- |

| `angular-svg-icon` | Provides a means to inline SVG files to allow for them to be easily styled by CSS and code. | [Here](https://www.npmjs.com/package/angular-svg-icon) |

| `apexcharts`       | Modern & Interactive Open-source Charts                                                     | [Here](https://www.npmjs.com/package/apexcharts)       |

| `ng-apexcharts`    | Angular wrapper for ApexCharts to build interactive visualizations in Angular.              | [Here](https://www.npmjs.com/package/ng-apexcharts)    |

#### Dev Dependencies

| Package                       | What it does?                                                                                            | Link                                                              |

| ----------------------------- | :------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |

| `prettier`                    | An opinionated code formatter                                                                            | [Here](https://www.npmjs.com/package/prettier)                    |

| `prettier-plugin-tailwindcss` | A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order | [Here](https://www.npmjs.com/package/prettier-plugin-tailwindcss) |

| `tailwind-scrollbar`          | Tailwind plugin for styling scrollbars.                                                                  | [Here](https://www.npmjs.com/package/tailwind-scrollbar)          |

| `tailwindcss`                 | A utility-first CSS framework for rapidly building custom user interfaces.                               | [Here](https://www.npmjs.com/package/tailwindcss)                 |

#### Icons and Patterns

This project use [Hero Icons](https://heroicons.com/) and [Hero Patterns](https://heropatterns.com/)

#### Disclaimer

The Tailwind name and logos are trademarks of Tailwind Labs Inc.

The Angular name and logos are trademarks of Google.